Do you recognize those tiny symbols that appear in your browser next to the website name? The favicon is that. The small icon helps to attract and create a memorable image of the brand in the user’s mind. It is typically 16 and 16 pixels in size and is kept in a file called favicon.io in the server's root folder. But, in some other cases, you may want to highlight your products or any page by setting other specific favicons for each of them. Then, using the Meta Box plugin along with editing the theme a little bit will help you get it.
This is the dynamic favicon we’ll create in today's practice. Let’s look at how to do it.
Video Version
Before Getting Started
In this practice, I will create dynamic favicons for my product pages. Each singular page of a product will have its own favicon.
So, to get started, we need the Meta Box core plugin to have the framework for creating the custom post type for the products and custom field for the favicons. You can download it directly from wordpress.org.
Here are the extension from Meta Box that we need for this practice:
- MB Custom Post Type: to create a custom post type for products;
- Meta Box Builder: to have a UI on the back end to create the custom field for the favicon easily.
Create Product Pages
We should have product pages before adding favicons for them. You might have it on your site already. But if not, we have another tutorial to create product pages. You should follow it.
In this practice, I create a post type named Product.
Create a Custom Field
I’ll create only one custom field to upload the favicon image. Each post of a product will have this field to save its own favicon. In the real case, you may want to create some other fields for extra information about the product.
Just go to the Meta Box and create them.
In this case, I create only one field for the favicon in the type as Single Image.
After creating the wanted fields, move to the Settings tab, set the Location as Post type, and select Product to apply the field to it.
Now, when adding a new post on the Products post type, you’ll see the field.
Try to add an image to the field. Note that, since the favicon has the ratio as 1:1, you should choose an image with the same ratio to make sure that it will be displayed in the best way.
Set the Field’s Value to be Favicon
We should interfere with the theme to set the favicon as we want. You definitely can go to the theme’s files and add code. But, with Meta Box, we have the MB Views to indirectly interfere with the theme. In today’s practice, we will provide a guide for both ways. However, we still highly recommend using MB Views since the favicon will not be affected when you change or edit the theme.
Method 1: Add Code to Theme’s File
We should add code to the theme’s files to add some functions for the fields.
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' );
Since we will set the favicon for the singular page of the products only, we have the part to check if the current page is the singular page of the product post type or not. If not, it will do nothing. But if it is the wanted page, all the below lines of code will run and we will have the dynamic favicon on the page.
First, I use the rwmb_meta( )
function to get the value of the field. 'favicon'
is the ID of the field that I save the favicon.
There also will be some attributes in this function to regulate the output, you should follow the documentation for more details.
$favicon = $favicon ? $favicon['url'] : get_site_icon_url();
: is to check if there is any image in the field. If not, it will get the default icon of the site.
If the field has any image, echo "<link rel='shortcut icon' href='$favicon' sizes='32x32' type='image/x-icon'>";
will display it to be the favicon of the page.
These attributes are the default of HTML, you should not change it.
wp_head
is the hook that allows you to print the image to the header tag of the page.
Go back to the page on the frontend, and you’ll see the image from the field displayed as the favicon already.
Method 2: Use MB Views
Go to Views in Meta Box and create a new view.
We should get the image saved in the field, so click on the button. And choose the created field that we use for the favicon.
You can choose how the image will be output. We should choose the Image URL option.
Next, change the code a bit to set it to the page title in the browser tab. It’s quite the same with the one we use with PHP.
This is the one we get when inserting the field.
Go down to the settings section of the view, and choose the type of the view as Action. Since we also use the hook as method 1 to interfere in the theme, set the Action name as the hook we want to use.
In the Run on section, choose the type of page you want the favicon to display on.
Then, set the Location as the post type of your product. So, the view will be applied to all the singular pages of the Product post type.
There is no need to use too much code anymore when using MB Views. After publishing the view, you also see the favicon.
Last Words
Adding a dynamic favicon to your WordPress site is a simple and easy approach to strengthen your branding and distinguish your site from the competition. Just following a few simple steps using Meta Box, you can create a dynamic favicon and run it on your site in no time. Hopefully, they will help you out. Feel free to give it a try and share your experiences in the comments section. Thanks!
Other case studies you might be interested in
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields for WooCommerce - P2 - Using MB Views
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts - Using Custom Fields
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to create a FAQs page - P5 - Using Meta Box and Breakdance
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page - P7 - Using Meta Box + Kadence
- How to Create a Product Page - P8 - Using Meta Box and Brizy
- How to Create a Product Page - P9 - Using Meta Box and Divi
- How to Create a Product Page using Meta Box Plugin
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe - P8 - Using Meta Box and Kadence
- How to Create a Recipe - P9 - Using Meta Box and Divi
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
- How to Create a Simple Listing - P4 - Using Meta Box and Elementor
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Team Members Page - P7 - Using Meta Box and Kadence
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
- How to Create a Video Gallery Page - P5 - Using MB Views
- How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page - P6 - Using MB Views
- How to Create an FAQs Page - P7 - Using Meta Box and Divi
- How to Create an FAQs Page - P8 - Using Meta Box and Kadence
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
- How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
- How to Create Download and Preview Buttons - P3 - Using MB Views
- How to Create Download Buttons in WordPress - Using Custom Fields
- How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
- How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Notification Using Custom HTML Field
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Relationships - P2 - Using Meta Box and Bricks
- How to Create Relationships - P3 - Using MB Views
- How to Create Relationships - P4 - Using Meta Box and Breakdance
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
- How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
- How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
- How To Display All Listings On A Map With Meta Box
- How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display the Dynamic Banners - P2 - Using Meta Box and Bricks
- How to Display The Latest Products - P5 - Using Meta Box and Bricks
- How to Display the Latest Products - P6 - using Meta Box and Breakdance
- How to Display the Latest Products - P7 - Using Meta Box + Kadence
- How to Display the Latest Products Section - P4 - Using Meta Box + Zion
- How to Display the Most Viewed Posts - P1 - using MB Views
Does this method require that thumbnails are set in media options to be square crops? What happens if they're not?
Thanks for the tutorial!
Is there also a way to display a static favicon from a settings page?
How to display this custom favicon on the whole site as default
meaning for all pages and posts including CPT's