Tutorial on Applying Favicon to Your Blog on Blogger or WordPress

Favicon is a small image / logo which appears in browser tab which gives your website, a different place so that it can be recognized from crowd. For Blogger, it has default B or there is W for WordPress blogs. But here is how you can change and add your own Favicon.

Favicon (short for favorites icon – the chosen icon), also known as the website icon, shortcut, URL icon, or bookmark icon. Nothing but a square icon in 16 × 16, 32 × 32 or 64 × 64 pixels, which is tied to a specific Web site or Web page. Web designer (or a simple web-master, who knows what tools to use) can create such an icon (Favicon) and install it on your website or blog.

After this installation, most graphical browsers will use this icon. Browsers that support icons Favicon, often display an icon in the browser page (near the address bar), next to the title page – if the site has been saved to your bookmarks.

How to install Favicon on Blogger / Blogspot Blogs

Blogger has an inbuilt feature of adding a favicon to blog added recently. Enter the Blogger Dashboard and go to Design where you will find Favicon option.

Browse and upload any image file (may be JPG, PNG, GIF) and Save it. You’re done! Only limitation is the image should be square, I mean the height and width of image should be exactly same, For ex: 150×150 px.

How to Create Favicon manually

Open any Image Editor and Select any image you want to make it as Favicon of your site. Else, you can also create NEW in the editor (generally by just writing out first alphabet of site name- “B” in case of Blogsolute)

Resize the image to 16x16px or 32×32 px in size. Save the image from Editor in ICO format. Image editors like Photoshop, GIMP or SnagIt supports exporting file in ICO format.

If you feel above steps difficult, use GenFavicon (online web service) to create your own Favicon from any Image.

How to add Favicon in WordPress Blog

WordPress as of now doesn’t have such inbuilt feature of adding Favicon but the Favicon created in above step could be installed easily.

Upload the ICO file generated in above step to the Root Folder of your website. And now go to Theme Editor and Edit Header.php file.

Add these lines in HEAD section.

<link rel="shortcut icon" href=/favicon.ico" type="image/x-icon" />

We have successfully added Favicon to our blog.