Stand Out From The Crowd With A Favicon

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.


60 thoughts on “Stand Out From The Crowd With A Favicon”

  1. Jane says:

    Hmmm, I’m not seeing the “JC,” does it matter that I’m viewing it in IE?

    1. Alex Becker says:

      Your probably using IE 6.0. Thats the reason. You should see it if you swith to Firefox or IE 7.0

      1. Jane says:

        Well I was using IE 7.0 at work. I’m home now and through FF I see the JC…cool John.

        1. siusic.com says:

          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 =)

          1. Jane May says:

            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 🙂

        2. Andrew Chen says:

          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.

        3. Alex Becker says:

          Yea because FF rocks.

    2. Im using IE 6 and it shows on the main page but not on individual posts.

      1. Jeff says:

        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?

    3. Kalle says:

      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 🙂

  2. marlon says:

    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

  3. John Chow says:

    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.

  4. Marc says:

    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.

  5. Gary says:

    Hmm I’m use IE7 and I don’t see it.

    1. Nomar says:

      refresh it, clear your chache or tempory internet files.

  6. Hamish M says:

    Looks great John, favicons really do add that extra touch 🙂

  7. Stephen says:

    Me neither. Definitely broken. IE, Firefox, OPERA.

  8. Ryan says:

    Wait, you mean you couldn’t get a little picture of yourself for the favicon?! 😉

    BTW it works fine for me in Firefox.

    1. John Chow says:

      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!

      1. Michael Kwan says:

        John’s got a big head.

      2. Ryan says:

        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. 😉

      3. Jane says:

        You’re right John, the clearing of cache and temp files was the answer.

  9. Doug Karr says:

    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

    1. Michael Kwan says:

      Wow, awesome tool! Bookmarked!

      1. Ryan says:

        Nice tool! I knew Chow’s head could fit in an ICO:

        http://web.lomag.net/~rjp/chow.ico

        1. Aris says:

          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. 🙂

          1. Ryan says:

            This is true, but a favicon of his head is pretty funny if you ask me. 😉

    2. Jane says:

      Wow, that was REALLY easy!

    3. Marc says:

      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.

  10. marlon says:

    Works for me now. Good post John Thanks.

  11. 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.

  12. Michael Kwan says:

    Woohoo! I got mine working on MichaelKwan.com

    1. Nomar says:

      Nice one Michael 🙂

  13. Leif Hearne says:

    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).

  14. Jane says:

    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.

    1. Alex Becker says:

      No way the initials look good.

  15. Nomar says:

    Thats pretty cool, I am going to make 1 to 🙂

    Thanks for the info.

  16. 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

  17. HMTKSteve says:

    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.

    1. Ryan says:

      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.

      1. Nomar says:

        hmm that is a great idea, I might try this also

  18. Ash says:

    Another Great post….!!! I have always wondered about this…

    Ash

  19. 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.

  20. Pingback: One Powerful Word
  21. Raghu CS says:

    I almost wrote about the JC to you when I observed this posting ! Looks cool though …

  22. Leftblank says:

    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 😉

  23. MrMike says:

    Sweet. Was on my list of things to do. Easy directions.

  24. Shane Coffey says:

    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.

  25. Nomar says:

    I want to change my favicon. And I uploaded the new one, but it is not showing up.. how is this possible?

    1. Michael Kwan says:

      Try clearing your cache. I had issues initially too.

      1. Nomar says:

        Thanks for clarifying.. I will try that

  26. Max says:

    Awesome idea! I appreciate these sorts of tidbits. Thanks.

  27. Allen.H says:

    There’s a Photoshop plugin that can be used to create .ico that can be placed on the root directory directly.

    Allen.H

  28. 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.

  29. Cool icon John.

    Having a favicon is great – I actually blogged about this a few weeks ago: Adding A Favicon For Branding

    1. Kalle says:

      Yeah, seems great. Think I will add a Favicon for my own blog.

  30. Kalle says:

    Looking good 🙂

Comments are closed.