How to Add a Favicon to your WordPress Website

A Favicon is the small image that is displayed next to the URL in your browser.  Favicons do not help in search engine rankings but help in establishing an identity for your site.  If you have a unique favicon, users can identify your site with your favicon.  This Wordpress Tutorial will help you add a favicon to your Wordpress website.

To add a Favicon to your blog you must first have a favicon image.  Favicon images must be 16 px x16 px.  You can custom make your own favicon or you can use an online Favicon Generator.  I used the site – favicon.cc where you can upload an image to convert into a favicon or select a favicon to download.  Download the favicon with a .ico extension.

To easily add a Favicon to your Wordpress site, I recommend to use a Free WordPress plugin called – All in One Favicon.  That way even if you change your Wordpress Theme, your favicon will still be safely stored and will not have to edit the header.php file again to add the favicon code.    Below are steps to Add a Favicon to your WordPress website with this free WordPress plugin.

Overview of steps to Add Favicon to WordPress Blog

1. Download/Generate Favicon
2. Install WordPress Plugin – All in One Favicon
3. Activate WordPress Plugin – All in One Favicon
4. Go to ‘All in One Favicon’ WordPress Plugin Settings
5. Upload Frontend Favicon Image
6. Upload Backend Favicon Image
7. See Favicon Change in URL

Steps:

1.  Download/Generate Favicon

You can download or generate your own Favicon.  I used the site favicon.cc and used the Favicon Generator.

2.  Install WordPress Plugin – All in One Favicon

All in One Favicon is a free WordPress Plugin that you can download from the WordPress Plugin Directory.

• Login to your WordPress Administrator Backend
• Click on ‘Plugins’, ‘Add New’
• Search for Plugin ‘All in One Favicon’
• Click on ‘Install Now‘

3.  Activate WordPress Plugin – All in One Favicon

After you install the WordPress plugin, you must activate it.

• Click on ‘Plugins’, ‘Installed Plugins’
• Search for ‘All in one Favicon’
• Click on ‘Activate‘

4.  Go to ‘All in One Favicon’ WordPress Plugin Settings

After you activate the Favicon plugin, now you can upload your favicon you generated from step 1.  In this favicon free plugin, you can upload favicon images that have Extensions – ICO, GIF, PNG.

• Click on ‘Settings’
• Click on ‘All in one Favicon‘

5.  Upload Frontend Favicon Image

The good thing about this Favicon Plugin is that you can upload a favicon with the extension of ICO, GIF and PNG.  You can also upload favicon images from your Apple Touch Icon.  I have an ICO image, so I will use the ICO Frontend upload button.

• I have an ICO image, so I will use the ICO frontend upload button
• Click on ‘Upload‘
• Select ICO file from computer
• It will initially show ‘fakepath’ but later it will change to a real image url
• Click on ‘Save Changes’

6.  Upload Backend Favicon Image

You can also change the Favicon of your Administrator Backend site URL.  The options are the same as the frontend.  You can choose a different favicon for your frontend and backend.

• In Backend Settings
• I’m going to use the same favicon used for my frontend, so I will use the ICO Backend
• Click on ‘Upload‘
• Select Favicon from your computer
• Click on ‘Save Changes‘

7.  See Favicon Change in URL

Now you can refresh your site and see the favicon changed to the image you chose in step 1 and uploaded in step 5 and 6.

The change for me was pretty fast.  I was able to see the new favicon almost immediately.

Hope that helps you.  Please leave a comment if you have any questions.

Thanks,

Elaine