How to Create and Use a Favicon

What exactly is a Favicon?

The word itself is a combination of two words. Favorite and Icon. The purpose of a Favicon is to serve as the little picture thingy that shows up in the navigation bar and tab of your browser. It can be any 16 pixel by 16 pixel image in either .jpg, .gif format with an .ico extension.

Favicons

So what’s the point you may be asking?

Well, the point is that it’s another step in marketing and branding your site. In most cases, the favicon is a company or site’s logo. It also is used by many browsers as the icon for a site when you bookmark it in your browser. It makes (hopefully) your site recognizable by associating an image with the site.

How do you make an favicon?

You can very easily create a favicon using some image software like Photoshop, Gimp, or Paint. Really, the only restriction is that when you’re done, it should be a 16X16 image. The image must be saved in the .ico format, so just renaming a .jpg or .gif file will not work. It also must be in the 16 colors palette. Don’t worry though, you can still use your graphics program to create one even if it doesn’t do the .ico format.

I suggest you try to create the image in a 64×64 size first as working in a 16×16 canvas can be a bit… restrictive. Try to make the image something recognizable and something that can easily be related to your site. Once you’ve done that, try shrinking it down to the 16×16 size and make sure that it is still recognizable at that resolution. If it’s not, go back to work.

Once you’ve gotten your icon created, you’ll need to make it into a .ico file if it isn’t already. Again, don’t just try and rename it. It won’t work. The easiest way I’ve found to create a favicon from an image in another file type is by using the favicon from pics site. It’s pretty easy to use. You just browse for the file you want to convert and then click the convert Favicon.ico button. They do give you the option of creating an animated favicon, but I personally don’t like them. Feel free to experiment however. Once the favicon is created, you should be presented with a preview and a download link. Download the file.

You’ve created the file, now what?

Once you’ve created the file or downloaded the converted file from Favicon from Pics, you need to get it on your server. Yes, you have to have a server for it. If you’re using a free blog hosting service like blogger or wordpress.com, you’re out of luck. You’ll need access to your hosting server and they just don’t allow that.  ADDED: I’ve confirmed that you can use a favicon on blogger, but you’ll still need a host to host the .ico file.  Instructions are in the comments.  Thanks SarahG!

You’ll need to ftp the file to your host server. You can do this with your favorite ftp software or some hosts offer a web ftp service for your hosting account. Ftp the file to the root ( usually the same folder as index.php or index.html) of your site. Once there, you need to add some code to your header. Add <link rel=”shortcut icon” href=”/favicon.ico” /> somewhere before the < / head > tag in your header.

Open up your browser and navigate to the site you just uploaded the icon file to. You should see the icon in your navigation bar now. If you don’t, double check that you put the file in the right place. You also might try deleting your cookies and temporary files as some browsers have a problem with their cache and displaying the icon.

Technorati Tags: , , , , ,

About Shane Ede

Shane Ede is an IT guy by day and a Entrepreneurial Blogger by night. You can follow him here on Thatedeguy or over on Twitter and Google+.

Comments

  1. Good description, the only problem I’ve ran into with favicons is updating them – for some reason the browser caches them and even clearing the cache / history doesn’t clear it out – sometimes they still show the old version. I guess my point is to make sure you get it right before you upload it!

  2. Thatedeguy says:

    Sam,

    I think in some cases, your browser keeps a separate cache for the favicons. In most cases, you’ll have to manually delete that cache as it won’t automatically delete them when you do the rest. Depending on your browser it could be an issue with bookmarking as well.

    IE6 only adds favicons for sites when the site has been bookmarked and Safari has a separate cache for the favicons that will need to be cleared.

    Otherwise, it should refresh eventually. Some of them like to be a little sticky sometimes.

  3. Nice tutorial…however, I’ve seen blogs with favicons hosted on Blogger. Some investigation is in order, methinks.

    Thanks!

    Teri

  4. If you can change the header in Blogger then you can insert

    <link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon” />

    and change the href to point to the favicon.ico file. This is handy to use anyway, and not rely on the browser to just find the favicon but actually tell it that it’s there.

  5. Thanks for the info SarahG! I’ve tried doing that on my blogger blog and haven’t been able to get it to work. It is hosted by blogger though, so I think that’s the hangup. I think if I were hosting it, the story might be different.

  6. Hmm Blogger is probably overriding it then I guess. Ahh well, it was worth a try 😉

  7. Ahh, sorry for the additional comment, but if this is the code you inserted

    $lt;link rel=shortcut icon href=thatedeguy.com/favicon.ico type=”image/x-icon” />

    You need to change it. First off thatedeguy.com/favicon.ico will be looked for at http://thatedeguy.blogspot.com/thatedeguy.com/favicon.ico (unless that’s the correct address) plus the quotes are wrong. Make sure you retype them using shift + 2, oh umm for US keyboard umm Shift + single quote -> ‘

    Perhaps… 😉

  8. Thatedeguy says:

    Brilliant Catch SarahG! I had tried several different url’s including the right one, but none of them worked. The problem was in the quotes. I had copied and pasted the line and it pasted in with those darn stylized quotes.

    If you add the to the header (between the and tags) it should work. This does mean that you have to have an off-blogger storage ability for storing the .ico file.

  9. not bad for late night (it’s 11pm here now!).

    As for off storage, imageshack may host an ico file. For anyone who needs off storage.

    Glad to hear it’s working now 🙂

  10. This is extremely helpful! This is one of those things that you know should be really basic, but then you don’t even know what to call it. Great intro guide!

Speak Your Mind

*