For web owners, overtime you'll notice a thing, which is not new called the favicon. You may have came across it and lightly discussed about it but have never drilled any further on it. Well I'm about to explain to you what the favicon is used for in modern web design. If you still have no clue what the favicon is, it is the little image show below.
To be more specific, a favicon is exactly as the name suggest, its an ICON. Its an icon usually displayed in 16×16 pixels that is associated with your website. That's the short story of it. For the rest of the article I'll explain the details of favicons and how you can have one for your site.
Aesthetic Reasons
Favicons are typically for iconic reasons. Its to associate a small graphic to your website that indicates to the user that they're on your site (not that they can't see that). Another reason is that the icon is shown in tabs. Tabs are really popular in modern web surfing, with a favicon it helps users quickly identify which tabs are associated with your website. With a small canvas (16×16) to work with its really testing your creativity, especially for those with very graphical logos. Here are a couple of creative favicons.
Bookmark Measurement
Back in the old days, favicons were a good measurement to see how many people were bookmarking your site, but that only worked when majority of the users on the internet used Internet Explorer. That's right, when people with Internet Explorer bookmark your site, you can see it if you have the right analytic in place. Here's an example for one of my sites using AW Stats.
It shows that this month there were 14 visitors who bookmarked my site. As I said before this measurement only worked for IE; thus, not very accurate. As well, a measurement of bookmarks truly doesn't account for anything.
How to Create a Favicon
Creating your own favicon is not hard. You just need to create a graphical image with dimensions 16×16px. Modern browsers will support GIF and PNG formats but if you want to be safe you can go with ICO format. If you don't know how to convert to ICO formats or don't have any graphical software you can use this favicon generator/converter tool I made for free. Save your file to any name store it in your web directory. You'll need to attach the code below for it to work.
Attaching Favicon to Website
Now that you have your icon in your directory and ready to go you need to tell your website where the icon is. I always use the two following codes in my header between
code.<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
There you have it, your very own and unique favicon to match your site. Remember to be creative.
Share It
