A lot of sites have a small icon next to the site-name in the address bar.
This is called a Favorite icon. It's also called a website icon, url icon, bookmark icon or more generically a shortcut icon.
These icons can also be noticed on the tabs, when you have multiple tabbed documents open.
It is also used by the browser to put it next to a bookmarks(in Firefox), next to favorites(in IE).
If i were to open my current bookmarks in Firefox, it would look something like this.
We can also see this icon next to your history, next to visited links.
How to use a favorite icon in our website?
Today, we shall learn how to have our own icon against our site. This is a simple two step process.
- First we need an icon. Go to www.favicon.cc. Spend a little time looking at the options.
You can create a custom icon, browse existing icons and download to your computer. Note that there is an option to also publish your icons to the public.
I created a small "2" signed icon for my page. Chose a blue color, and downloaded the icon to my computer
- You can use any tool to create the icon, i just happened to find this nice online editor.
Observe the properties of the icon. It's a 16x16 image file.
- Next, in our webpages, we need to add a <link rel ="shortcut icon" href="#fav_icon_url"> tag in the head section. I added a link tag to my page and gave the fav_icon as a href.
You can see all this in action in the zip file that is available for download.
Why is it called a Favorite Icon?
In Microsoft's IE browser, we can bookmark favorite sites and they all appear under favorites.
In other browsers, such as Firefox, these bookmarks are just called bookmarks.
The reason for the name is, Microsoft introduced this "favorite icon" concept and later this was standardized by W3C, and all other browsers support it.
References:
You can look up these pages for more information.
http://en.wikipedia.org/wiki/Favicon
http://msdn.microsoft.com/en-us/library/ms537656%28VS.85%29.aspx
No comments:
Post a Comment