Favicons – or: That little picture next to a website URL

A picture speaks a thousand words – Or at least that’s what people say. And you will have seen lots of websites, that after you’ve opened them, display a little tiny picture towards the left of the website address in most popular internet browsers in use today. And if you run your own site, you may have wondered, how do I get one of those?

Well wonder no more – The picture is called a “Favicon”. And you get one by creating an icon (.ico file) based on an image you design, and putting it in the root directory of your site. So that’s it in a nutshell. Below I’ll go through it step by step.

1. The image
Choose an image or create one from scratch which will look good even when displayed extremely small. If you’re creating this image from scratch, it helps to work on a small scale so you need not resize too much in order to use the icon. Make a new image sized 64×64 pixels. Once it is done, resize to 16×16 pixels and see if you like the look of it.

For this example, I have taken part of a photograph of sunflowers, and selected a square of the original to create this small picture: (64x64pixels)

sunflowers1

Resized to 16×16 to see if it looks acceptable:

sunflowers16

Well it ain’t perfect, but it’ll do for my example.

Next – we need this image to be saved as an .ico file (Windows Icon File). Depending on what software you have access to, you may be able to do it from your graphics program directly (For this example I used The Gimp, which can directly save as .ico, if you’re using Photoshop, you may need to install a plug in). OR: You can simply convert your .png file to .ico using This Very Handy Website. Then rename your file to “favicon.ico”.

2. Your Website

Now that we’ve got the icon, we need to include it in our website. In order to do this, upload it to the root directory of your website. Now most browsers will automatically recognise it. But in order to make sure, include the following code on all pages, within the <HEAD> and </HEAD> tags towards the top of the page:

<link rel=”shortcut icon” href=”http://www.mysite.com/favicon.ico&#8221; type=”image/vnd.microsoft.icon”>
<link rel=”icon” href=”http://www.mysite.com/favicon.ico&#8221; type=”image/vnd.microsoft.icon”>

And done! Now everyone who visits your site (provided their browser supports it) will see your favicon next to the url, next to the title of each page in tabbed browsers (IE7, Firefox, Google Chrome, etc), as well as next to bookmarks.

NOTE (Thank you Odzer for reminding me) : if you’ve done all the above and your favicon is not showing up, empty your cache (temporary internet files), or the change won’t show up. This is because your browser is basically still looking at the files it had previously saved on your hard drive, not the ones you just updated.

Advertisements

15 Comments »

  1. web designer Said:

    Nice bit of information here. So many times I get my buddies asking ” How did you get that icon in the browser” Thanks to you I can now just link them over to here!

    Thanks!

  2. odzer Said:

    @ Hedonist : Thank you Thank you Thank you! Now I have a little picture of my own! One bit of advice for Safari users if it does not show up even after you have added the favicon be sure to empty the cache and reload.

  3. hedonist666 Said:

    @web designer: Well that’s exactly why I put it up.. only yesterday did I get asked the same thing.

    @odzer: Oh yes, emptying the cache is a must for pretty much all browsers.

  4. rockerthorn Said:

    this was very good advice it works realy good but on 1 website it shows another website s little picture how do you change it back

  5. hedonist666 Said:

    Hey rockerthorn, if you’ve accidently put the wrong url in the code, just change it to what it should be and empty your browser cache. That should take care of it.

    If you wanna get rid of it alltogether, you just delete the code, and the favicon file and it’s gone. Though you need to empty your browser cache, because that has saved all the information from how it previously was and will keep showing you the old picture until you reset it.

    Hope this helps…

  6. Farnoosh Said:

    I am afraid the instructions did not work for me. I was able to get my .ico file created but I use Thesis Theme. I put it in my root directory, which for me is http://www.prolificliving.com/blog but I also tried my main theme folder. I haven’t done anything to the php code yet though.
    Tried various browsers.
    Any thoughts much appreciated.
    Do I need to keep the name favicon.ico or can I change it to any-name.ico?
    Thanks,
    Farnoosh

  7. Got it working but took a lot of tweaking……….
    Ended up removing the line from the header.php after all.
    Thanks much!

  8. hedonist666 Said:

    Hi Farnoosh,

    Glad to know it worked in the end. The instructions I posted are easiest to follow when you’re dealing with a plain vanilla static website (no php files). The more additional functionality is added to it the harder it may be to find your way around the files to figure out where exactly you need to put the favicon code. And I would recommend keeping the name “favicon.ico” because some browsers then automatically recognise it even if you don’t put the code in your website header…

  9. Thanks. Yes renaming it to original also helped. It was a fun exercise. Now I need to create a really professional logo at some point………thanks again! 🙂

  10. wonderful, i like your advice, whole post is really very good.

    • Well, this is interesting. Great to find out this website. I have really got the stuff here very interesting and informative. Your website is cool enough.

  11. Zavtech Said:

    Great, useful post!

  12. Jack Said:

    Doesn’t seem to work for my website, not sure why, but will keep trying!

    • Jack Said:

      is the “”” important? I’ve tried putting it in as well but not going so well… still only gott he little globe shape next to it in my firefox browser.

      • Jack Said:

        & #8221;

        was supposed to go in the “”s there


{ RSS feed for comments on this post} · { TrackBack URI }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: