Готовим favicon правильно

Современный способ создания favicon

ru
article
favicon
WEB_development

Post added by nazares on: Fri 24 Feb 2023 10:10 pm 23 1.2k

Favicon (сокр. от англ. FAVorite ICON — «любимая иконка») — значок веб-сайта или веб-страницы. Отображается браузером во вкладке перед названием страницы, и в качестве картинки рядом с закладкой, а также в адресной строке в некоторых браузерах.

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

Если кратко (всего 6 файлов Карл )

Вместо десятков значков нам понадобится всего 5 и один JSON файл.

Подключение в HTML:

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<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
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

И это все! Но если вы желаете подробнее разобраться в вопросе, читайте далее...

TL;DRмногабукв или как создать набор иконок для сайта (подробно)

Термин Favicon (сочетание слов favorite и icon) впервые появился в Internet Explorer 5.0. Он относится к значку веб-страницы, который появлялся в старых браузерах в адресной строке рядом с URL-адресом или в избранном. Первоначально favicon нужно было размещать в корневом каталоге веб-сайта под именем favicon.ico, а его размеры обычно составляли 16x16 пикселей или 32x32 пикселей. В декабре 1999 года фавикон был стандартизирован W3C в рекомендации для HTML 4.01.

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

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

Рисунок 1: Набор иконок созданный онлайн генератором.

Универсальный набор иконок

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

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

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

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

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

Нужен файл *.ico* размером 32x32 пикселей для устранения ошибки браузера Chrome, когда он выбирает файл ICO вместо SVG.

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

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

HTML-страница должна иметь тег <link> в <head> с rel="icon", type="image/svg+xml" иhref, содержащим ссылку на файл SVG в качестве атрибутов. SVG — это формат XML, который может содержать тег <style> для описания CSS. Как и любой CSS, он может содержать медиа-запросы, например @media (предпочитает цветовую схему: темную). Это позволит вам переключать один и тот же значок между светлой и темной системными темами.

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

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

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

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

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

Манифест веб-приложения — это JSON файл, содержащий всю информацию, необходимую браузеру для установки вашего веб-сайта в качестве системного приложения. Этот формат появился в Google благодаря инициативе PWA.
HTML-страница должна иметь тег <link rel="manifest" href="manifest.webmanifest"> со ссылкой на файл манифеста.
В манифесте должно быть поле значка, которое связано с двумя значками: 192×192 для отображения на главном экране и 512×512, которое будет использоваться в качестве заставки при загрузке PWA.

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

Итак, как же создать универсальный, минимальный набор иконок?

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

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

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

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

Откроем SVG файл в текстовом редакторе. Найдем <path> с темной или отсутствующей заливкой(fill). Добавим CSS медиа запрос @media, который запустит изменения темы и изменит заливку 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>

Step 2: Создание ICO файла.

С помощью терминала преобразуйте SVG в ICO:

inkscape ./icon.svg --export-width=32 --export-filename="./tmp.png"

Чтобы включить отдельную версию значка размером 16×16 используйте ImageMagick:

convert ./icon-32.png ./icon-16.png ./favicon.ico

Step 3: Создание PNG изображений.

Масштабируйте SVG на 512x512 пикселей и экспортируйте его как icon-512.png, еще раз отмасштабируйте на 192x192 пикселей и экспортируйте как icon-192.png, потом еще раз на 140x140 пикселей, потом измените размер холста на 180x180 пикселей и экспортируйте как apple-touch-icon.png.

inkscape ./icon.svg --export-width=512 --export-filename="./icon-512.png"
inkscape ./icon.svg --export-width=192 --export-filename="./icon-192.png"
inkscape ./icon.svg --export-width=140 --export-filename="./tmp.png"
convert ./temp.png -background none -gravity center -extent 180x180 ./apple-touch-icon.png
rm  ./tmp.png

Step 4: Оптимизация PNG and SVG файлов.

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

npx svgo --multipass icon.svg

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

Откройте icon-512.png в Squoosh.
Измените настройки сжатия (Compress) на OxiPNG
Включите “Reduce palette”.
Установите 64 цвета.
Сравните до/после, перемещая слайдер. Если вы видите разницу, увеличьте количество цветов.
Сохраните файл.

Повторите эти шаги для icon-192.png and apple-touch-icon.png.

Step 5: Добавление иконок в 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">

Step 6: Создание web app manifest

Создайте файл 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">

Thanks for reading and Have fun!