How To Set Favicon on WordPress Twenty Twenty-Four Theme?

A favicon is an abbreviation for "favorite icon". It's a small image next to the website name in browser tabs. A well-designed favicon not only enhances your site's visual appearance but, also increase brand recognition. Learning how to set a favicon in WordPress can make your website look professional and make it more acknowledgeable to your visitors.

There are various approaches you can take to set a favicon in WordPress 2024 Themes:

Using the WordPress Customizer

In this approach, we are manually adding the image file of the favicon so that after publish the change it can display the favicon.

Steps To Set Favicon on WordPress Twenty Twenty-Four Theme using the WordPress Customizer

Step 1: Navigate to Appearance > Customizer from your WordPress dashboard. If the option is unavailable or you use a block theme, use the /wp-admin/customize.php slug to open the Customizer.

Step 2: Choose the Site identity tab and click the Select site icon button.

Step 3: The WordPress media library will pop up. Upload your favicon or choose an existing image from the media library, then click Select.

Step 4: You will immediately see the new favicon in your browser tab. Click Publish to save the change.

Using a RealFaviconGenerator plugin

In this approach, we are using plugin to add the favicon in the WordPress website.

Steps To Set Favicon on WordPress Twenty Twenty-Four Theme using a RealFaviconGenerator plugin

Step 1: Install and activate the Favicon by RealFaviconGenerator plugin from your WordPress dashboard (To install plugins in WordPress you need to upgrade your plan to creator).

Step 2: Go to Appearance > Favicon and click Select from the Media Library to upload or choose your favicon image (minimum 260 × 260 px).

Step 3: Click Generate Favicon. The plugin will take you to RealFavicon Generator to customize the image if needed.

Step 4: After customization, click Generate your Favicon for returning to WordPress.

Step 5: Your favicon should now be set. Check previews by clicking Check your favicon.

Adding Favicon via 'functions.php'

In this approach, we are manually adding the code for adding the Favicon in the Wordpress website.

Steps To Set Favicon on WordPress Twenty Twenty-Four Theme by adding Favicon via 'functions.php'

Step 1: Go to Media > Add New in the WordPress dashboard. Upload your favicon file.

Step 2: After uploading, click on the file in the Media Library and copy the URL.

Step 3: In the WordPress dashboard, go to Appearance > Theme File Editor.

Step 4: In the Theme Edito, locate 'functions.php' from the list of theme files on the right side and click on it. Scroll to the bottom of the 'function.php' file and add the following code:

 function add_favicon() {
    echo '<link rel="icon" href="' . esc_url(favicon_url) . '" type="image/x-icon">';
}
add_action('wp_head', 'add_favicon');

Replace favicon_url with the URL of your uploaded favicon and click 'Update File' to save your changes.

Note: in PHP code type should be written according to your image type , like if your image is png form then 'x-icon' should be changed by 'png'. Similarly if the image is in jpeg form then 'x-icon' should be changed by 'jpeg' .

Conclusion

Setting up favicon on your site will help enhancing your site's visually. By following any of the three approaches you can add favicon to your site. All three method have different approach, allowing you to choose the one that best suits you.

24mittapl2l

Follow

Improve

Article Tags :

• Web Technologies
• Wordpress