Как создать favicon для сайта в 2025 году

Опубликовано: Обновлено:
Отдавайте предпочтение SVG, а не PNG, доверяйте браузерам в вопросах уменьшения масштаба, отказывайтесь от непонятных форматов — это полное, исчерпывающее руководство по favicon для современного веба. Включает шаги для статического HTML и Webpack.

Favicon (фавикон) — небольшая, но значимая часть сайта, отображающаяся во вкладке браузера рядом с названием. Фавикон помогает пользователям быстро узнавать сайт среди множества открытых вкладок и формирует первое визуальное впечатление. В статье рассмотрим, как создать современный favicon с поддержкой SVG, PNG и webmanifest, и почему важно уделить этому внимание даже в 2025 году.

Пришло время переосмыслить то, как мы готовим набор фавиконок для современных браузеров, и прекратить безумие генераторов иконок. В настоящее время разработчикам фронтенда приходится иметь дело с 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-х годов. Все мы видели эти маленькие симпатичные изображения в строке вкладок браузера, помогающие нам различать открытые сайты. Пользователи ожидают, что у вашего сайта будет иконка. Это одна из тех мелочей, которые заставляют других людей воспринимать вас всерьёз.

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

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

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

Набор favicon, созданных с помощью популярного онлайн-генератора
Набор favicon, созданных с помощью популярного онлайн-генератора

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

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

Максимальный набор иконок для сайта

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

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

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

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

Не мудрите со структурой папок статических ресурсов и кэш-бустеров. Сайт https://example.com должен содержать фавикон по адресу 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 устройств

{
  "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 требовал монохромные SVG-значки для закреплённых вкладок. Однако начиная с Safari 12, можно использовать обычный фавикон для закреплённых вкладок. Даже apple.com больше не использует маск-иконку.

rel="shortcut"

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

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

Opera Coast

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

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

Как создать наш максимальный набор 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) к фавикон.

Шаг 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' }
      ]
    })
  ]

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

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

2023-11-19

2023-07-11

2021-07-19

2021-01-19

2021-01-15

Комментарии


Предыдущая Статья

Как использовать CSS свойство gap

Следующая Статья

6 лучших практик, советов и приёмов Tailwind CSS на 2024 год