hat is favorite icon (favicon)? Did you discover that most of the website have favicon? Observe your browser where you enter url address, you can see a tiny icon with size 16×16. If you are using firefox, when you drag the icon over your bookmark toolbar, the icon will tag along too, how cool is that?
Wordpress by Examples have favicon too, usually favicon is a icon file with 16×16 name favicon.ico under parent directory of the web. But nowadays browser seems to support any size of favicon. You can find our favicon.ico at HERE in size 32×32 pixels.
Good and Bad favicon design
IMHO, a good favicon shouldn’t have any background color, if your icon is not in square shape like del.icio.us or LBE.
Examples of non-transparent favicon, http://wordpress.com/ , http://www.tuxmachines.org/
You will never discover that icon is not transparent until you drag over to your bookmark toolbar or observed at the tab.
Examples of transparent favicon, http://www.debian.org/ , http://www.shoutcast.com/ .
How nice!
How to create favicon ?
I should say, how to create a transparent favicon. Is it difficult to do that? Yes if do it with photoshop in windows or mac platform. Refers the steps for photoshop at here.
To do that in GIMP, it is pretty simple, make sure your image do not have any color background (delete the layer with white background by default), and save as favicon.ico and you are ready to upload to your server.
Add the code bellow into your <head> tag:
<link href='/favicon.ico' rel='icon'/>
<link href='/favicon.ico' rel='shortcut icon'/>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
It seems that you can locate your favicon.ico at other location even at other server, and favicon is not a “keyword” name, you can name your favicon to any favorite name.
WP tips: You can edit your header at Presentation > Theme Editor > Header.
No tags for this post.
