Have you noticed that some blogs sport a tiny icon next to their URL, in your browser tab and bookmark lists and wondered how you can do that for your blog? That small image is called a ‘favicon’ and it is relatively simple to do once you get going on the right track.
Many blog themes allow uploads of GIF or PNG files to use as favicon however, it is important to note that while this is the simplest, shortest route to get results, these will not appear to your IE users. Internet Explorer only recognizes .ICO files as favicons. If you want IE to recognize your favicon, you will need to create a .ICO image file.
The first step of course, is to choose your image. It should be simple enough to be clearly discernible at 16 x 16 pixels (very small scale). If you have a complicated logo for instance that won’t translate well, you might consider using one of your initials or a related symbol that represents your blog.
If you do not have an image in mind that will work and want to create one in Photoshop, a favicon plug-in is that you can download from Telegraphics that will allow you to save your file as a .ICO file. Once the plug-in is installed, and you have created your new icon, be sure to remember to “save as” “favicon” and select the Windows .ICO file format. Your new favicon is now created and you are ready to upload it to your server.
If you aren’t using Photoshop, you can use any graphic program to serve as a starting point and can use HTML-kit.com’s online favicon generator to convert that image to a .ico file. If using this service, the easiest way to create your image is to create the image at 32 x 32 pixels. This size will work on the site.
Now that you have your image, you simply need to upload it to your site or blog.
Favicons are not stored in your images folder with all of your other images. You’ll want to be sure that you upload your new .ICO file into the your public_html folder (at the same level as your home page, the index.html file) as a loose file.
Favicons are special in one final way. Some browsers look for links to the favicon. If you want to ensure that all browsers read your favicon on every page of your site you will need to include a line of code in the html head section of your pages;
<link rel=”Shortcut Icon” href=”/favicon.ico”>
<link rel=”icon” href=”/favicon.ico” type=”image/x-icon”> (some say this is more correct)
Refresh your page and VOILA! you should see your happy favicon in your URL and browser tab. You may need to refresh your page several times for it to show up.