How to add a Favicon in WordPress Blog

Wouldn’t it be great to have a favicon added to your WordPress blog? It not just looks cool it also builds a brand image. It also makes your blog visitors recognize your website as soon as they see your favicon. It is also identifiable when you bookmark it in your browser.


So said, how would you get the icon on the address box? It’s very simple.

Getting Started:

To create a favicon, you first need an image. Do you have a logo for your website? That’s what should go as the favicon. If you have not created a logo, search for a small clear image which would fit your website category .

Favicon in Browser favorites

Creating Favicon.ico file
  1. Goto Favicon generator
  2. Upload the image from your computer using the “Browse” button in the Favicon generator.
  3. If you wish to get an animated text gif icon, you can provide the text in “scrolling text”(Optional)
  4. Click “Create Favicon”

You would get a preview of favicon.ico. On the right side, you would find the option to download favicon. Click on “Get It Now!”.Save the zip file to your computer. The zip file would contain four files:

  1. favicon.ico
  2. preview_16x16.png
  3. preview_32x32.png
  4. animated_favicon.gif

The favicon.ico is what you need. Extract it to your computer and upload the file to your root folder. For example, if your website is then the favicon.ico should be placed as Usually, this would be the “httpdocs” or “public_html” or the “www” folder.

Adding the favicon.ico file to your WordPress Blog:

Now that you have uploaded it, you would have to edit your header.php in your wordpress blog.

  1. Log into your WordPress admin section, choose “Presentation” and select “Theme Editor”
  2. Choose “header.php” from the right side links and add the below line inside the head section.

    <link rel=”shortcut icon” href=”favicon.ico”>
    <link rel=”icon” href=”favicon.ico”>

  3. Save the header.php file

Now, refresh your website by pressing Ctrl+F5 keys. You should be able to see the favicon next to your website URL.If you are still unable to see the favicon, close your website and delete temporary internet files. Try opening the website again.