Adding a URL Icon (Favicon)

Have you noticed that some websites and blog sites have URL addresses that feature icons or logos? For instance, the default logo of Blogger/Blogspot URL is the capital B with orange background:





The logos featured by some URL addresses are called favicons or favorite icons. These logos are are intended to make URL addresses distinct from each other. Hence, when a URL address is bookmarked on a PC web browser, that particular URL address will easily be distinguished. You may even set your own picture as favicon for your URL address.

Favicons can be of different image type. A favicon could be PNG, GIF or ICO format. However, the standard favicon foramt is the ICO format. Other types of images may not appear in some browsers such as the Internet Explorer. On the other hand, Mozilla Firefox recognizes virtually all types of icon formats. As you notice, favicons are very small icons, measuring only about 16x16 pixels. Although icons with 32x32 pixels can also be used, the 16x16 pixel-resolution is the standard.

To customize or include a favicon in the URL address of your site, simply follow these steps:

Step1: Create a favicon or download a favicon using a favicon software/generator such as found on this site: Favicon.

Step2: Download the created favicon in the hard disk of your computer.

Step3: Save the favicon to the root directory of your site. Now you are done. Well, that is if you have full ownership of your site. However, if you are using Blogger/Blogspot services, proceed to step 4.

Step4: If you are using Blogger/Blogspot, it is virtually impossible to save the favicon in the root directory of this site. Hence, you need to use other sites to host the image. One of the best sites to use is the Google Pages. First create an account then upload the image. The favicon of this blog site, for instance, is hosted in my Google Pages site.

Step5: Copy the link location of the uploaded image and include it into the code specified in step7. Simply replace the red-higlighted part of the code in step7. For instance, the code that I have used for this blog site is this: <link href='http://homar.murillo.googlepages.com/favicon.png' rel='shortcut icon' type='image/png'/>

Step6: Open the edit HTML tab of your Blogger?blogspot template and locate the title section: <title><data:blog.pageTitle/></title>

Step7: Copy-paste this code: <link href='URL of your icon file' rel='shortcut icon' type='image/vnd.microsoft.icon'/> below the title section.

Step8: Save the template and view your blog.


NOTE: Favicons may not work in all types of web browsers such as Internet Explorer. Mozilla Firefox is the best browser to use if you want to view the favicons of URL addresses. If you use other image formats use the corresponding codes below.

GIF: <link href='URL of your icon file' rel='shortcut icon' type='image/gif'/>
PNG: <link href='URL of your icon file' rel='shortcut icon' type='image/png'/>