Recently I decided I should put a favicon on my website.
A favicon is one of those little pictures that your web browser shows next to the URL of the current
page, and also on the titles of tabs, if your browser does tabs. The one I made for my website is this one:
.
Putting a favicon for a website should be simple thing to do, after all a favicon is just a 16×16 pixel image with a file name "favicon.ico". But there are a few gotchas, so read on.
The basic steps are:
An "icon" file, as displayed in a web browser, is just a 256 pixel image, 16 pixels high and 16 pixels across.
So you might be tempted to fire up your favourite paint program, create a new 16×16 pixel image, and start painting.
However that would be a mistake.
Unless you are happy with an image that is all rectangles, with only horizontal and vertical lines and edges, you should not attempt to define the pixels of your icon directly.
Instead you should create a graphical image which is square, with dimensions much greater than the target size of 16×16, and then, when you are happy with your image, reduce it to the final size. This will produce a reduced image which corresponds most directly to your intended design.
What I actually did to create my favicon was draw the design in Inkscape, which is a vector graphics application, and then export the final picture as a 16×16 PNG file. (Note: in case you didn't already know, PNG is a lossless compressed graphics format, which means it exactly represents the specified pixels of the image. It would be a mistake to use JPEG, which is a lossy compressed graphics format.)
Having created my icon image and saved it as a PNG file, I then opened that file in Gimp, and re-saved it as a "Microsoft Windows icon" file, with name "favicon.ico". When you do this, Gimp asks you for "Icon details", and I chose "32bpp, 8-bit alpha, no palette". (I don't know if an icon saved with those details is guaranteed to display correctly in all web browsers, but it seems to display OK in latest versions of all major browsers on my computer, and it obviously preserves all information including transparency in the original image.)
I will assume that you know how to upload files to your website. The file "favicon.ico" needs to be in the root directory of your website, so that it is served as http://www.yourwebsitename.com/favicon.ico.
A web browser will only display a "favicon.ico" file correctly if it is told the correct MIME type, which happens to be "image/x-icon".
How MIME types are configured depends on the specific web server or web application. It may be that your web host has already configured your website to serve favicon files with the correct MIME type. You can test this by directly accessing the favicon by its URL (i.e. http://www.yourwebsitename.com/favicon.ico). If you see an image then you're probably OK. If you don't then you have to do something to set up the MIME type. (My website runs on Godaddy's hosting service, and this doesn't have MIME types set up for favicon files, so I had to carry out the steps described below.)
If your website is running on Apache (which is the web server used by most hosting services), then the standard way to configure MIME types is to add the following line to a file .htaccess in the root directory of your website:
AddType image/x-icon .ico(And if you don't already have a .htaccess file, then you'll have to create one.)
An alternative method is to add the following line to the head section of your web pages:
<link rel="icon" href="/favicon.ico" type="image/x-icon">However you have to add that to every page in your website, which is not a very DRY way of doing it. (The only reason to use the link method is either you want to have different favicons for different web pages on one website, or, for some reason your hosting service has no way to correctly configure the MIME type.)