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.
September 5th, 2008 at 12:20 pm
Many favicon generators do not work for gif this Favicon Generator worked.
September 19th, 2008 at 5:28 pm
Sports Betting, online betting odds, sports betting line - betuk, Reach out to bet uk for all sports betting, online betting. Start live Sports Betting on your favourites.
September 28th, 2008 at 2:10 pm
I am Very thank full the owner of this blog. Becouse of this blog is very imformative for me.. And I ask u some thiing You make more this type blog where we can get more knowledge. and any one tell me how can I find this type blog. http://www.penisenlargementz.com
October 7th, 2008 at 8:17 pm
Good and solid favicon design. Finally someone has put something up worth looking at. Thank you for sharing. Nice post.
October 11th, 2008 at 1:38 am
Natural herbal penis enlargement solutions, treatments, medicines, supplements, reviews and methods to get maximum and average penis size in length and girth in weeks by Best penis enlargement pills, patches, devices, extenders, pumps and exercises at http://www.penissizeenlargement.net
October 25th, 2008 at 4:35 pm
I am glad to post my views and points in this blog, but I must say that webmaster of this blog has done a very great job to make his blog more informative and more discussable but unfortunately everything is same here that more than 80% in this and other blogs post their comments for making spam!!!, so i will really all this spam links to google band tool, because webmaster makes blogs for making discuss and for sloving each other problems.
thanks
November 10th, 2008 at 8:17 pm
iam glad to say that this site having more information who wants to know from scratch abbout wordpress and all