Friday, May 16, 2014

Favicon - Small icon big brand

What is favicon?
A favicon (favorite icon) is a small icon (usually 16x16 pixels) for website use. Most browsers display this icon in tab, bookmark, address bar. This icon is usually for branding purpose, and frequently it is created from company logo. For instance, www.google.com/favicon.ico.

How to use favicon?
Favicon is well supported across browsers. It can be ICO, PNG, JPEG, GIF or even animated GIF format. The list of HTML codes in head section usually look like below

<link rel="shortcut icon" href="http://example.com/myicon.ico" />
<link rel="icon" href="http://example.com/image.ico" />
<link rel="icon" type="image/gif" href="http://example.com/image.gif" />
<link rel="icon" type="image/png" href="http://example.com/image.png" />
<link rel="icon" type="image/x-icon" href="http://example.com/image.ico"/>
How to use the Animated FavIcon Gif?
<link rel="shortcut icon" href="favicon.ico" >
<link rel="icon" href="animated_favicon.gif" type="image/gif" >

Reference
http://en.wikipedia.org/wiki/Favicon
http://lab.ejci.net/favico.js/
http://www.animatedfavicon.com/
https://gist.github.com/mathiasbynens/428626
http://stackoverflow.com/questions/5982282/my-animated-favicon-does-not-show-animation

No comments:

Post a Comment