(720) 420-6030

Help With Favicons

A favicon (short for ‘favorites icon’), also known as a website icon, shortcut icon, url icon, or bookmark icon, is an icon associated with a particular website or webpage that shows up as a small image (icon) next to (to the left of) the address bar in the browser.

The favicon file should be named favicon.ico.

The favicon should be located at the site root directory.

Note: In some cases, if you are using a plugin that can take a URL that  can point to another location for your favicon, you may be able to put your favicon in a subfolder within your site (i.e. images folder). There is probably no advantage to this unless you are hosting several website under the same root directory, in which case using a subfolder and a URL pointer allows you to have favicons for several different sites or subdomains under the same root.

A favicon is normally a .ico file with 16×16 in size, although .png and .gif are also suported, IE (Internet Explorer) only supports the .ico file.

A good site to help you create a favicon is "favicon.ico Generator":
https://www.favicon.cc/

Dealing With Favicons In Internet Explorer

Note: Internet Explorer (7.0 or less) handles favicons in a horrible way, the code use works in IE7 and IE6, but there are somethings you have to pay attention for it to work:

* The .ico file should be 16×16 in size
* The .ico file should be a 100% valid icon
* There can’t be other sizes in the .ico file (icons can have many sizes images in one file)
* It cant be animated (most important!)

The best approach is to have 2 separate favicon files located at the site root directory.

1. The first favicon file (favicon.ico) is either a 16×16 or a 32×32 icon. Nowadays, all modern browser supports both sizes.

2. The second favicon file (favicon.gif) is a (reasonable) free size, and can be an animated GIF too! The .gif version has precedence over the .ico. So, if the browser supports an animated favicon, the animated version will be displayed, else the static .ico will be used instead. Note that both favicon.ico and favicon.gif can be different pictures.