How to Add a Favicon to your WordPress Website

by Elaine on March 5, 2013

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.

add favicon to wordpress site install free wordpress plugin 1 How to Add a Favicon to your Wordpress Website
Add Favicon to WordPress Blog – All in One Favicon Plugin
  • 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.

add favicon to wordpress site activate free wordpress plugin 2 How to Add a Favicon to your Wordpress Website
Activate All in One Favicon WordPress Plugin
  • 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.

add favicon to wordpress site go to plugin settings 3 How to Add a Favicon to your Wordpress Website
All in one Favicon Plugin Settings
  • 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.

add favicon to wordpress site frontend upload favicon 4 How to Add a Favicon to your Wordpress Website
Frontend Favicon Image – All in one favicon WordPress plugin
  • 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.

add favicon to wordpress site backend upload favicon 5 How to Add a Favicon to your Wordpress Website
Backend Favicon – All in one Favicon WordPress Plugin
  • 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.

add favicon to wordpress site see favicon wordpress blog 6 How to Add a Favicon to your Wordpress Website
Favicon in URL – All in one Favicon WordPress Plugin

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

 How to Add a Favicon to your Wordpress Website

Elaine

Elaine is the founder of CmsMind, an online blog providing Joomla and WordPress tutorials. Elaine lives in Toronto and when she is not online, she is either Marathon and Triathlon training or travelling and racing somewhere in the world. Find her also at: Save Money, Premium Themes and Templates, and at Webhosting Tips.

More Posts - Website

Leave a Comment

Captcha Captcha Reload

Older Post:

Newer Post: