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

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

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

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

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

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

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. К сожалению, то, что пользователи воспринимают как одну иконку, на самом деле их большое количество.

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

Как создавать 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.

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 цвет на нужный вам:

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

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

Просмотров:

Добавить комментарий