How to add favicon to your website?
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.
January 29th, 2007 at 12:37 pm
[...] favicon, or favorite icon appears on every website nowadays, to create a nice and transparent background favicon is not a difficult task. [...]
January 31st, 2007 at 5:27 pm
There’s a handy program called PNG2ICO that converts PNG files to favicon format. Matt Mullenweg blogged about it awhile back:
http://photomatt.net/2003/11/13/how-to-create-a-favicon/
February 15th, 2007 at 3:34 am
[...] appears next to the URL in the address part of your web browser. Following instructions I found here, it was pretty easy. I downloaded a little plug-in (ICOFormat.8BI) for Photoshop to all me to [...]
April 15th, 2007 at 12:19 am
Gimp can alone create a favicon and save it as well in .ico format but the icon created by it is blurr (although 16×16 image will be blurr but still), what one can do is make a favicon of size say 50 x 50 using gimp, save it as .gif then go to this site :
tools.dynamicdrive.com/favicon/
and upload it there and it gives really clear favicon out of uploaded image. Result is much better than gimp.
April 26th, 2007 at 12:57 am
Thank You
April 29th, 2007 at 5:29 am
my icon won’t show up. I put it right below tag in my theme’s header.php. I don’t know whats wrong, can you help?
May 9th, 2007 at 4:57 pm
thanks thats a cool tutorial
February 14th, 2008 at 9:22 pm
If interested, there’s a free Photoshop plugin which allows you to save as .ico - http://www.telegraphics.com.au/sw/#icoformat
February 28th, 2008 at 11:53 pm
Creating at a larger size and then shrinking down to 16×16 is easier, but the best way to get an icon optimized for 16×16, with 3D effects, shadowing, anti-aliasing, etc., is to work on a pixel-by-pixel basis and use the tactics described in the Gimp Icon tutorial, which is readily available at the Gimp site.
March 13th, 2008 at 9:41 pm
Buy the machine here 2002 mazda tribute
June 19th, 2008 at 5:53 am
Thanks so much!! Yeah for you! I have been trying to make another tutorial work for about 45 minutes and couldn’t get it! Just when I thought I was too DUMB I found this tute! THANKS AGAIN!!
June 23rd, 2008 at 10:10 pm
Finally some good advice on the diffirence between good and bad favicon design. We also give some advice and expand with advice and method on making an animated favicon. Animated icons play on Netscape and Firefox, but you need a second static design for Internet Explorer, otherwise IE will just delete your favicon, and they are more heavily travelled than the other browsers, for the time being anyway. You also need the correct code in your html Head Section to distinguish between IE and other browsers. http://www.cathetel.com/favicon.htm .
July 11th, 2008 at 2:18 pm
Thank You…
July 12th, 2008 at 5:00 am
thank you
July 12th, 2008 at 5:01 am
thank you
July 12th, 2008 at 5:01 am
thank you
August 2nd, 2008 at 6:33 am
great!
August 7th, 2008 at 3:16 pm
Best places to play, best strategies to win. User ratings & reviews of top online casinos & pokers with highest payouts & biggest bonuses.