фавиконы/иконки для популярных устройств/браузеров/ОС

вообще перебор. Для Apple вам нужно только следующее

apple-touch-icon.png (57x57 iPhone and iPod touch)
apple-touch-icon-72x72.png (72x72 iPad 1st and 2nd gen)
apple-touch-icon-114x114.png (114x114 retina iPhone and iPod touch)
apple-touch-icon-144x144.png (144x144 retina iPad)

однако, если вы пропустите какой-либо из них, произойдет следующее:

The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.

  If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.

  If no icons are specified using a link element, the website root directory is searched for icons with the apple-touch-icon... prefix. For example, if the appropriate icon size for the device is 60 x 60, the system searches for filenames in the following order:

apple-touch-icon-76x76.png

apple-touch-icon.png

(извлечено из библиотеки разработчиков iOS)

Таким образом, вы можете легко использовать только 144x144.png, и ничего не произойдет, от вас зависит, будет ли ваш дизайн значка хорошо выглядеть в маленьких размерах или нет, но вы можете полностью использовать только один размер.

Первое решение — файлы в корневом каталоге

Создавать:

• favicon.ico, как обычно, в виде ICO-изображения размером 16x16. Это для старых версий IE.
• apple-touch-icon.png в виде изображения PNG размером 152x152. Это для всех устройств iOS и Android Chrome.
• favicon-196x196.png в виде изображения PNG 196x196. Это для последних настольных браузеров (а также для Android Chrome, также он поддерживает значки Apple Touch на момент написания).
• mstile-144x144.png в виде изображения PNG 144x144. Для Windows 8/IE 10 и Windows 8.1/IE 11.

Поместите их в корневой каталог вашего веб-сайта.

Объявите их с помощью:

<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />

Как вы уже догадались, значки будут уменьшаться при необходимости.

Да, favicon.ico не объявлен. IE найдет его, если он находится в корневом каталоге веб-сайта. То же самое для browserconfig.xml, если вы его используете.

Альтернативное решение: файлы не в корневом каталоге

Создайте те же значки, что и выше.

Разместите их где-нибудь на своем веб-сайте, например. /path/to/icons.

Объявите их с помощью:

<link rel="shortcut icon" href="/path/to/icons/favicon.ico />
<link rel="apple-touch-icon" sizes="152x152" href="/path/to/icons/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="196x196" href="/path/to/icons/favicon-196x196.png" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/path/to/icons/mstile-144x144.png" />

После еще нескольких исследований я пришел к следующему решению:

<link rel="icon" type="image/png" href="favicon.png" />
<!--[if IE]><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><![endif]-->
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<meta name="msapplication-TileColor" content="#111111" />
<meta name="msapplication-TileImage" content="mstile.png" />

Эта страница помогла некоторым http://www.jonathantneal.com/blog/understand-the-favicon/

favicon.png имеет размер 96x96.

favicon.ico 48x48 (или 3 варианта в одном файле)

apple-touch-icon.png — 152x152

mstile.png имеет размер 144x144.

Итак, файлы немного великоваты, но так мне не понадобится куча версий и файлов. Кроме того, файл размером 4-8 КБ не так уж много для загрузки пользователем (даже на телефоне), и любое устройство должно захватить файл и при необходимости уменьшить его размер.

Мое решение:

1) Подготовьте изображение значка в разрешении 310x310 и формате PNG.

2) перейдите на http://faviconit.com, сгенерируйте свои фавиконы, скачайте и разархивируйте, скопируйте все в какую-нибудь папку в проекте (в моем случае root/favicon/)

<link rel="shortcut icon" href="/favicon/favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="/favicon/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32.png">
<link rel="icon" type="image/png" sizes="64x64" href="/favicon/favicon-64.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96.png">
<link rel="icon" type="image/png" sizes="160x160" href="/favicon/favicon-160.png">
<link rel="icon" type="image/png" sizes="192x192" href="/favicon/favicon-192.png">
<link rel="apple-touch-icon" sizes="57x57" href="/favicon/favicon-57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicon/favicon-60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicon/favicon-72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicon/favicon-76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicon/favicon-114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicon/favicon-120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicon/favicon-144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicon/favicon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/favicon-180.png">
<link rel="manifest" href="/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="/favicon/favicon-144.png">
<meta name="msapplication-config" content="/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">