Menu

Sponsors

What is a Favicon?

 

What is a FavIcon?

The term "FavIcon" is made up of a combination of two words, "Favorite" and "Icon", and originally was created by Microsoft Internet Explorer 5 in 1999.

 

The favicon was standardized by the World Wide Web Consortium (W3C) in the HTML 4.01 recommendation, released in December 1999, and later in the XHTML 1.0 recommendation, released in January 2000.

 

The standards use a link element with a rel attribute in the <head> section of an HTML document which details the file format, file name and a location can be specified for any website directory.

 

Nowadays, the use of a reserved location (Formerly, it HAD TO BE in the root directory) on a website is no longer required and according to the standards set by the W3C, the favicon file can be located anywhere in the web directory tree and any image file format can be used... unless you want it to appear in Internet Explorer!

 

When using the .ico format, Internet Explorer cannot display files served with the standardized MIME type. A 'hack' for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in Web servers.

 

RFC 5988 established an IANA link relation registry, and rel="icon" was registered in 2010 based on the HTML5 specification. The popular rel="shortcut icon" theoretically identifies two relations, shortcut and icon, but shortcut is not registered and is redundant.

 

In 2011 the HTML living standard specified that for historical reasons shortcut is allowed immediately before icon; however shortcut does not itself have a meaning.

 

The reason you see this on many sites is because the obsolete standard is the only one that will appear in Microsoft Internet Explorer!

 

What are the other names for a Favicon?

   • shortcut icon,

   • Web site icon,

   • URL icon,

   • bookmark icon 

 

What are the sizes of FavIcons?

The standard favicon size is 16x16 pixels. Two other popular icon sizes are 32x32 and 48x48. These larger sizes are more for desktop icons.

 

What browsers support favicons? What types?

All browsers support favicons, but Internet Explorer only supports the .ico extension at this writing.

Browser ICO PNG GIF animated GIFs JPEG APNG SVG
Google Chrome Yes 4.0 4.0 No 4.0 No Yes
Internet Explorer 5.0 No No No No No No
Firefox 1.0 1.0 1.0 Yes Yes 3.0 No
Opera 7.0 7.0 7.0 7.0 7.0 9.5 9.6
Safari Yes 4.0 4.0 No 4.0 No No

 

Where are Favicons displayed?

Different browsers display favicon images in different places - the latest versions of most popular browsers are fairly consistent, as the table below shows... with the exception of Safari.

Browser address bar links bar bookmarks tabs drag to desktop
Google Chrome Yes Yes Yes 1.0 Yes
Internet Explorer 7.0 5.0 5.0 7.0 5.0
Firefox 1.0 Yes Yes Yes Yes
Opera 7.0 7.0 7.0 7.0 7.0
Safari Yes No Yes No No

 

 

 

 

Quick links...

Animated Favicons - You can use animated favicons, but they will not animate in all browsers.

Learn more about how to create animated favicons, and the code you should use to display them on your page...

read more

Why doesn't my FavIcon show? Find out more about how to make sure your favicon shows up. They are tricky...

Copy and paste the optimal favicon code into your document header. Get the code here...

read more