Favicons – The finishing touch to your web design…
Once you’ve nailed the core elements of good web design, it’s worth taking a few moments to consider what extra little touches you could apply to your site to make it really stand out from the crowd. Creating a favicon is perhaps one of the smallest tweaks you can make in your web design, but it can also be highly effective.
A favicon (short for ‘Favourite icon’) is simply a small image that is associated with your website and displayed beside your web address in Internet browser address bars, besides your title in browser tabs, and when users bookmark your page.
Well known examples of favicons include the simple black ‘W’ used by Wikipedia, and the white ‘F’ on a blue background that is associated with Facebook the world over. While these are excellent examples of brand recognition, you don’t have to be limited to letters of the alphabet, and could in theory use any image you wanted, though it’s best to keep it simple (the blue bird of Twitter is a prime example).
Why install a favicon
Though it is by no means essential for a website, a favicon can help build and reinforce your brand. It enables users to identify your site at a glance, whether it’s in a long list of bookmarks, or amongst a long line of open browser tabs that may also include your competitors. As well as making sure that your site sticks out, favicon’s can also enhance usability.
How to create a favicon
There are a number of different accepted file types for favicons, but the most common and widely used by web browsers is .ico. Favicon image files can also vary in size, but 16×16 is widely recommended. To make one you need simply to create an image with these specifications in the graphics program of your choice. You might use your logo, or something representative of what you do. While you can technically use photographs, you should make sure that these look good when shrunken down to a tiny size.
Once you’ve created your favicon, all you need to do is upload it to the main directory of your website server and then insert the following line of code between the header tags on each page for which you want it to appear:
link rel=”shortcut icon” type=”image/x-icon” href=”/yourfilename.ico”
Simple, but very effective. Ask Twitter!
