Favicon

Favicon (short for ‘favorite icon’) is a small icon that is displayed next to the website name in the browser tab of the majority of modern browsers. The file that contains this icon is also referred to as favicon. Favicon may be also referred to as shortcut icon, website icon, tab icon, URL icon, or bookmark icon.

Usage

Favicons are displayed in the following locations:

• In browser’s address bar/tab;
• In browser history next to the website name;
• In bookmarks list next to the bookmark name.

Emergence and development

Favicons were introduced by Microsoft in 1999 with the release of Internet Explorer 5. Initially, there was just one way to display a favicon of the website. Site owners had to place the icon, called favicon.ico in the website root folder. Favicons were displayed only if the website was bookmarked. That’s why initially favicons could be used to estimate the number of people who bookmarked the page. This side effect is no longer applicable, as modern browsers load the favicon every time the page is loaded.

Modern browsers support different favicon formats. Most popular favicon formats are .ico, .png, .gif. Other formats, supported by some browsers are animated .gif, .jpeg, .apng, .svg.

Favicon file size and color depth

Favicon file should be pretty small. Available sizes are 16×16, 32×32, 48×48, or 64×64 pixels. In terms of color size, the favicon should be 8-bit, 24-bit, or 32-bit.

Favicon generation

At present, there are multiple online tools that offer favicon generation service. You may use Favicon & App Icon Generator, or Favicon Generator.

Alternatively, if you create a website with the help of a template, the favicon may come as a part of it. Check these WordPress themes by TemplateMonster to see how favicon display is implemented there.

Adding favicon

The way of adding a favicon to the website depends on the engine the website uses (or none). If you run a CMS or e-commerce website, you’ll likely have to add the favicon in the admin panel. Check out, how to add/change a favicon in an HTML-based template, in WordPress, in Joomla, or in Magento.

Related terms: icon, address bar, browser, bookmark.

References and further reading:

• Favicon – Wikipedia.
• Quick Tip: Adding a Favicon To Your Website. What is favicon and how to add it to a website?
• What’s the Point of Favicons? Favicon explained.
• What Are Favicons? What are favicons and how to use them?
• What is Favicon.ico and How to Create a Favicon Icon for Your Website
• Everything You Ever Wanted to Know about Favicons
• Favicon & App Icon Generator
• Favicon Generator. For real.