Favicon-in-Firefox
Image via Wikipedia

Sure there are plenty of posts out there on the internet covering this same topic.  For some reason there are still not enough sources.  So here is one more.

Favicon = is a small graphic that is associated with a page or Web site. (short for favorite icon, sometimes understood as favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon).

1. Get an image

To get that happy little 16 x 16 square associated with your site, you first need an image (16 pixels by 16 pixels of course).  Bear with me and pretend it is a picture of a cake.  So get your cake picture ready in your favorite image editor and save it as a .ico file.   If you cannot do that it is not so bad, you can just save it as a gif, png, or jpg but there may be a few browsers out there that don’t like those options.  There are plenty of favicon generators available so dive into the pool if you need to.  In the example it will just be called cakefavicon, but you can name it whatever you want.

2. Put it somewhere

The second thing you need is somewhere to put the icon. If you host your own site this is not likely to be a problem, but some free hosts might be a wee bit upset about letting you upload a .ico file. This is why the standard was relaxed to include the other formats. So if you run into trouble when you upload the image, then try the next image format on the list.  Make sure wherever you decide to put the image, that you save the full link. You will need this for the last bit.

3. Tell the site what to do with it

This is the fun part.  You need to find the header of the site and add 1 line of information. The hardest part of this step can sometimes be the header since some sites use a CMS and some do not. In both cases this line of information needs to be placed somewhere after

<head>

and somewhere before

</head>.

This is the line of information that tells the site what to do with the image:

<link rel=”SHORTCUT ICON” href=”http://www.example.com/cakefavicon.ico” />

After you place that in the header (substituting the words in bold for the real address of the image) save and enjoy the favicon. In some cases you may need to clear your cache to see the image appear.

Bonus:

For WordPress users there is a plugin called MaxBlogPress Favicon which appears to just have a bunch of icons and just lets you pick one without having to get your hands dirty with image editing and code.

Reblog this post [with Zemanta]