Главная » Статьи » Как создавать Favicon в 2021 году

Как создавать Favicon в 2021 году

Как создавать Favicon в 2021 году

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

Я также резюмировал всю статью всего в двух фрагментах кода для тех, кто достаточно пострадал и точно знает, что делать. Тем не менее, я рекомендую изучить остальное!

Чрезвычайно короткая версия

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

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

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

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

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

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

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

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

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

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

Как создавать Favicon в 2021 году

Набор иконок, созданный популярным онлайн-генератором

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

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

Окончательная настройка Favicon

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

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

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

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

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

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

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

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

2. Одна SVG favicon со светлой / темной версией для современных браузеров

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

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

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

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

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

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

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

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

Манифест веб-приложения — это файл JSON со всей информацией для браузера, который может установить ваш веб-сайт в качестве системного приложения. Формат был разработан Google по инициативе PWA.

На HTML-странице должен быть тег <link rel=»manifest» href=»path.webmanifest»> со ссылкой на файл манифеста.

В манифесте должно быть поле icon, которое связано с двумя иконками: 192 × 192, отображаемыми на главном экране, и 512 × 512, которые будут использоваться в качестве заставки при загрузке PWA.

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

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

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

Windows Tile Icon

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

Safari Pinned Icon

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

rel=shortcut

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

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

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

Yandex Tableau

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

Opera Coast

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

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

Как создать Ultimate Favicon Set

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

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

Откройте favicon.ico с 32 × 32.

Создайте новый слой размером 16 × 16.

Поместите на этот слой иконку размером 16 × 16.

Экспортируйте файл. GIMP сохранит каждый макет как отдельную версию значка.

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

Снова откройте исходный файл SVG в редакторе растровой графики и создайте изображение размером 512 × 512. Экспортируйте его как icon-512.png.

Масштабируйте изображение до 192 × 192 и экспортируйте его в формат icon-192.png. Теперь масштабируйте само изображение до 140 × 140, установите размер холста 180 × 180 и экспортируйте как apple-touch-icon.png.

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

Лучший инструмент для оптимизации SVG — это SVGO:

npx svgo --multipass icon.svg

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

Откройте свой icon-512.png в Squoosh.

Измените параметр сжатия на OxiPNG.

Включите «Уменьшить палитру».

Установите 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">
+ <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"> <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 — отличный способ отличить производственную среду от промежуточной. Я считаю использование альтернативной иконки для промежуточной версии очень эффективным способом избежать дорогостоящих недоразумений.

Создайте 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">
+ <link rel="icon" 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"> <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('./icon512.png'), sizes: '512x512 } ] }) ]

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

Автор: Andrey Sitnik

Источник: evilmartians.com

Редакция: Команда webformyself.