How to Add A Favicon to Your WordPress Blog

The favicon is the 16 x 16 pixels small icon what we generally see in our browser tabs. It’s the element that styles the tabs, establishes credibility and composes brand awareness as well. It is possible to add favicon to any web page, but the methods would vary. Do you know how to add a wordpress favicon? Don’t worry, let me explain the processes and its importance.

Websites are intended to add value to the visitors. But we need them to build trust to the brand. So it will be possible by only focusing on branding. A favicon is the foremost thing about branding to establish own specific logo. We generally use a part of our logo or a separate icon for that. So the visitors could acknowledge a website just seeing the tab. That’s why I think it’s really necessary in order to take your brand to top.

At First: Create A Stunning Favicon For Your Website

So first of all, you will need the favicon file. However, you may ask how to create it. Don’t feel depressed because it is nothing more than an image. It has the specific size of 16 x 16 pixels.

There are four formats supported by most of the browsers. JPEG, PNG, GIF and ICO. Among these, ICO is the most preferred format for all the web browsers including Internet Explorer. But JPEG, PNG and GIF will only work on new updated browsers. You can easily use a photo editor to make your own. Just design your normal or animated icon and save in these formats. If you have brand icon, you can resize it for using in this purpose.

If you are looking to create online, you may use Favicon.cc. Here you can build your custom icon and save to your computer. If you have got your file, we can advance in the adding process. Make sure you have uploaded the files to the root directory.

Choose Any of These 3 Methods to Add WordPress Favicon

Favicon WordPress

#1 Adding Through Header.php

If you have decided to use ICO, you should add this code to your theme header.php before closing </head>:

<link rel="shortcut icon" type="image/x-icon" href="http://www.yoursite.com/favicon.ico" />

Make sure you have replaced the url with your favicon.ico url quoted in href attribute. If you have uploaded the file to the root folder, the url would be http://www.yoursite.com/favicon.ico.

If you have decided to use JPEG or PNG, these codes would work on header.php before </head>:

<link rel="icon" type="image/png" href="http://www.yoursite.com/favicon.jpg" />

OR,

<link rel="icon" type="image/png" href="http://www.yoursite.com/favicon.png" />

Again, don’t forget to replace with your file url.

If you have decided to use an animated favicon, you should use these two lines in header.php before </head>:

<link rel="shortcut icon" href="http://www.yoursite.com/favicon.ico" />
<link rel="icon" type="image/gif" href="http://www.yoursite.com/favicon.gif" />

Here you will need two lines, one for ico and another for gif. Because many of the browsers don’t support gif. So they would use ico instead. And the supported browsers will use animated gif as specified. Once again, don’t forget to replace with your own file urls.

#2 Adding Through Functions.php

The previous method was adding with header.php file. But it could be handled just adding a function. Copy the code as specified and place on your theme functions.php:

function my_favicon() {
echo '<link rel="shortcut icon" type="image/x-icon" href="http://www.yoursite.com/favicon.ico" />';
}
add_action('wp_head', 'my_favicon');

You have to replace with your file url after the href attribute. You can use other formats as well. Just copy any of the above code and replace the whole link tag. This code will automatically add the favicon to your wordpress header. So you don’t need to do anything else.

#3 Adding Through Plugins

If you think editing codes would be tough for you, you can easily use some plugins. All you will need to install a plugin from your wordpress admin. Then you will able to upload and add the favicon from the settings. There are a lot of plugins that could do that, but I would recommend these to you:

All In One Favicon: It’s the top plugin to add a favicon. It supports almost all types of the four formats. So you can easily upload the file through the plugin and enjoy. You can also add Apple touch icons through it. Depending on user rating, it has the highest value. So you can use it without any doubt.

Favicon Rotator: This plugin would be able to do the same to you. But it has a few extra features. Using this plugin, you can set icons for Android, Apple, iPod, iPad and so on. Using this plugin, you can meet up all of your needs about the icons.

Caution: Before starting to edit code, you should take a backup of your theme file. Because any mistake could break your whole site. So stay safe with a backup. Then work without any pressure.

Have You Succeeded to Add Favicon to Your Website?

Through this post, I have tried to cover up the three possible ways to add favicon. Have you tested it after implementing? Just reload your site and see the differences in your tab. If you could see your specific image, you are done. But if you don’t see anything, please make sure you have added the codes properly.

I believe, you will be able to make it through any of these methods. So I think, I have done to explain about how to add wordpress favicon.

It's only fair to share...Share on Facebook70Tweet about this on Twitter8Share on Google+10Pin on Pinterest2Share on LinkedIn1