| |
|
Jared Wiltshire
|
18th May 2010
|
|
Intro A Favourite Icon (favicon) is an icon that will appear in your browser address bar next to the URL text. It provides a neat and good looking way to apply a custom logo (like a company logo) to your website. In a way it can give the effect as if the website has been branded or stamped with an icon you choose.
When someone bookmarks a page where the favicon appears on, the favicon will be saved with the bookmark so that when you see the bookmark in your bookmark toolbar or in the context menu – the icon will appear next to the page title of the page you saved. It not only looks good but also very professional.
Icon Implementation The favicon image will end up 16x16 when displayed in the browser application. Keep this in mind at all times when designing the icon and choosing the colours for it. Many people create a larger scale image of the icon and then downscale, but keep in mind that if you use too light a colour, you may loose some/all of the quality of the image where this colour was used. I have experienced this personally where, for example, I started off by creating 32x32 images in which I used a light grey colour for drawing a few lines – I resized the image and it lost a lot of the grey lines and replaced the colour with white. Consider using darker colour where possible and 1 or 2 pixels thicker lines when editing the image prior to downscaling.
You do not have to downscale the image (you could use a 32x32 icon as the favicon), but it would only ever appear in the browser as 16x16 and you might find a few surprises about how it looks.
Make sure you save the image as an icon file *.ico and copy it to the root of your website.
You should have an icon file similar to this when you have finished;
HTML Implementation The favicon needs to be setup using META tags in each page you wish it to appear – in the case of an ASP.NET website, it would be advisable to keep this in a Masterpage (if used) to ensure site-wide coverage of the favicon.
To be cross browser and standards compatible, there are two parts that are required. Both are references to the favicon and simply require a single name change.
<link id="FavIcon" rel="icon" href="~/favicon.ico" type="image/x-icon" runat="server" /> <link id="FavIcon2" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" runat="server" />
It is not required for the meta tags to specify the runat="server" attribute, but it allows using the tilde character in the href="" path – specifying the path in this way ensures the virtual root is correctly pathed to.
As you can see they are declared exactly the same with the exception of the rel attribute being set to "shortcut icon" this is because some older browsers recognise the older standard and some the new. For cross-browser compatibility, ensure you declare both.
Testing it out Once you have made the above changes, deploy your website to the live environment.
Don't be too alarmed if the favicon doesn't appear straight away. Through the many favicons I have setup for clients, I have seen it take anything from a browser restart to clearing out the browser cache (obviously not a preferred route) but the process of the favicon appearing on a user's browser can depend on what browser you are using.
If a brand new unique user was to visit your site now it should appear for them straight away – so test this out on a different machine to your production box to see if it has worked correctly.
The end result should look similar to this;
|
|
|
|
|
|
|
 |
|
 |
|