Я также резюмировал всю статью всего в двух фрагментах кода для тех, кто достаточно пострадал и точно знает, что делать. Тем не менее, я рекомендую изучить остальное!
Чрезвычайно короткая версия
Вместо того, чтобы обслуживать десятки иконок, вам нужно всего лишь пять и один файл 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»>
1234 | <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»> |
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
И в манифесте веб-приложения:
JavaScript
// manifest.webmanifest
{
«icons»: [
{ «src»: «/192.png», «type»: «image/png», «sizes»: «192×192» },
{ «src»: «/512.png», «type»: «image/png», «sizes»: «512×512» }
]
}
1234567 | // manifest.webmanifest{ «icons»: [ { «src»: «/192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/512.png», «type»: «image/png», «sizes»: «512×512» } ]} |
Вот и все. Если вы хотите знать, как я пришел к этому, на какие компромиссы мне пришлось пойти и как пошагово собрать подобный набор с нуля, следите за остальной частью статьи.
Длинная версия, где все объясняется
Концепция favicon, сокращенно от “favorite icon”, существует с начала 2000-х годов. Мы все видим эти милые маленькие изображения на панели вкладок браузера, которые помогают различать открытые веб-сайты каждый день. Пользователи ожидают, что ваш сайт будет иметь favicon. Это одна из тех мелочей, которые заставляют других относиться к вам серьезно.
Даже Apple, которая всегда имела некоторую эстетическую настороженность к иконками, пришедшим не из Купертино, и многие годы игнорировала их в Safari, наконец сдалась и теперь правильно отображает их на всех своих устройствах.
Если у вас есть общедоступный веб-сайт, на нем должна быть favicon. К сожалению, то, что пользователи воспринимают как одну иконку, на самом деле их большое количество.
Таким образом, принято переложить изнурительную задачу создания необходимых файлов для постоянно растущего списка экранов и устройств на инструменты генератора иконок. Ни один человек в здравом уме не захочет часами создавать их вручную. В конце концов, мы здесь для того, чтобы создавать веб-сайты, а не радовать производителей браузеров.
Как создатель 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.
JavaScript
{
«icons»: [
{ «src»: «/192.png», «type»: «image/png», «sizes»: «192×192» },
{ «src»: «/512.png», «type»: «image/png», «sizes»: «512×512» }
]
}
123456 | { «icons»: [ { «src»: «/192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/512.png», «type»: «image/png», «sizes»: «512×512» } ]} |
Мы кого-нибудь забыли?
Конечно, есть и другие варианты фавиконов, некоторые из которых довольно неясны, поэтому давайте посмотрим, как наша установка с ними справится. Возможно, пора попрощаться с менее удачными форматами.
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»>
1 | <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 цвет на нужный вам:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
<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>
123456789 | <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:
JavaScript
npx svgo —multipass icon.svg
1 | 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»>
1234 | <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. Добавьте шаблон в параметры плагина:
JavaScript
new HtmlWebpackPlugin({ template: «./view/index.html» });
1 | 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>
1234567891011121314151617 | <!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>
123456789101112131415161718192021222324 | <!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:
JavaScript
{
«name»: «My website»,
«icons»: [
{ «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» },
{ «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» }
]
}
1234567 | { «name»: «My website», «icons»: [ { «src»: «/icon-192.png», «type»: «image/png», «sizes»: «192×192» }, { «src»: «/icon-512.png», «type»: «image/png», «sizes»: «512×512» } ]} |
Подключите его в 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»>
12345 | <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:
JavaScript
plugins: [
…,
new WebpackPwaManifest({
name: ‘My website’,
icons: [
{ src: resolve(‘./icon-192.png’), sizes: ‘192×192’ },
{ src: resolve(‘./icon512.png’), sizes: ‘512×512 }
]
})
]
12345678910 | plugins: [ …, new WebpackPwaManifest({ name: ‘My website’, icons: [ { src: resolve(‘./icon-192.png’), sizes: ‘192×192’ }, { src: resolve(‘./icon512.png’), sizes: ‘512×512 } ] }) ] |
Спасибо за прочтение! Как видите, с современными веб-стандартами задача создания окончательного набора значков становится довольно простой. И хотя выполнение этих шагов вручную не займет у вас много времени, наличие автоматизированного инструмента, выполняющего то же самое, будет еще более удивительным!
Автор: Andrey Sitnik