A favicon, which is a short term for favorited icon, is a small icon placed in the website’s tab in your browser.
Favicons have a long history. In 1999 Microsoft released Internet Explorer 5, which was the first browser to support the little 16 x 16px icons. Nowadays, the wide range of different consumer devices, screen sizes and browsers made favicons a quite complex topic and has brought new challenges.
SVG based iconsIn the latest version of Safari, which is part of Apple’s OS X El Capitan, Safari allows websites to be pinned unto the left side of the tabbar. They’ll be displayed just as greyscale favicons without any text label. This increases the need of a well-designed and reduced icon. For this use case Safari requires a vectorised single-colour SVG file of the icon. It can be embedded with the following piece of code:
<link rel="icon" sizes="any" mask href=“iconname.svg">I'm pretty sure that the svg file format will form the future of favicons as the resolution of displays gets to 4K and higher.
Larger than 16pxMany browsers use a tiled view to show up your favourite pages in new tabs. Safari uses the icons from a link tag called "Apple Touch Icon":
<link rel="apple-touch-icon" href="https://www.digitalgarden.com.au/apple-touch-icon.png">On iOS, you got the ability to add websites to your home screen, where this special kind of favicon will be represented with rounded corners.
Consider the previewIf you open a new tab in Firefox or Chrome, your favourite sites will not be represented by a separate icon but with a preview of your page. In order to offer a good user experience, you should avoid using too much script on the landing page in order to be displayed properly.
Keep it simpleIf there is a canvas of only 16 by 16 dots or even 57 by 57 dots for the larger Safari icons, you got to keep things really simple. The logo has to be reduced to a very basic symbol. Since browsers often use greyscale colours for their UI design, it is recommend to avoid these colours in favicons in order to keep them recognisable.
Be aware of your title and colourWith the last release of Safari, Apple decided to get rid of those tiny 16px eye-catchers in their tab bar to make their design look clean. This increases the importance of a <title> that is easy to get and which follows the simple rule “first things first”. With Android Lollipop Google enables webmasters to change mobile Chrome's toolbar by declaring the following meta tag in their source code:
<meta name="theme-color" content="#33363b">
Furthermore, Opera uses that colour for the favourites tiles once you open a new tab.