First, what is a favicon? In the image below it is the little picture of my head that is shown in the browser address bar, and in the tab for the web page I’m visiting. It also appears as the bookmark icon if you save my site to your favorites. It can be anything, your logo, your face, a familiar symbol or something that you wish to brand your site with.
Second, how do you get one on your site? The easiest way I have found for people to do it themselves is to follow these steps.
1. Find/create the image you want to be used as your favicon. It doesn’t really matter what the size of this image is, but a square image is best. The final image will be 16×16 pixels so bear in mind it’s going to be small when finished, so see if it looks good that small first.
2. Go to HTML Kit here. This is a great FavIcon From Pics generator.
3. Simply upload your image here and it will then provide you with an example of the image and a link to download it from. I highly recommend NOT using the animated version, unless you want to annoy your visitors.
4. The image will be in a zip file, so extract favicon.ico to somewhere you will remember on your computer (the Desktop is usually easiest).
5. Upload the favicon.ico to your website, either via FTP or through WordPress (simply go to Write as if you were writing a post and Add image. You don’t need to save the post after it uploaded). Either way remember/copy the URL to the file once it is uploaded.
6. Finally you will need to edit the header of your website to tell the browser where the favicon is located. In WordPress you can do this through Design > Theme Editor and selecting header.php. Some themes will already have a line mentioning favicon.ico so you simply need to edit that line, else before the closing tag insert this line:
The image does not always appear first time, browsers are a little picky about displaying them, but you can always try in a different browser, or delete your browser cache/temporary internet files, closing the browser and restarting. If you have done steps 5 and 6 correctly it WILL work, have faith. You can even ask a friend if they can see it on their computer.
It’s a nice little touch to a website that can add an air of professionalism and branding.
[Thanks to my client Oriana for the idea for this post!]
