Well, this falls more in the category of nerdy tutorial than crafty tutorial, but I thought it might be helpful to some people. I have been wondering for a while how to get a little personalized icon for my website that would show up in the address bar and bookmarks, but I didn’t have time to figure it out. The other day I put my googling skills to work, and you may have noticed (or not, I don’t really blame you if you didn’t) that this cute thimble now appears next to my website address (you may have to clear out your cache for it to show up the first time).
If you have a website and want a Favicon (that’s what they’re called apparently, FAVorite ICON) like this , I found these instructions on this site.
First, make an image that is 16 pixels by 16 pixels exactly. Then save it as or rename it favicon.ico. Then upload it to your server in the same directory as your main index page. Last step, in the code of your index page, somewhere between the <head> and </head> tags, insert the line <link REL=”SHORTCUT ICON” HREF=”http://www.yourdomain.com/favicon.ico”>, and remember to put your own domain name in.
That’s all I know about that, so if you are having troubles with it, you can try to ask me for help, but I probably won’t know the answer. I just thought I would pass along the information as a public service, since this little thing made me feel so happy when I figured it out!



Posts
Oh thank you thank you! I’ve been wondering what the heck to call those things. Favicon – never would have figured that out.
Thanks for sharing. I enjoy your posts.
3/11/2005 @ 8:20 am
Thanks for that tutorial! I’ve also been wondering how people get little cutie icons to show up, and now I know! I’ll have to come up with an icon idea now…
3/11/2005 @ 10:15 am
Yay! Cute.
I need to make a new one for my site but I can’t decide what to do. I still have a thimble kind of like yours that I used for a while but now it doesn’t match the rest of the look…
In the Unsolicited Advice category: Not all browsers handle favicons well so for some people they may not show up, or they might take a long time to show up.
3/11/2005 @ 10:51 am
hooray!!!thank you! I will put this info to good use-you are the best!
3/11/2005 @ 12:19 pm
Awesome. I now have a little pair of scissors by mine. Hint to anyone having problems: I had to clear my cache before it would show up. I also found this nifty favicon generator.
3/20/2005 @ 7:35 pm
I found this post through google long ago, and it was your website that launched me into the wonderful world of craft blogs – first reading yours and everyone else’s (starting with your links, then their links…) I had no idea blogs could be so fun
and then finally starting my own. I’m having a lot of fun with all of it, and I do have my own favicon too, all thanks in large part to you.
thanks
6/10/2005 @ 9:24 pm
I did put an icon on my website but it doesn’t want to stay there. It appears for a short time and then dissapears. Maybe its my Firefox. Can you check it out ? http://www.promovareweb.ro
Thanks,
George
8/14/2005 @ 11:44 am
I had a similar problam as George. It would appear right away, but then disappear after I’d reload or tab away. Turns out that I had just saved the image and then renamed it as a .ico file. What I had to do to fix it was download a plugin for photoshop (works for other image programs too) that allowed me to actually ’save as’ .ico. Worked right away! (BTW, you can’t save as .ico when your file is in CMYK color)
3/14/2006 @ 8:14 pm
ahmm.. just a note; i think it doesn’t need to be named exactly as favicon.ico, it can be named whatever wanted by the user, just leave the file estension as “.ico”
7/13/2006 @ 4:09 am
Thimble? What thimble? All I see in your text is a red X – and the IE icon in the address line of the browser.
1/2/2007 @ 8:02 am
i am really happy to know this now.
long time i am asking how this will be done and when i deciede to know and i search about it i found your help is threr thanks alot
3/5/2007 @ 8:08 am
Hey, I tried it and is not showing to me. Maybe you can tell me where is my mistake? see http://www.clearstats.eu
4/29/2007 @ 9:36 pm
Back with news : It works well with Firefox but not with Internet explorer 7. Any updates about that? aybe some settings wrong with my IE ? http://www.clearstats.eu
4/29/2007 @ 9:43 pm
Thanks man!! Worked like a charm!!
6/1/2007 @ 4:32 am
I just wanted to say thanks so much for taking the time to write these instructions out for everyone. I love my new favicon.
Also Maitreya, that link for “nifty favicon generator” made it SOOO easy. Thanks!
~Renee
6/4/2007 @ 1:25 pm
Hello,
Something to make these icons simpler:
It does not need to be an .ico. Any image will do.
PNG works fine. If it’s larger than 16×16 px, at least Firefox will scale it down; any size of an image works.
The tutorial on the other page talks about reducing the palette to 16 colours; this is not necessary.
You can also use a link without yelling, and relative paths will work:
I don’t have explorer, so I don’t know if it will accept any image. I would imagine so.
9/4/2007 @ 6:20 pm
You’re a lifesaver!!!
10/9/2007 @ 2:54 pm
so I was super excited to find this…and my favicon works on my mac, but does not appear on my pc! anyone know why? I would love you forever if you could crack the case!
email me at: boggs.lisa@gmail.com
lisa
1/31/2008 @ 4:39 pm
Great! that what I’m looking for!!
5/4/2008 @ 1:42 pm
hi, this is a great tutorial.. but does it work with co.uk ?? as it doesnt seem work on my site ..
hope you can help me
many thanks
m
5/23/2008 @ 11:55 am
How do you get a comments/forum thing on your website???? I would really like to know!
5/26/2008 @ 3:26 pm
I don’t know why i’m here on this site, but i’ll answer some questions:
1. The favicon that you are placing on your website does not have to have a .ico extension. It can have any image extension such as .jpg .png .gif etc.
2. The domain name such as .co.uk does not affect the favicon.
3. If it’s not working, it’s not the websites fault. It’s yours…
Make sure this code is in the header of your web page:
(The http://yoursitedotcom.here/favicon.ico is just an example, if you don’t have a clue what the location of your favicon is, simply
upload the image file for the favicon to your root directory (in public_html) )
4. It won’t show up in your PC if you are linking it to a http:// protocol! You must adjust the location of the href to C://myfolder/favicon.ico (if your on windows, and that is where your image is)
5/27/2008 @ 3:20 am
oops forgot to post the code
5/27/2008 @ 3:20 am
Very helpful! I have been looking all over on how to do this. I figured it was simple but it was just an internet mystery.
7/1/2008 @ 10:50 am
Hi you helped me a lot, although my icon only shows up in explorer, not firefox. Wonder if anyone has ideas for this? I inserted to root folder (.ico)
7/3/2008 @ 3:41 am
ooop… my website is http://www.watercoloursworld.com
7/3/2008 @ 3:42 am
thanks for sharing that tutorial!
3/14/2009 @ 9:08 pm
To get Website icons. Use Internet Explorer get tool bars for google/yahoo etc , bookmark your website wait until icons appear on bookmarks, click on the bookmark and open wait a few secs to get going then goto file top LHS click send then shortcut to desktop. A long way round but it worked for me.
9/8/2009 @ 3:42 am
Wow, this site is proper good
i really like the blogs and advice
9/21/2009 @ 1:55 pm
THANK-YOU!!!!! It’s those little details that I love, but I just couldn’t figure it out!
Cool site btw.
All the best!
Crissy
10/29/2009 @ 11:06 am
Thanks for the info…worked first time. Now I have my own favorite icon.
Perfect article… no filler. Just what I needed.
11/3/2009 @ 1:55 pm
Thanks a bunch. It worked in my web! But actually I create a GIF file instead an ICO file.
And damn this post was posted March 10th, 2005. I’m very very late.
11/5/2009 @ 1:58 am
thankx
12/15/2009 @ 8:43 am
Thanks a lot spent far to much time looking through of my books trying to find out how to do this.I made the icon with a bit of freeweare called Ico FX and saved the icon file with 3 formats – XP colors 16×16 – 256 colors 16×16 – 16 colours 16×16 works a treat with fire fox and google crome but is not working with my enternet explorer but have noticed the the Favicon on this site has the same problem maby i just need a newer version of enternet explorer. thanks again thow thats another little tweek on My website sorted out.
12/30/2009 @ 7:19 pm
well my Favicon is now working with enternet explorer as well as fire fox i had been adding code to force the pages on my site to refresh evry time you go on them it might be a coincidence but my Favicon started working around the same time i had clicked on refresh when i was trying to get my Favicon working so i am unsure if this refresh code helped or not but this code well force your web page to refresh all the same
1/1/2010 @ 9:32 pm
1/1/2010 @ 9:34 pm
META HTTP-EQUIV=”PRAGMA” CONTENT=”NO-CACHE”
1/1/2010 @ 9:35 pm
Use Internet Explorer get tool bars for google/yahoo etc , bookmark your website wait until icons appear on bookmarks, click on the bookmark and open wait a few secs to get going then goto file top LHS click send then shortcut to desktop
1/14/2010 @ 5:16 am
Not having any luck! Tried http:// and c://myfolder links to no avail.
My site is http://www.teacherwaves.com. Can anyone help?
4/19/2010 @ 7:25 am
how to create an icon of my website?
4/29/2010 @ 5:50 pm