Какой размер для фавиконок использовать?

Чтобы далеко не ходить, сразу укажу, что остановился я на трех таких размерах для фавиконок, которые подходят всем браузерам и всем экранам:

<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="shortcut icon" href="favicon.ico">

Для сайта на CMS WordPress это может выглядеть так:

<link rel="apple-touch-icon" sizes="180x180" href="<?php bloginfo('template_directory'); ?>/images/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" sizes="32x32" href="<?php bloginfo('template_directory'); ?>/images/favicon/favicon-32x32.png">
<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon/favicon.ico">
  1. apple-touch-icon-180x180.png — сразу для всех современных гаджетов и больших экранов, эту иконку будет использовать и iOs, и Android
  2. Для обычных браузеров, favicon-32x32.png — средних размеров, можно и больше, но устройства, которые могут использовать большего размера фавикон, возьмут первый вариант apple-touch-icon-180x180.png
  3. Все же еще где-то используют IE9 и младше, поэтому приходится использовать такой устаревший формат как favicon.ico, по идее, можно сделать размер и 32х32, но оставим 100% поддерживаемый 16х16.

До этого я использовал такие фавиконки:

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">

Но все эти иконки успешно должна заменить одна apple-touch-icon-180x180.png.

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

На iPhone старых версий размер 180х180 просто сожмется до нужных пропорций.

Если же следовать требованиям всех браузеров и гаджетов, тогда придется делать под каждый формат свою иконку:

<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="favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="manifest.json">
<meta name="apple-mobile-web-app-title" content="JoJo Productions">
<meta name="application-name" content="JoJo Productions">
<meta name="msapplication-TileColor" content="#00aba9">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml">
<meta name="theme-color" content="#555555">
<link rel="shortcut icon" href="favicon.ico">

Но самый первый вариант с тремя фавиконами успешно заменяет кучу этих иконок.

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

Фиксированное меню при прокрутке страницы только для мобильных

Немного другая вариация фиксированного меню. Меню фиксируется к верхней части экрана только на мобильных устройствах….

[CSS Animation] PCPP Loading Boxes

Красивая и не слишком сложная анимация, например, для загрузочной страницы сайта. HTML <h1 class="intro">[CSS animation]…

Фиксированное меню при прокрутке страницы

Один из множества примеров сделать фиксированное меню при прокрутке. Пример упрощен, потому что хедер изначально…

Вертикальные параллакс-эффекты при прокрутке страницы с помощью Stellar.js

Делаем параллакс-эффект для больших блоков с фоном и для отдельных элементов на сайте. Подключаем jQuery…

Ответить