Stand Out From The Crowd With A Favicon
written by John Chow
Quite a few readers have requested I made a favicon for this blog so it can be found easier among their maze of the bookmarks. A favicon is a little image icon to help identify a site. If a site lacks a favicon.ico file, then the default icon of the web browser is used.
The majority of sites and blogs lacks a favicon.ico file and end up using the default. One way to make you blog stand out in the bookmarks is to make a custom icon. The process is actually quite simple. You make a small 16×16 pixel GIF or PNG image that is associated with your site and save it as favicon.ico file. Then you upload the file to your site’s root folder.
Normally, this would be enough to make the icon appear next to the browser address line. However, to make absolutely sure, add the following codes in-between the head tags:
<link rel="shortcut icon" href="http://www.johnchow.com/favicon.ico">
<link rel="icon" href="http://www.johnchow.com/favicon.ico">
Just change the above URL to the URL of your favicon.ico file and you’re set. Now, whenever you visit my blog, you will see a JC icon next to the address line and if you bookmark it, the icon will show up in your bookmarks as well. If a reader has a ton of bookmarks, it will help my blog to stand out among all those blogs without a favicon.
A big thanks to Justin of My PC Rig for drawing my icon.
Find out what I am doing right now by following me on Twitter! If you like this post then please consider subscribing to my full feed RSS. You can also subscribe by Email and have new posts sent directly to your inbox.
Make Money Online with John Chow's Ad Network - Join TTZ Media Now!
(No Ratings Yet)
Loading ...
Here's A Few More Related Posts
Hmmm, I’m not seeing the “JC,” does it matter that I’m viewing it in IE?
Your probably using IE 6.0. Thats the reason. You should see it if you swith to Firefox or IE 7.0
Well I was using IE 7.0 at work. I’m home now and through FF I see the JC…cool John.
I should have blog on faverite icon cause I made one for my blog the first day when it is launch. I found sometimes you can blog on really little things. I have hard time finding blog topics. Partime bloging and fulltime income seems something really hard for me to achieve. But I will keep trying =)
That’s what makes John’s blog so unique. He can use material for his blogs from just about anything (food, wax figues, tech, his daily routine, blog format, etc.). There is tons of material to write about, it’s adding that little twist to the content to fit your niche. That’s a post on its own
My first comment didn’t appear. I wanted to say I have a favicon before John chow on my blog but didn’t think of blogging about it.
Yea because FF rocks.
Im using IE 6 and it shows on the main page but not on individual posts.
hmmm well the index.php in teh template folder governs the first page, but when you click ona post, it is done through single.php..
but then, the favicon tags are in teh header.php file so that’s strange…
maybe you’re vising domain.com and then it goes to http://www.domain.com/articletitle/, so it loses track?
I think that in IE 6.0 you need to have the site in your favourites to display the favicon. Might be the reason why its called, favicion
Thanks i was wondering how to do that. Just to let you know i am still getting the default favicon on my browser (firefox) ?!?
marlon
You maybe looking at an old page. Try clearing your cache or temp files if you don’t see the icon. It works in both IE and FF.
Looks good.
Looks great John. Favicons are great for bookmarks and make a huge difference for users. They’re also so very easy to make. Just take any design element in your blog and shrink it down. While that won’t necessarily be a perfect final answer, it’s at least a great starting point. That’s what I’ve done on my websites and I think that it’s worked out well for me.
Hmm I’m use IE7 and I don’t see it.
refresh it, clear your chache or tempory internet files.
Looks great John, favicons really do add that extra touch
Me neither. Definitely broken. IE, Firefox, OPERA.
Wait, you mean you couldn’t get a little picture of yourself for the favicon?!
BTW it works fine for me in Firefox.
I tried it. There was no way my head would fit in such a small space!
Everyone else - If you don’t see the icon, clear your cache and temp files! It will work!
John’s got a big head.
Where there’s a will there’s a way, lol.
If Justin could get your big head in a favicon then that’d definatey be worth some credit. I guess he’s no miracle worker.
You’re right John, the clearing of cache and temp files was the answer.
John,
Here’s a great resource for making your favicon from any graphic you’d like:
http://tools.dynamicdrive.com/favicon/
It will even make it XP compatible so that if XP users drag it to their desktop, they’ll get a nice resolution on it.
Cheers,
Doug
Wow, awesome tool! Bookmarked!
Nice tool! I knew Chow’s head could fit in an ICO:
http://web.lomag.net/~rjp/chow.ico
That’s good, Ryan. However I think JC is better since it’s hard to tell if that is really John’s head unless if you’ve seen his photos so many times.
This is true, but a favicon of his head is pretty funny if you ask me.
I love it!
Wow, that was REALLY easy!
Nice tool, but since I need to do a lot of cropping on my images, it’s just as easy to create it myself. Nice find though and thanks for sharing.
Works for me now. Good post John Thanks.
I’m a big fan of the favicons as I do agree that it is the little touch to make your site different. The tough part is coming up with something that looks decent at that small size. For my site, I went with the dollar sign.
Woohoo! I got mine working on MichaelKwan.com
Nice one Michael
Thanks!
You can actually use a PNG file as well for alpha transparency. Just create a 16×16 PNG with your favourite graphics tool and then rename it to favicon.ico (or whatever name you specify in your HTML).
I think you should have put one of your pictures from “Dinning Out” up. Actually the J.Lo picture would have topped it, but the pic might have been a bit too small. It would have been all butt.
No way the initials look good.
Thats pretty cool, I am going to make 1 to
Thanks for the info.
Hey thanks for the mini-tutorial - I think its great to have a favicon.
It does separate a good website from the riff-raffs around the world wide web.
Great move
I use favicons in my “link blanket” list on my blog. It looks nice having a favicon followed by the name of the website as part of the link.
Yeah these can really make links stand out. I have a similar thing on a poker site that has the spades/hearts/clubs/diamonds for links depending on the level.
hmm that is a great idea, I might try this also
Another Great post….!!! I have always wondered about this…
Ash
Favicons are great for your brand identity. Every blog must have one. Many scripts and web services are configured to show your favicon besides your blog name.
3 Billion Profit, Zink, Blogger Wisdom, Vista, Wid
2.John(always useful info) tells bloggers how to create a favicon, that small icon which you see when you bookmark a website…..cool stuff John.
6. If you have time on your hand which you do, check out 10 most misspelled words in blogging.Courtesy …
I almost wrote about the JC to you when I observed this posting ! Looks cool though …
Was about time John, but it’s nice to see indeed. Also, if I’m right the ‘rel’ attribute is space separated, so adding one with ‘icon’ and one with ’shortcut icon’ would make the ‘icon’ obsolete. I’m only using the double one and so far that has never caused trouble on my website
Sweet. Was on my list of things to do. Easy directions.
Thanks Jon for this little post. Although I already knew how to do this, it reminded me to add a favicon.
Now when it comes to your 301 direect post on domain names. I had no idea how to do that and thank you for that one too.
I want to change my favicon. And I uploaded the new one, but it is not showing up.. how is this possible?
Try clearing your cache. I had issues initially too.
Thanks for clarifying.. I will try that
Awesome idea! I appreciate these sorts of tidbits. Thanks.
There’s a Photoshop plugin that can be used to create .ico that can be placed on the root directory directly.
Allen.H
Thanks john, Ive always wanted to make one but never really knew what it was or how to go about doing this. I will probably make one by next week now.