Как создать favicon/фавикон в 2024 году

Оглавление

• Предельно краткая версия
• Длинная версия, где все объясняется
• Максимальный набор favicon/фавикон
  • I. favicon.ico для старых браузеров
  • II. Одна SVG-иконка со светлой/тёмной версией для современных браузеров
  • III. PNG изображение 180x180 для Apple устройств
  • IV. Манифест веб-приложения с PNG-иконками 192x192 и 512x512 для Android устройств
• Мы никого не забыли?
  • Иконка плитки Windows
  • Закреплённая иконка Safari
  • rel="shortcut"
  • Opera Coast
• Как создать наш максимальный набор favicon/фавикон
  • Шаг 1: Подготовка SVG
  • Шаг 2: Создание ICO файла
  • Шаг 3: Создание PNG-изображений
  • Шаг 4: Оптимизация PNG и SVG файлов
  • Шаг 5: Добавление иконок в HTML
  • Бонусный совет: Создайте отдельную иконку для staging
  • Шаг 6: Создание манифеста веб-приложения

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

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

Предельно краткая версия

Вместо десятков иконок вам нужно всего лишь пять иконок и один JSON-файл.

Для браузера, используя HTML:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<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) вашего веб-приложения:

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

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

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

Совершенство достигается не тогда, когда уже нечего добавить, а когда уже нечего отнять.
— Антуан де Сент-Экзюпери, Airman's Odyssey

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

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

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

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

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

Таким образом, я задался целью создать минимальный список favicon/фавикон, способный работать во всех случаях и во всех браузерах — за исключением некоторых крайних случаев. И даже тогда он все равно будет работать, просто не на 100% идеально.

Максимальный набор favicon/фавикон

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

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

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

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

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

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

Нам нужен sizes="32x32" в <link> для .ico файла, чтобы исправить баг Chrome, когда он выбирает ICO файл вместо SVG.

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

SVG — это векторный формат, в котором вместо пикселей описываются кривые. При больших размерах он более эффективен, чем растровые изображения. На данный момент 76% браузеров поддерживают SVG-иконки.

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

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

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

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

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

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

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" }
  ]
}

Мы никого не забыли?

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

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

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

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

Раньше Safari требовал монохромные SVG-значки для закреплённых вкладок. Однако начиная с Safari 12, мы можем использовать обычный favicon для закреплённых вкладок. Даже apple.com больше не использует маск-иконку.

rel="shortcut"

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

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

Предупреждаем, что shortcut не является и никогда не был валидным <link rel=. Прочитайте замечательную статью Mathias Bynens десятилетней давности, объясняющую, почему нам никогда не нужны были shortcut'ы и почему rel="icon" — это просто прекрасно.

Opera Coast

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

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

Как создать наш максимальный набор favicon/фавикон

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

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

Убедитесь, что SVG-изображение квадратное. Откройте исходный файл в системном вьювере и проверьте ширину и высоту изображения. Размер SVG легко изменить с помощью любого SVG-редактора. В Inkscape можно изменить размер документа, выбрав File → Document Properties, а затем отцентрировать логотип с помощью Object → Align and Distribute.

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

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

  <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>

Вы также можете использовать эту технику медиа-запроса с SVG, чтобы добавить (color-gamut: p3) к вашему favicon/фавикон.

• How to use P3 colors with SVGs

Шаг 2: Создание ICO файла

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

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

Если у вас нет GIMP, вы можете установить Inkscape и ImageMagick и конвертировать SVG в ICO в терминале:

inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"
# В линукс/macOs используйте команду
convert ./tmp.png ./favicon.ico
# В Windows используйте команду
magick convert ./tmp.png ./favicon.ico
rm ./tmp.png

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

Чтобы добавить версию иконки размером 16х16:

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

То же самое можно сделать и с помощью ImageMagick:

#В линукс/macOs выполните команду:
convert ./icon-32.png ./icon-16.png ./favicon.ico
#В Windows выполните команду:
magick 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 --export-type="png" --export-width=512 --export-filename="./icon-512.png" ./icon.svg
inkscape --export-type="png" --export-width=192 --export-filename="./icon-192.png" ./icon.svg

Шаг 4: Оптимизация PNG и SVG файлов

Лучшим инструментом для оптимизации SVG является SVGO. Чтобы воспользоваться им, выполните команду:

npx svgo --multipass icon.svg

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

1. Откройте файл icon-512.png в Squoosh.
2. Измените настройку "Compress" на "OxiPNG".
3. Включите "Reduce palette".
4. Установите 64 цвета (Color: 64).
5. Сравните "до" и "после", перемещая ползунок. Если вы видите разницу, увеличьте количество цветов.
6. Сохраните файл.

Повторите эти действия для 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="32x32">
+<link rel="icon" href="/icon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="/apple-touch-icon.png">

Однако мы рекомендуем использовать бандлер для генерации кэш-бустеров (включите хэш файла в имя в качестве метки). Если вы используете Webpack с HtmlWebpackPlugin:

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

2. Добавьте шаблон в параметры плагина:

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

3. Определите HTML-шаблон со ссылками (в примерах используется HtmlWebpackPlugin для включения файлов, но это может быть ваш язык шаблонов по желанию):

   <!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="32x32">
       <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>

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

Бонусный совет: Создайте отдельную иконку для staging

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

Создайте 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="32x32">
+     <link rel="icon" sizes="32x32" 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="32x32">
 <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' }
      ]
    })
  ]

Спасибо, что дочитали! Как видите, благодаря современным веб-стандартам, задача создания нашего "Ultimate Favicon Set" становится довольно простой. И хотя выполнение всех шагов вручную не занимает много времени, наличие автоматизированного инструмента для этого сделает всё ещё более удивительным! Напишите мне в Twitter, если вы хотите создать такой инструмент; я буду очень рад помочь!

Журнал изменений

2023-11-19

• Исправлены команды CLI для генерации ICO и PNG.

2023-07-11

• size="any" для файла ICO был заменён на sizes="32x32", чтобы исправить баг, когда Chrome загружал файлы ICO и SVG.

2021-07-19

• sizes="any" было добавлено в файл ICO, чтобы исправить баг, когда Chrome использовал файл ICO вместо SVG.

2021-01-19

• Добавлены команды Inkscape для преобразования SVG в PNG.

2021-01-15

• Добавлены команды ImageMagick для пользователей, у которых нет GIMP.