I am going to explain how you can get that little icon that appears next to the url in the address bar on many of your favourite sites. You will also find it next to its name if you add it to your favourites.
Here are some sample favicon's taken from the Firefox address bar:
So now that we're all on the same page as to what a favicon is I will get down to the technical side of it. The favicon is obviously an abbreviation of "favourites icon". Favourites are bookmarks in the IE world which is where this idea started out its existence.
The modern favicon standard (it was standardised in 2003) is a lot more flexible than its original inception.
A little background
The favicon was a 16x16 icon which had to be in the Microsoft icon format, placed in the root of your website, and called favicon.ico. Because of these requirements the browser could automatically detect if your site has a favicon available.
Now that it has been standardized you can put the file in any location. The number of file types has been expanded as well as the number of sizes of icon you can support.
Because you can put the favicon anywhere now you have to notify the browser by putting a <link> tag in your web pages. Before this was settled on there were two ways to define it - rel="icon" and rel="shortcut icon".
The final standardisation solved all the problems with the early versions of favicons. The fixed file name is known as url squatting which is frowned on. The file type was a Microsoft proprietary format. The <link> rel tag didn't follow the proper space-delimited list standardisations (it used two separate keywords to mean a single keyword).
Even with all of these problems solved I must admit that I still take a traditional approach my favicons. I save them as favicon.ico in the root of my websites, in MS icon format and do belt and braces with the link tag by including both a rel="shortcut icon" and rel="icon". Its probably overkill but for such a simple feature I feel that adhering to the original standards means that my favicons will be supported by the widest possible number of browsers.
How do you make yours?
I am going to skip over the part where you make a 16x16 graphic and try to cram your logo into it. If you don't have any artistic skills yourself then you can turn to a friendly artist on your team or reach out to the community.
For some reason icon file format support has never been included in Photoshop so while you can make your brilliant 16x16 graphic in that program you will have to turn to a 3rd party to get it in the correct format.
There are various plugins for Photoshop available and online generators which can help you with this.
And don't forget that you aren't forced to use the ico file format with modern browsers, png, gif and jpeg are all valid formats.
How to you link in into your site?
Personally, as I said above, I call my icons favicon.ico in the root folder of my website. That would be enough to get it to show up in all modern browsers. I also put the <link> tags which look like this (xhtml snippet - remove the trailing / if you are working in html)
<link rel="icon" href="/favicon.ico" type="image/vnd.microsoft.icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon" />
So now you know how to add that extra flair into your next website project. Its completely up to you if you want to follow my old school approach or if you want to take full advantage of the newer features such as multiple icon sizes, animated gifs and different filenames and locations - these will still work on the majority of modern browsers. You could always throw in a backup favicon.ico in the root for the old browsers "just in case".
Further Reading
- http://en.wikipedia.org/wiki/Favicon
- http://www.google.co.uk/search?q=favicon+generator - Online favicon generators
- http://www.google.co.uk/search?q=photoshop+ico+plugin - Photoshop ico file format plugins
No comments :
Post a Comment