Favicon

Що це таке

Favicon — це піктограма, яку вебсайт оголошує своєю, щоб браузер міг показати її на вкладці, в адресному рядку, поруч із закладкою та в історії переглядів. Назва походить від англійського «favorites icon», тобто «піктограма обраного»: так називалося меню закладок в Internet Explorer, першому браузері, який почав такі піктограми шукати. Українською кажуть також «фавікон» або «іконка вкладки», а в множині англійською пишуть favicons. У розмітці HTML її оголошують елементом link, атрибут rel якого дорівнює icon; старіша розмітка пише shortcut icon, і стандарт досі приймає цей варіант з історичних причин.

Сторінка може оголосити кілька піктограм одночасно, кожну зі своїм type, значенням sizes і, за потреби, медіазапитом у media, а браузер обирає ту, що пасує до місця, де він малює. Розміри задають у пікселях пристрою, тож 32x32 означає 32 фізичні точки, а ключове слово any зарезервоване для масштабованого формату на кшталт SVG. Якщо два кандидати однаково придатні, перемагає той, що оголошений останнім. Коли сторінка не оголошує жодної піктограми, браузер, який отримав її через HTTP або HTTPS, усе одно може запитати /favicon.ico у корені хоста: це звичка кінця 1990-х, яку стандарт HTML тепер записує як дозволену поведінку.

Файл .ico, що стоїть за цією звичкою, — контейнер, а не одне зображення. Один файл може містити кілька растрових кадрів різного розміру, і браузер бере той, що підходить; його зареєстрований медіатип — image/vnd.microsoft.icon. Сьогодні звичайні альтернативи — PNG і SVG, а в принципі дозволено будь-який формат, який браузер уміє декодувати: одна зі сторінок цього сайту оголошує піктограму у WebP.

Favicon — найменший член родини зображень, які легко переплутати. Для домашнього екрана Apple використовує окрему PNG-піктограму apple-touch-icon, яку iOS шукає під її власним ім’ям. Встановлений вебдодаток зазвичай бере піктограми з маніфесту вебдодатка, зокрема варіант «maskable», намальований із безпечним полем, щоб платформа могла обрізати його до кола чи заокругленого квадрата. Велике зображення, яке показує месенджер, коли хтось вставляє посилання, — це картка для поширення; її задає зовсім інша розмітка, і жоден браузер не ставить її на вкладку.

Чому це важливо

Рішення, яке насправді постає перед командою, звучить так: скільки файлів піктограм випускати, з якого джерела і хто стежитиме, щоб вони не розходилися. Схоже на дрібницю дизайну. На практиці ж це невеликий шматок інфраструктури, що зачіпає кожну платформу, де з’являється сайт.

Упізнаваність — те, що першим бачить замовник. На 16 CSS-пікселях у рядку з двадцяти вкладок favicon є єдиним шматком бренду, на який людина дивиться, працюючи деінде, а стандартний значок документа на цьому місці виглядає як сайт, який ніхто не довів до кінця. Та сама піктограма позначає закладку, запис в історії, а в кількох пошукових системах — і сам результат пошуку.

Вартість і коректність — те, що бачить розробник. Кожна поверхня має власну домовленість: ICO чи PNG для вкладки, PNG на 180 пікселів для домашнього екрана Apple, набір квадратних PNG у маніфесті для встановлення, а ще темна смуга вкладок, на якій темний знак зникає. Швидкий шлях — генератор favicon, що видає тридцять файлів і шматок розмітки для вставлення. Це працює, проте вставлена розмітка приносить із собою чужі твердження, і значення sizes, яке описує чужі файли, хибне з першого дня.

Кешування — те, чого ніхто не планує. Браузери зберігають піктограми значно довше, ніж сторінки, а стандарт прямо каже, що вони не зобов’язані оновлювати піктограму, коли змінюється список оголошених. Тож новий логотип доходить до відвідувачів, що повертаються, за розкладом браузера, а не сайту. Запит навмання до кореня має власну ціну: кожен перший візит запитує /favicon.ico, тож сайт без такого файлу пише в журнал 404 на кожного нового читача, а сайт за входом може відповісти на цей запит вікном, що вимагає пароль.

Який формат обрати? SVG — один маленький файл, що масштабується до будь-якого розміру й уміє змінювати кольори через prefers-color-scheme. Детальний малюнок, натомість, краще переживає зменшення як растр, а ICO лишають для програм, які читають лише його. Більшості сайтів потрібні і favicon, і піктограма apple-touch, бо кожна платформа читає тільки свою.

Як це виглядає на практиці

Піктограми цього сайту походять із малюнків, а не з генератора. Візуальну ідентичність побудовано з двох рукотворних малюнків, і скрипти виробляють усе похідне від них, зокрема набір favicon у потрібних розмірах і дотикові піктограми. Генерація — це завдання, яке може запустити будь-хто. Перевірка застарілості порівнює час зміни кожного похідного ресурсу з часом його джерела і падає, коли похідний файл старіший, а похідні файли ніколи не редагують вручну. Сторінка сама називає ціну: жорстку залежність від набору інструментів.

Сторінка подяк називає інструменти цього конвеєра: Python, що керує ImageMagick і генерує піктограми сайту з одного зображення знака бренду.

Власні шаблони сайту показують рішення, ухвалені далі. Кожна сторінка оголошує PNG на 180 пікселів і ICO з трьома кадрами: 16, 32 і 48 пікселів. Колись на вкладці була масивна шестірня, бо вважалося, що проста силуетна форма переживе 16 пікселів краще за детальний малюнок. Коли ж обидва варіанти показали поруч на світлій і темній смузі вкладок, детальний малюнок витримав перевірку, а шестірня — ні, тож тепер на вкладці растрове зображення мозку, той самий знак, що й усюди на сайті. Маніфест перелічує ті самі два кореневі файли, а його набір піктограм зчитується з диска, з тек, у які пише генератор, і розмір кожної береться з назви файлу, тож новий розмір з’являється у списку без того, щоб хтось його вписував.

Де виникають проблеми

Стара піктограма переживає ребрендинг. Сайт викладає новий файл під тим самим ім’ям, а відвідувачі, що повертаються, тижнями бачать старий знак, бо браузер тримає власну копію й оновлювати її заради сторінки не мусить. Публікуйте нову піктограму під новим іменем файлу, оновіть елементи link, а кореневий /favicon.ico вважайте запасним варіантом, який змінюється останнім.

Оголошені розміри описують інший файл. Розмітка, скопійована з прикладу, перелічує розміри, яких файл ніколи не містив, і браузер обирає кандидата за хибною заявою та масштабує не той кадр. Маніфест цього сайту колись стверджував, що його ICO містить сім кадрів, хоча генератор записував три, і перелічував для SVG три піксельні розміри, яких векторний файл не має. Пишіть sizes із самого файлу або виводьте значення з того, що записав генератор.

Вгаданий шлях повертає щось інше, ніж піктограму. iOS запитує /apple-touch-icon.png у корені хоста, коли сторінка не оголошує піктограми Apple, а браузери так само чинять із /favicon.ico. На хості, де невідомі шляхи потрапляють до іншого застосунку, такий запит отримує переспрямування, сторінку входу або — як в одній зі сторінок цього сайту, що віддається з другого хоста, — 401. Явне оголошення піктограми перетворює здогадку на запит файлу, який справді існує.

Знак зникає на темній смузі вкладок. Чорний логотип на прозорому тлі зливається з вкладками, коли браузер малює їх темно-сірими. Перш ніж обрати піктограму, покажіть її і на світлій, і на темній смузі, а SVG-піктограмі дайте правило prefers-color-scheme або растровій — власне тло.

Деталі на 16 пікселях перетворюються на кашу. Повний логотип із написом, зменшений до розміру вкладки, стає плямою. Перевіряйте справжній розмір на справжній вкладці, а не макет на 800%, і беріть ту частину знака, яка там ще читається.

Що почитати далі

• HTML Standard: тип посилання «icon» — як браузер обирає серед оголошених піктограм, що означає sizes і коли він може сам запитати /favicon.ico.
• IANA: image/vnd.microsoft.icon — реєстрація медіатипу формату ICO.
• Image Resource — визначення піктограми від W3C із полями src, sizes і type, яке повторно використовують маніфести.
• Apple: Configuring Web Applications — домовленість про apple-touch-icon і пошук у корені, до якого вдається iOS.