Create Dynamic Favicon in WordPress using Meta Box plugin

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.

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.

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

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:

• Meta Box: is the framework which allows you to create and deal with custom fields in WordPress.
• Meta Box Builder: The premium extension of Meta Box provides you an intuitive interface to create custom fields without touching any line of code. Besides, there is another similar option, but totally free, which is Online Generator. They are optional. If you want to code, skip this one.

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.

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

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.

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

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.

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!