What’s a favicon?
A favicon (favorites icon) is an icon associated with a blog/site. Most popular browsers display favicons as 16×16 pixel icons next to the URL in the address bar, next to the title in tabs, and next to the title as well in bookmarks.
In conjunction with the new year, I have added a favicon to my site. If you do not know what a favicon is; it is the little picture beside the URL of this blog. Here’s a screen-shot of SourceNcode.com’s favicon (in red circle):
Some say that having a favicon is like putting on cosmetics. This is only partly true. More importantly, having a favicon on your blog allows the visitors to quickly identify your site in their Favorite folder among the other bookmarked site. Take a look at the example below:
If you do not have a favicon currently and you are interested to, here’s how to can do it.
- First, you will need an image. Any image will do provided that it is royalty-free and not copyrighted (meaning, you cannot use Coca-Cola’s corporate logo as you favicon).
- Go to Chami.com’s Favicon Tool page.
- Upload you image by clicking the “Browse” button and click “Generate Favicon”
- After Chami’s tool completed the generation, you will be presented with the link to download you favicon. Click the download link and save the favicon on your computer. (You can also test your favicon by clicking on the “Test in Browser”
- Unzip the contents you have just downloaded and upload the favicon to your webhost (”public_html” folder, for most of you).
- You will now need to edit your header.php of your wordpress blog. Depending on the theme you use, locate the header.php folder and edit the file by adding the following code:
- Save your header.php file
- Hard refresh your browser by pressing the Ctrl+F5 keys. You should now be able to see your favicon next to your URL.
How to create a favicon?
First, create a 16×16 pixel icon using your graphics editor of choice. Then, you could either save it as favicon.ico or save it in another format and use an online favicon generator to do the conversion to .ico.
Links that might be useful:
- How to Create a Favicon in Photoshop
- Favicon Converter | Favicon Converter 2 | Favicon Converter 3
- Favicon Maker | Favicon Maker 2 | Favicon Maker 3
- 50 Remarkable Favicons by Smashing Magazine
- Favourite Favicons by Daniel Burka
- The Favicon Gallery
- Favicons of the Top WordPress-Related Blogs
How to add it to your blog?
Once you have your favicon ready, place it in the root directory. Most popular browsers will automatically detect and use the favicon.
For better results, add the following line to the header.php file of your theme, between the <head> and </head> tags:
<link rel=”shortcut icon” href=”wp-content/themes/current_theme/favicon.ico” />
If you want to use a GIF or PNG instead, use this format instead (just remember that it won’t work in IE):
<link rel=”icon” href=”/favicon.png” type=”image/png”> or
<link rel=”icon” href=”/favicon.gif” type=”image/gif”>
*change ‘current_theme’ to the name of the theme that you are currently using
You’ve just added a Favicon to your blog!