Subscribe to RSS
Subscribe by email
Have you noticed some changes with my blog site? I finally got some time today to work a little bit on a logo and a favicon for this blog.
Every website should have a favicon to make it instantly recognizable. Favicons, tiny icons, are displayed in the browser’s address bar, next to the website’s title in bookmarks as well as in a browser’s tab. So think of a Favicon as a mini-advertisement for your site, thus you have to pay an extra attention to make your favicon unique and attractive. It definitely is an essential part of your company’s or website’s branding.
Favicon:
Keep in mind, that it’s not necessary for your favicon to be a miniature copy of your logo. Not all logos look good when resized down to 16×16 pixels. However it must fit the design of your logo and have a visual connection with it: pick up the logo or website’s colours, initials or shapes.
How to create a Favicon?
First of all, remember that the final size of a favicon should be 16×16 pixels and saved with .ICO extension.
You can use pretty much any graphics software, including Adobe Photoshop.
Plugin Download
You need to download a special plugin to export your Photoshop artwork to the .ICO file format. Windows Icon (ICO) file format Photoshop Plugin can be downloaded from Telegraphics. Follow the instructions in the Plugin’s README file. You’ll need to copy the plugin to your Photoshop’s plugin folder.
Design Process
If you already have a logo, try resizing it down to 16×16 pixels and see how it looks. If it doesn’t look good, then start with a new design. It is a bit tricky to design an icon on a 16×16 pixels canvas, so start your project by opening a New File set to 64×64 pixels, RGB, 72dpi.
Once you’re done with the artwork, go to Image -> Image Size and enter 16×16. Make sure you have “Resample Image” checked and choose “Bicubic Sharper” - this way the image would be resized proportionally without a blur effect. If you’re unhappy with the result, go back to the big size and tweak the artwork.
Saving your Favicon
When the 16×16 artwork is ready to be saved, go to File -> Save as and choose Windows Icon (ICO) from the pulldown menu in the Format section. (Note: this extension would be available only if you’ve previously installed ICO Plugin). You can choose any name for your file, but the extension must be .ico, e.g. myfavicon.ico.
Final Steps
Connect to your site’s server and upload the favicon file to the root directory of your website. If you saved your icon as “favicon.ico” and stored in a root folder, some browsers would automatically pick it up. But to be safe, it’s best to add this code to the HEAD section of your HTML pages:
<link rel="shortcut icon" href="/favicon.ico" />
For your blog, go to Presentation->Themes->Theme Editor, click on “header.php” and add the code above anywhere before </head> tag.
That’s it. Now to test it, go to your browser and refresh your website. You should see your favicon in the URL bar.
An Alternative way of creating Favicons
If you already have a logo and want to create the favicon quickly and without a hassle of downloading and installing the Plugin, designing in Photoshop, then you can create it online here. Just upload your image and it’ll automatically create a ready to use favicon that you can download and upload to your website’s server. You can even create animated favicons there.
Favicon Inspiration
Here is a list of sites with Favicon galleries where you can get some inspiration for your favicon’s design:
- Smashing Magazine features 50 Remarkable Favicons
- DeltaTangoBravo showcases an amazing collection of Favicons
- MpP Favicon Gallery has not only a big collection of favicons but also an informative description for each of them (mouse over each icon to read the details about it)
Hope you found this tutorial useful. Let me know if you have any questions about it.
Great post.The explanation is very nice.I will be making one for me
1
Glad you liked it, Ashish. Have fun designing your favicon :-)
2
Good Post :)
3
Thanks, Shankar. Btw, is it possible to add a favicon to a blogspot site?
4
I think you can do it with customised templates, but i’m still not sure!
5
mines not working:(
please help???
6
I just visited your site, guy, and I saw a favicon in the URL. What exactly is not working? Can you give me more details, please?
7
hi
thanks very much for taking the time to check, but yes stupid me it does seem to be working now, i think it may have taken a few minutes to click in or somehting, but yeh it does work now so im really sorry to have bothered you lol, but i appreciate it anyways!!
8
oh, you’re welcome. I’m glad it worked out in the end.
9
Great info, I did not know about the plugin.
It is possible to create a favicon also on Blogger blogs:
1. Open a free account in Google Page Creator and upload your favicon there
2. In your Blogger account, go to Template, Edit html and insert the following code immediately after the head tag:
<link href='http://youraccount.googlepages.com/favicon.ico' rel='shortcut icon'/><link href='http://youraccount.googlepages.com/favicon.ico' rel='icon'/>
3. Save and view blog.
10
Simonne, Thanks so much for the instructions on favicons for Blogger blogs!
11
You are welcome. I did not try that myself, but I know somebody who did and said it works.
Do you know if there is any trick to make favicons show also on IE 6?
12
Looks like on IE favicons will show up if you add that site to your Favourites. This site gives more tips on how to get favicon recognized by IE: http://www.rw-designer.com/favicon
13
The subtle emerald greens of your Favicon lend themselves to an animated Favicon, which will activate on Firefox and Netscape, though not on Internet Explorer, which requires a second static file (or it will refuse to show your effort). So for those of a subtle artistic bent who want a little more edge for their sites, there is a tutorial here http://www.cathetel.com/favicon.htm . It has the code that you place in your Head to furnish one graphic to IE and the animated graphic to all others. Cheers.
14
Thanks, Healing the Body. I liked your favicon, but for my site prefer to stick with the static one.
15