Опубликовано: четверг, 11 ноября 2021 г. в 22:38

Как сделать favicon в 2021 году и позже

Источник: «How to Favicon in 2021: Six files that fit most needs»

Пора переосмыслить, как мы готовим набор иконок для современных браузеров и остановить безумие генераторов иконок. Сейчас, фронтэнд разработчику приходится иметь дело с 20+ статических PNG файлов для отображения крошечного логотипа сайта во вкладке браузера или на сенсорном экране. Читайте дальше и вы узнаете, как применить более разумный подход и использовать минимальный набор иконок, который соответствует большинству современных потребностей.

Фавиконки оказались более исчерпывающей темой, поэтому я резюмировал целую статью всего в двух фрагментах кода для тех, кто достаточно пострадал и точно знает, что нужно делать. Тем не менее я рекомендую изучить остальное!

Экстремально короткая версия

Вместо того, что бы обслуживать десятки файлов иконок, всё, что вам нужно - это всего пять файлов иконок и один JSON файл.

Добавьте следующий HTML код, для браузера:

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

И в манифесте вашего веб-приложения:

// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

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

Длинная версия, где всё объяснено

Концепция фавиконки, сокращено от "favorite icon" (любимая иконка), существует с начала 2000-х. Мы все видим эти милые маленькие изображения на панели вкладок вашего браузер, которые помогают различать открытые веб-сайты каждый день. Пользователи ожидают, что у вашего сайта есть своя фавиконка. Это одна из тех мелочей, которая заставляет других людей воспринимать вас серьёзнее.

Даже Apple, у которого всегда были эстетические претензии к иконкам не из Купертино, и годами преуменьшала значение фавиконок в Safari, наконец сдались и теперь отображают их должным образом на всех устройствах.

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

Поэтому изнурительную задачу создания необходимых файлов для постоянно растущего списка экранов и устройств возлагают на генераторы фавиконок. Ни один человек в здравом уме не захочет тратить часы создавая их в ручную. В конце концов, мы здесь для того, что бы создавать веб-сайты, а не для того, что бы делать производителей браузеров счастливыми.

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

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

Идеальный набор фавиконок

Вместо того чтобы создавать множество изображений разного размера, я решил положиться на SVG и масштабирование браузера. Если вас беспокоит производительность, то внесём ясность:

браузеры загружают фавиконки в фоновом режиме, поэтому более крупное изображение фавиконки не повлияет на производительность веб-сайта;
SVG - это отличный способ уменьшить размер изображения, которое изначально не должно быть растровым; для многих логотипов итоговый файл будет намного меньше, чем PNG файл;
Имея всего три PNG изображения в этом минимальном наборе, вы можете использовать дополнительные инструменты для оптимизации их размера. Это решает проблему интернет-пользователей, у которых нет безлимитных тарифных планов.

Вот минимальный набор иконок, к которому я пришёл в своих исследованиях и практике. Он должен работать со всем популярными браузерами и устройствами, как старыми, так и новыми.

I. favicon.ico для устаревших браузеров

Файлы ICO на самом деле имеют структуру каталогов и могут содержать упакованными файлы с разным разрешением. Я рекомендую придерживаться одного изображения 32x32, если только ваша иконка не может быть уменьшена до 16x16 (например, станет слишком размытой). В этом случае вы можете попросить своего дизайнера разработать специальную версию логотипа, адаптированного под маленькую пиксельную сетку.

Не умничайте со структурой каталогов статических ресурсов и блокировщиками кэша. Веб-сайт http://example.com должен иметь фавиконку на http://example.com/favicon.ico. Некоторые инструменты, например программы чтения RSS-лент, просто запрашивают /favicon.ico с сервера и не ищут в другом месте.

Нам нужен size="any" для <link> в .ico файле для исправления бага Chrome выбора ICO файла вместо SVG.

II. Одна SVG-иконка со светлой/тёмной версией для современных браузеров

SVG - это векторный формат, который описывает кривые вместо пикселей. На больших размерах он более эффективен, чем растровые изображения. На момент написания этой статьи (2020 год) 72% всех браузеров (2021 год 75.22%) поддерживают SVG-иконки.

Ваша HTML-страница должна содержать тэг <link> в <head> с rel="icon", type="image/svg+xml" и href со ссылкой на SVG-файл в качестве атрибута.

SVG - это файл XML-формата, который может содержать тэг <style> описывающий CSS. Как и любой другой CSS, он может содержать медиа-запросы, такие, как @media (prefers-color-scheme: dark). Это позволит вам переключать одну и туже иконку между светлой и тёмной системными темами.

III. 180x180 PNG изображение для устройств Apple

Иконка Apple Touch - это изображение, которое устройства Apple будут использовать, если вы добавите веб-страницу в качестве ярлыка на домашний экран iPhone или iPad. На вашей HTML-странице должен быть тэг <link rel="apple-touch-icon" href="apple-touch-icon.png"> в секции <head>.

Для iPad с версии iOS 8+ требуется разрешение 180x180 пикселей. Другие устройства уменьшат изображение под своё разрешение, но если мы предоставим источник с достаточно хорошим качеством, уменьшение масштаба не повредит конечному пользователю (я вернусь к этому немного позже).

Небольшое примечание: иконка Apple Touch будет выглядеть лучше, если вы добавите отступ в 20 пикселей вокруг иконки и установите фоновый цвет. Вы можете использовать любой графический редактор.

IV. Манифест веб-приложения с PNG иконками размером 192x192 и 512x512 для Android устройств

Манифест веб-приложения это JSON файл со всеми подробностями, что бы браузер мог установить ваш сайт в качестве системного приложения. Формат был разработан Google по PWA инициативе.
Ваша HTML страница должна содержать тэг <link rel="manifest" href="path.webmanifest"> указывающий на файл манифеста.
В манифесте должно быть поле иконки связанное с двумя иконками: 192x192 отображаемой на экране в качестве иконки приложения и 512x512, который будет использоваться как заставка при загрузке PWA.

{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Мы кого-нибудь забыли?

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

Иконка плитки Windows

Microsoft Edge раньше поддерживал специальный формат иконки для закрепления веб-сайта в меню пуск. В последних версиях Windows это не требуется.

Закреплённая иконка Safari

Раньше в Safari было отдельное требование для отображения иконки на закреплённой вкладке. Однако начиная с Safari 12, мы можем использовать обычную фавиконку для закреплённой вкладки. Даже apple.com больше не использует rel="mask-icon".

rel=”shortcut”

Множество (уже устаревших) учебников подключают favicon.ico в HTML так:

<link rel="shortcut icon" href="/favicon.ico" sizes="any">

Имейте в виду, что shortcut не является и никогда не был определением ссылки. Прочтите замечательную статью Матиаса Биненса (Mathias Bynens) написанную десять лет назад, в которой объясняется почему нам не нужно использовать shortcut, а вполне хватит rel="icon".

Яндекс Табло

Яндекс.Браузер - это браузер на основе Chromium от крупнейшей поисковой системы России. В России он занимает 20% рынка. У него есть приятная функция, которая позволяет веб-сайту отображать данные в реальном времени в виджетах на главном экране с помощью специального JSON манифеста, предоставленного ссылкой yandex-tableau-widget. Однако эта функция оказалась не очень популярной, и Яндекс удалил техническую документацию на неё со своего сайта. Обычные манифесты работают так же хорошо.

Opera Coast

Opera Coast - экспериментальный браузер для iOS, раньше требовал специальной иконки 228x228. Браузер покинул Apple Store в 2017, и я сомневаюсь, что он пережил несколько обновлений iOS

Теперь, когда мы распрощались с павшими товарищами, давайте посмотрим, как создать идеальный набор фавиконок для тех, кто выстоял.

Как создать Идеальный набор фавиконок

Вот как создать наш идеальный, минималистичный набор фавиконок за шесть быстрых шагов. Всё, что вам нужно сделать сначала - это SVG файл с логотипом, который вы будете использовать.

Шаг 1: Подготовка SVG

Убедитесь, что SVG изображение квадратное. Откройте исходный файл в системном средстве просмотра и проверьте ширину и высоту изображения. Размер SVG легко настроить в любом SVG редакторе. В Inkscape, вы можете изменить размер документа в меню «Файл» → «Свойства документа» и центрировать логотип выбрав «Объект» → «Выровнять и расставить».

Сохраните ваш файл, как icon.svg. Теперь немного доработаем наш SVG файл, что бы он хорошо сочетался с современными системными темами. Спросите своего дизайнера, как следует инвертировать цвета в тёмной теме (для чёрно-белых логотипов, вы просто инвертируете цвет).

Теперь, откройте ваш SVG файл в текстовом редакторе. Найдите <path> с тёмной заливкой fill или без неё. Добавьте CSS медиа-запрос, который запускается при изменении темы и меняет значение fill на желаемые цвета:

  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
+   <style>
+     @media (prefers-color-scheme: dark) {
+     .a { fill: #f0f0f0 }
+     }
+   </style>
-   <path fill="#0f0f0f" d="…" />
+   <path class="a" fill="#0f0f0f" d="…" />
  </svg>

Шаг 2. Создания ICO файла

Откройте свой icon.svg в редакторе для растровой графики. Рекомендую GIMP, он бесплатный и мульти-платформенный.

Принять рендеринг SVG в растр. Установить высоту и ширину в 32 пикселя. Экспортируйте файл в favicon.ico, используя 32 bpp (бит на пиксель), 8-бит альфа-канала, без настроек палитры.

Если у вас нет GIMP, вы можете установить Inkscape и ImageMagic и преобразовать SVG в ICO в терминале:

inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
# В Windows выполните: `magick convert ./tmp.png ./favicon.ico`
convert ./tmp.png ./favicon.ico
rm ./tmp.png

Уменьшите размер до 16x16 пикселей и проверьте видимость иконки. Если изображение стало слишком размытым, лучше попросить вашего дизайнера сделать индивидуальный крошечный вариант логотипа.

Для включения отдельной версии 16x16 в файл иконки:

Откройте favicon.ico с иконкой 32x32.
Создайте новый слой с размером 16x16.
Разместите версию иконки 16x16 в этот слой.
Экспортируйте файл. GIMP сохранит каждый слой как отдельную версию иконки.

Или вы можете сделать то же самое в ImageMagick:

convert ./icon-32.png ./icon-16.png ./favicon.ico

Шаг 3. Создание PNG изображений

Снова откройте исходный SVG файл в редакторе растровой графики и создайте изображение размером 512x512 пикселей. Экспортируйте его как icon-512.png. Масштабируйте изображение до 192x192 пикселя и экспортируйте его в icon-192.png. Теперь масштабируйте само изображение до 140x140 пикселей, а размер холста установите в 180x180 пикселей и экспортируйте как apple-touch-icon.png.

Или вы можете сделать то же самое в Inkscape:

inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"
inkscape ./icon.svg --export-width=192 --export-filename="./icon-192.png"

Шаг 4. Оптимизация SVG

Лучший инструмент для оптимизации SVG - SVGO. Выполните:

npx svgo --multipass icon.svg

Squoosh - отличное веб-приложение для оптимизации растровых изображений.

Откройте ваш icon-512.png в Squoosh.
Установите Compress на OxiPNG.
Включите "Reduce palette".
64 цвета
Сравните до/после двигая слайдер. Если вы замечаете разницу, увеличьте количество цветов в палитре.
Сохраните файл.

Повторите шаги для icon-192.png и apple-touch-icon.png.

Шаг 5. Добавить иконки в HTML

Вам нужно добавить ссылки на favicon.ico и apple-touch-icon.png в ваш HTML.

Для статического HTML:

  <title>My website</title>
+ <link rel="icon" href="/favicon.ico" sizes="any">
+ <link rel="icon" href="/icon.svg" type="image/svg+xml">
+ <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Однако мы рекомендуем использовать бандлер. Если вы используете Webpack с html-webpack-plugin:

Создайте шаблон index.html

Добавьте шаблон в опции плагина:

new HtmlWebpackPlugin({ template: "./view/index.html" });

Задайте HTML шаблон со ссылками (в пример используется ERB для подключения файлов, но вы можете использовать свой язык разметки шаблонов):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My website</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="/favicon.ico" sizes="any">
    <link rel="icon" type="image/svg+xml" href="<%=
      require('./icon.svg').default
    %>">
    <link rel="apple-touch-icon" href="<%=
      require('./apple-touch-icon.png').default
    %>"
   >
  </head>
  <body></body>
</html>

Используйте copy-webpack-plugin для копирования favicon.ico без добавления хэша к имени фала.

Бесплатный совет: Отдельные иконки для этапов

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

Создайте favicon-dev.ico с тем же логотипом, но инвертированными цветами (или сделайте что-то другое заметное для вас). То же самое для SVG, создайте icon-dev.svg.

Теперь, замените иконки в вашем HTML шаблоне в зависимости от условия process.env.NODE_ENV === 'production':

  <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>My website</title>
        <meta name="viewport" content="width=device-width,initial-scale=1">
-       <link rel="icon" href="/favicon.ico" sizes="any">
+       <link rel="icon" sizes="any" href="<%=
+         process.env.NODE_ENV === 'production'
+           ? '/favicon.ico'
+           : require('./favicon-dev.ico').default
+       %>">
        <link rel="icon" type="image/svg+xml" href="<%=
-         require('./icon.svg').default
+         process.env.NODE_ENV === 'production'
+           ? require('./icon.svg').default
+           : require('./icon-dev.svg').default
      %>">
      <link rel="apple-touch-icon" href="<%=
        require('./apple-touch-icon.png').default
      %>">
    </head>
    <body></body>
  </html>

Шаг 6. Создайте манифест веб-приложения

Для статического HTML, создайте JSON файл с именем manifest.webmanifest:

{
  "name": "My website",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

Включите его в ваш HTML:

  <title>My website</title>
+ <link rel="manifest" href="/manifest.webmanifest">
  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

Для webpack, вы можете использовать webpack-pwa-manifest плагин:

  plugins: [
    …,
    new WebpackPwaManifest({
      name: 'My website',
      icons: [
        { src: resolve('./icon-192.png'), sizes: '192x192' },
        { src: resolve('./icon-512.png'), sizes: '512x512 }
      ]
    })
  ]

Спасибо за чтение! Как вы видите, с современными веб-стандартами задача создания идеального набора фавиконок становится довольно простой.