What Is the Best Practice for Creating a Favicon on a Web Site

What is the best practice for creating a favicon on a web site?

There are several ways to create a favicon. The best way for you depends on various factors:

The time you can spend on this task. For many people, this is "as quick as possible".
The efforts you are willing to make. Like, drawing a 16x16 icon by hand for better results.
Specific constraints, like supporting a specific browser with odd specs.

First method: Use a favicon generator

If you want to get the job done well and quickly, you can use a favicon generator. This one creates the pictures and HTML code for all major desktop and mobiles browsers. Full disclosure: I'm the author of this site.

Advantages of such solution: it's quick and all compatibility considerations were already addressed for you.

Second method: Create a favicon.ico (desktop browsers only)

As you suggest, you can create a favicon.ico file which contains 16x16 and 32x32 pictures (note that Microsoft recommends 16x16, 32x32 and 48x48).

Then, declare it in your HTML code:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">

This method will work with all desktop browsers, old and new. But most mobile browsers will ignore the favicon.

About your suggestion of placing the favicon.ico file in the root and not declaring it: beware, although this technique works on most browsers, it is not 100% reliable. For example Windows Safari cannot find it (granted: this browser is somehow deprecated on Windows, but you get the point). This technique is useful when combined with PNG icons (for modern browsers).

Third method: Create a favicon.ico, a PNG icon and an Apple Touch icon (all browsers)

In your question, you do not mention the mobile browsers. Most of them will ignore the favicon.ico file. Although your site may be dedicated to desktop browsers, chances are that you don't want to ignore mobile browsers altogether.

You can achieve a good compatibility with:

favicon.ico, see above.
A 192x192 PNG icon for Android Chrome
A 180x180 Apple Touch icon (for iPhone 6 Plus; other device will scale it down as needed).

Declare them with

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

This is not the full story, but it's good enough in most cases.

What is currently the best way to get a favicon to display in all browsers that support Favicons?

I go for a belt and braces approach here.

I create a 32x32 icon in both the .ico and .png formats called favicon.ico and favicon.png. The icon name doesn't really matter unless you are dealing with older browsers.

Place favicon.ico at your site root to support the older browsers (optional and only relevant for older browsers.
Place favicon.png in my images sub-directory (just to keep things tidy).
Add the following HTML inside the <head> element.

<link rel="icon" href="/images/favicon.png" type="image/png" />
<link rel="shortcut icon" href="/favicon.ico" />

Please note that:

The MIME type for .ico files was registered as image/vnd.microsoft.icon by the IANA.
Internet Explorer will ignore the type attribute for the shortcut icon relationship and this is the only browser to support this relationship, it doesn't need to be supplied.

Reference

Favicon Standard - 2022 - svg, ico, png and dimensions?

Disclaimer: I'm the author of RealFaviconGenerator, which I expect to be up-to-date (mostly, see below). So don't be surprised if this answer matches what RFG generates.

The one-size-fits-all myth

There is no "one size fits all" icon. You can't create a single SVG icon and expect it to work everywhere.

From a technical point of view, a single SVG icon would be a good thing. But from a UI and UX point of view, this is not a desirable outcome. Compare iOS and Android. On iOS, all home screen icons are squares with rounded corners (iOS fills transparent regions of Touch icons with black). On Android, home screen icons often use non-square shapes and transparency (including Google app icons). Submit a single touch icon and Android Chrome will use it. But you won't be able to match Android icon guidelines, whereas a dedicated icon could.

So I advice to deliberately avoid using a single icon. Rather target each platform individually, when possible (this is not always the case).

Icons, platform per platform

iOS Safari

iOS Safari expects a touch icon. As of today, this is a 180x180 PNG image. This image should not use transparency and its corners will be automatically rounded when added to home screen. Declared with:

<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">

Over the years, this icon has become the "default high resolution icon" for many browsers. So you will find it elsewhere, when adding to bookmark, etc.

Android Chrome

Android Chrome relies on the Web App Manifest. Although this manifest is not dedicated to Android Chrome, it is currently its main supporter. So at the moment, it is still quite safe to consider the icons from the Web App Manifest to be for Android Chrome.

As the name suggests, the Web App Manifest is for, well, web apps. But any web site can use it as a way to reference some icons.

Android expects a 192x192 PNG icon, transparency allowed and encouraged.

The manifest is declared with:

<link rel="manifest" href="/icons/site.webmanifest">

Edge and IE 12

Microsoft introduced the browserconfig, an XML document which lists various icons that fit the Metro UI.

The file and background color are declared with:

<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/icons/browserconfig.xml">

Classic desktop browsers

Windows/macOS Chrome, Windows/macOS Firefox, Safari, IE... This is were things are a little more blurry. Historically, there was a single favicon.ico file, still supported. However, most recent browsers rather pick PNG icons, which are lighter. Plus some browsers are not able to select the proper icon in the ICO file (this format can embed several versions of an icon), leading a low resolution icon being wrongly used.

One could be tempted to drop the old favicon.ico entirely. Although I would like to make this leap in RFG, I didn't run the necessary tests to evaluate the impact on the old browsers.

Thus the combo I still recommend today, with favicon.ico embedding 16x16, 32x32 and 48x48 icons:

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

Other browsers

Other browsers may have dedicated icons. For example Coast by Opera is looking for a 228x228 icon. The need to focus on these browsers is not obvious. They usually use the touch icon or other icons when they cannot find "their" icon.

Conclusion

As announced at the beginning, this is exactly what RealFaviconGenerator creates.

Best practice for ordering icon link tags in HTML head

I think you want to know the information only about favicons because your question has the tag favicon. In other case I can write a book about it. :-) I did not find the information about the order of the sizes, but I would do it from smallest to largest order because of saving from server resources.

Internet Explorer 9 uses site icons in the following places:

Address bar (16x16)

New Tab page (32x32)

Taskbar button (32x32)

Pinned site browser UI (24x24)

As you create your Pinned site, you might need additional icons to use in the following ways:

Jump List tasks (16x16)

Thumbnail Toolbar buttons (16x16)

Overlay icons (16x16)

To achieve the best experience in Internet Explorer 9, your icons
should support the following image sizes:

Recommended 16x16, 32x32, 48x48

Optimal 16x16, 24x24, 32x32, 64x64

An ICO file can contain several pictures and Microsoft recommends to put 16x16, 32x32 and 48x48 versions of the icon in favicon.ico. For example, IE will use the 16x16 version for the address bar, and the 32x32 for a task bar shortcut.

You can write the favicon like follows:

<link rel="icon" href="/path/to/icons/favicon.ico">

Modern desktop browsers (IE11, Chrome, Opera, Firefox...) prefer to use PNG icons. The usual expected sizes are 16x16, 32x32 and "as big as possible". For example, MacOS/Safari uses the 196x196 icon if it is the biggest it can find.

The PNG icons are declared with:

<link rel="icon" type="image/png" href="/path/to/icons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-32x32.png" sizes="32x32">
...

Documentation: <link>: The External Resource Link element on MDN.

What are the recommended sizes? Pick your favorite platforms:

Most desktop browsers: 16x16, 32x32, "as big as possible"
Android Chrome: 192x192 (Add to Homescreen on smartphones)
Google TV: 96x96

The additional information about classic and not classic favicons:

Favicons - Best practices (A lot of information a not classic favicons)
Creating custom tiles for IE11 websites on MSDN
Here's Everything You Need to Know About Favicons in 2017
Configuring Web Applications
Microsoft defines the tile picture
Favicon Generator

Better place to store your favicon files?

1) By putting the icons in a sub-directory, you get a few minor drawbacks:

You need to declare favicon.ico and browserconfig.xml in the HTML. Two lines of code you can skip if the icons are in the root folder, because this is where IE looks by convention.
In your logs you will notice 404 with URLs such as /apple-touch-icon-precomposed-120x120.png.
Yandex search engine displays favicons in its SERP. Apparently it finds them only by looking at the root folder (it doesn't consider the link markup). Yandex is used mostly in Russia.

2) You can keep only one Apple Touch icon. It's good enough. Make sure to keep apple-touch-icon.png and make it 180x180. Next release of RealFaviconGenerator will generate only one Touch icon by default.

Oh, and as the author of RealFaviconGenerator, I congratulate you for your excellent choice ;-)

What icons should I create for my website in 2020?

From a technical point of view, a single SVG icon would be a good thing.
I you want you can target each platform individually:

iOS Safari - https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Android Chrome -
https://developers.google.com/web/fundamentals/web-app-manifest/

Edge and IE 12 -
https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/dn320426(v=vs.85)

Desktop browsers -

<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
<link rel="shortcut icon" href="/icons/favicon.ico">

What Is the Best Practice for Creating a Favicon on a Web Site