Как задать кроссбраузерный и кроссплатформенный favicon?

Question

[Вадим Белкин]

Наткнулся на realfavicongenerator генератор кода для вставки favicon.
Получаю на выходе такой код для вставки

<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">

Для Windows Phone понятно в принципе, а для остальных неужели нужно столько вариантов? Может какие-то варианты уже устаревшие или неактуальные для современных устройств?
Нужна поддержка десктопных браузеров, мобильных (iOS, Android, WP)

Comments

[Viktor Vsk]

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

[Вадим Белкин]

Меня больше всего смущает большое кол-во apple-touch-icon. Неужели они все используются? Думал что можно подключать 1-3 вариации размеров, а устройство само её сжимает до нужного размера.

[Viktor Grachev]

Уважаемый Вадим, недавно столкнулся с этим вопросом) Мы тестировали сайт на различных устройствах и правда нужно прописывать целую кучу иконок под разные устройства) Так что смело создавайте иконки и вставляйте код который сгенерировали у нас все пошло отлично с помощью этого сервиса realfavicongenerator.

Answer 1

[Александр Бухало]

Только вы определяете, сколько необходимо фавиконок делать. В реальности достаточно одной иконки хорошего разрешения, но если вы хотите, чтобы всё было "по шекелям" используйте код генератора. Мы кстати используем www.favicomatic.com

Comments

[Вадим Белкин]

Для apple-touch-icon под все размеры можно указать путь на одну иконку хорошего качества и она будет ресайзится под указанный размер. Вы это имели ввиду говоря что достаточно одной иконки?

[Александр Бухало]

Вадим Белкин: вроде того. Достаточно кинуть иконку с названием apple-touch-icon.png в корень сайта. Но стена кода - более правильное решение по идее, так как для не retina устройств, будет грузиться картинка, которая весит меньше.