Blue Dreamer Blog
Written articles and my personal thoughts on web design, ecommerce, the internet and odd ramblings about life, the universe and everything!
Favicons
A Blue Dreamer favicon
The humble “Favicon” was rarely used in the past but it’s popularity seems to be picking up a bit. You’ve probably noticed them on major sites like Yahoo but for some reason in all my years of web designing only one customer has actually asked for one!
So what is a Favicon exactly?
Many moons ago Internet Explorer displayed a small 16 pixel by 16 pixel icon in the users “Favourites” list (that’s bookmarks to the rest of us!). The web designer would upload a small image called favicon.ico and Internet Explorer would use this image whenever the user added the site to their favourites list. As time progressed favicons became available for all the popular web browsers.
Why should I use one?
The Yahoo favicon
There are two main reasons - identity and branding. Visit Yahoo and look in your browsers address bar, you’ll see the familiar “Y!” which is an integral part of their identity and branding. Favicons don’t actually add any real value to your site content but familiarity adds reassurance.
How do I get one?
If you’re having a site built just ask - it’s not a huge task! If you want one adding to an existing site it’s a little more work but a relatively quick job on most sites. You’ll need your icon image, this can really be taken from anything, your existing logo, the letters of your company name, or any other symbol that relates to your business. Bear in mind that it’s a very small image so simplicity is the key.
If you want to add your own Favicon you need to create your icon image in a commonly used size, the actual icon will always display as 16px x 16px in your browser but the image itself can be 16x16, 32x32, 64x64 or 128x128 pixels. You can save the image in .ico .gif or .png formats, though .ico is the most commonly used.
Finally you need to add some HTML code between the <head> tags on every page where you want the icon to display:
<link rel="shortcut icon” href="/favicon.ico" type="image/x-icon" />
For a more detailed description visit Wikipedia Favicons
Comments
There are no comments for this entry yet.