black friday sale

Favicon refers to Favorite Icon, which is a small icon displayed in the tab’s name on the browser. Users can distinguish each tab by this icon. It often has the size is 16x16px and is saved in a file named favicon.io in the root folder of the server. It also is considered as an abridged logo of your business.

Every website often has a favicon applied to all pages on the site. But, you may want to highlight your products by set individual favicon for each product page. Using Meta Box plugin along with editing the theme a little bit will help you get it.

That’s called Dynamic Favicon which we are going to talk about in this post. So now, let’s check how to create a Favicon for a website first, then we go to create the Dynamic Favicon.

Favicon displays in the tab name on a browser
Favicon displays in the tab name on a browser

Create a Common Favicon for a WordPress Website

In the admin dashboard, go to the Appearance menu > Customize. Next, in the new screen of the Customizer, choose Site Identity, then press Select Site Icon in the Site Icon section.

Create a Common Favicon for a WordPress Website

Choose an image that you want to set it to be favicon, then press Publish and check the result.

Your image becomes the favicon of your site
Your image becomes the favicon of your site

Create Dynamic Favicon using Meta Box Plugin

Dynamic Favicon means that the favicon will be changed flexibly on pages or posts. In this post, we will create product pages with their corresponding favicon. If your product has its own logo, this is the way we set it to be the favicon of your product.

For your quick following, I will use a custom post type named Product for my posts to separate them from the normal blog post.

Before Getting Started

To create a dynamic favicon, we will use the two following plugins:

Besides, creating a dynamic favicon needs some acts on the theme. I’m using Justread from Gretathemes to make this tutorial. It’s free and fast, so you may try it.

Step 1: Create Product Pages

We have a tutorial for creating product pages using Meta Box for your wick reference.

Please note that I set the name of the custom post type for product post as Product. I will use this name throughout all this post. If you don't know how to create this post type yet, this post can help you create a custom post type or just use this free online Post Type Generator tool.

Step 2: Add a New Custom Field for Your Post

We are creating a new custom field for the product post, which will be used to upload the favicon image for that post.

In the admin dashboard, go to the Meta Box menu > Custom Fields > Add New to create a new field group (which means a custom meta box), then configure that field group as you want.

Add a Field Group named Dynamic Favicon
Add a Field Group named Dynamic Favicon

Next, create a custom field insides that field group. Click Add Field and search for the Single Image.

Create a Single Image field

A field in the type of Single Image will appear immediately in the field group. This field allows users to upload an image into the field. I set its name is Favicon.

Now, move to the Settings tab of the Field Group’s edit page. You will see a place to choose the post type where you want the custom field to be on in the Post types section. I chose Product - the post type of product post which I set in step 1. This action helps the created custom field display on the edit page of posts in Product type.

Choose a post type

Go back to the edit page of the product post, you will see the field.

A new custom field appears under the post
A new custom field appears under the post

Set the Value of the Custom Field to be Favicon of the Page

The current favicon of your product page is now the site’s one. So, we will get the value from the created custom field to replace it.

Put the below code into the functions.php file in your theme folder.

function prefix_dynamic_favicon(){
   if ( ! is_singular( 'product' ) ) {
   return;
   }

   $favicon = rwmb_meta( 'favicon', array( 'size' => 'thumbnail' ) );
   $favicon = $favicon ? $favicon['url'] : get_site_icon_url();

   echo "<link rel='shortcut icon' href='$favicon' sizes='32x32' type='image/x-icon'>";
}
add_action( 'wp_head', 'prefix_dynamic_favicon' );

This code is to check if you added an image into the Favicon field or not. If this field is not blank, the image will be shown as the favicon. Otherwise, the website’s favicon will be shown.

I used wp_head to add this code to the head of the page.

In the above code, there are some noticeable points:

  • get_site_icon_url(): allows us to get URL of the website’s favicon. It returns a value is a URL.
  • rwmb_meta( ‘favicon’ ): gets the value of the field which has ID is ‘favicon’.
  • Array ( ‘size’ => ‘thumbnail’): is the image size of the favicon.

If you need any further parameters for the image field, this documentation is for your quick reference.

Now, save the functions.php file, and go to the product page in which you set its own favicon already. You can see it on the tab now.

Set the Value of the Custom Field to be Favicon of the Page

Final Words

By this way, you definitely can create Dynamic Favicon for any kind of page or page on your WordPress site. This may be a good spotlight for your products/services or at least improve user experience on your site.

We hope that with the support from Meta Box, you may find more ways to apply and use it to get more benefits. In case you need further tutorials for Meta Box plugin, look at this. Enjoy it!

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. Create a Filter to Find Hotels by Location
  3. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  4. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  5. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  6. Create Dynamic Favicon in WordPress using Meta Box plugin
  7. Create Posts Series in WordPress Using Meta Box
  8. Display a User List On the Frontend with Meta Box
  9. Display The Latest Products Section - P2 - Using Meta Box and Elementor
  10. Display The Latest Products Section - P3 - Using Meta Box And Oxygen
  11. Display the Latest Products Section - P4 - Using Meta Box + Zion
  12. How to Add Custom Fields to Display Banners using Meta Box Plugin
  13. How to Add Guest Author in WordPress using Meta Box (Part 1)
  14. How to Add Guest Author in WordPress using Meta Box (Part 2)
  15. How to Add Related Posts to WordPress Using Meta Box
  16. How to Build a Hotel Booking Website Using Meta Box - P1
  17. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  18. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  19. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  20. How to Create a Classified Ads Website using Meta Box
  21. How to Create a Product Page - P2 - Meta Box + Oxygen
  22. How to Create a Product Page - P3 - Using Meta Box + Bricks
  23. How to Create a Product Page - P5 - Using Meta Box and Gutenberg
  24. How to Create a Product Page using Meta Box Plugin
  25. How to Create a Recipe - P2 - Using Meta Box and Oxygen
  26. How to Create a Recipe - P3 - Using Meta Box and Elementor
  27. How to Create a Recipe - P4 - Using Meta Box and Bricks
  28. How to Create a Recipe - P5 - Using Meta Box and Zion
  29. How to Create a Recipe with Meta Box Plugin
  30. How to Create a Simple Listing - P2 - Using Meta Box and Bricks
  31. How to Create a Team Members Page - P1- Using Meta Box and Elementor
  32. How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
  33. How to Create a Team Members Page - P3 - Using Meta Box and Bricks
  34. How to Create a Team Members Page - P4 - Just Meta Box
  35. How to Create ACF Flexible Content Field with Meta Box
  36. How to Create an Auto-Updated Cheat Sheet in WordPress
  37. How to Create an FAQs Page - P1 - Using Meta Box and Elementor
  38. How to create an FAQs page - P2 - Using Meta Box and Oxygen
  39. How to Create an FAQs Page -P3- Using Meta Box
  40. How to Create Buttons with Dynamic Link using Custom Fields
  41. How to Create Category Thumbnails & Featured Images Using Custom Fields
  42. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  43. How to Create Menu for a Restaurant - P1 - Using Meta Box and Elementor
  44. How to Create Online Admission Form for School or University
  45. How to Create Online Reservation Form for Restaurants using Meta Box
  46. How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
  47. How to Display Images from Cloneable Fields - P1 - with Gutenberg
  48. How to Display Images from Cloneable Fields - P2 - with Oxygen
  49. How to Display Images from Cloneable Fields - P3 - with Elementor
  50. How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
  51. How to Display Product Variations - P1 - Using Meta Box and Gutenberg
  52. How to Display Product Variations - P2 - Using Meta Box and Oxygen
  53. How to Display The Latest Products - P5 - Using Meta Box and Bricks
  54. How to Manually Reorder Posts with Meta Box
  55. How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
  56. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS

2 thoughts on “Create Dynamic Favicon in WordPress using Meta Box plugin

  1. Does this method require that thumbnails are set in media options to be square crops? What happens if they're not?

  2. Thanks for the tutorial!
    Is there also a way to display a static favicon from a settings page?

Leave a Reply to Tobias Haas Cancel reply