How to add a favicon to your Blog

A favicon is a tiny image with a .ico extension and sized to 16 pixels by 16 pixels. The favicon is displayed alongside the URL in the web address bar of your browser.

Creating the image

The first thing you need to do is to create the image that you want to use as favicon. Don’t make your image too complex because small detail tend to get lost when resized to a tiny 16 by 16 pixels.

If you want to easily draw your own favicon, there is a great online tool called Favicon.cc. It lets you draw your own icon while the Favicon in the browser updates in real time to reflect your changes. If you use this tool you can skip the next step as the tool will handle the conversion to .ico as well.

Converting your favicon to .ico format

If you draw your image with Photoshop or any other editor, you will need to convert your file to .ico format. Modern web browsers will generally let you get away with using a png, gif or even a jpeg for your favicon, but to be compatible with older version of internet explorer and Firefox, you’ll have to convert the image to .ico format.

To convert your image, you can also use the Favicon.cc website, only this time, click the “Import Image” button on the left side of the page and upload your image. The tool will convert your image to .ico format and let you download the final product.

Add the favicon to your site

Then make sure you store/save your favicon icon inside your WordPress Theme images folder. For example /patagonia/images/favicon.ico.

Then, assuming you save your favicon.ico file in your theme directory, add the following anywhere between the tags.

1

<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico">

Just copy that line and paste it in the header.php. In patagonia theme, you can paste this line right after the <link rel=”pingback”…> line.