Сделать favicon — это три шага: подготовить квадратную картинку, конвертировать её в файл ICO и добавить одну строку <link> в HTML. Сама конвертация работает в вашем браузере с нашими конвертерами изображений в ICO — без загрузок и аккаунтов. Вся работа занимает минут пять. Вот каждый шаг с деталями, которые действительно важны.
Что такое favicon на самом деле
Favicon — это маленькая иконка, привязанная к вашему сайту. Она появляется во вкладках браузера, в списках закладок, в истории посещений, а в некоторых браузерах — рядом с URL. При 16×16 пикселях в панели вкладок это часто единственный брендинг, который посетитель видит, открыв восемь вкладок.
Классическая фавиконка — это файл .ico, и у ICO есть одно важное здесь свойство: это контейнер. Один файл ICO может хранить одно и то же изображение в нескольких разрешениях — обычно 16×16, 32×32 и 48×48 — а браузер выбирает подходящее под контекст. Панель вкладок берёт 16, ретина-дисплей — 32, диалог ярлыка Windows — 48. Устройство контейнерного формата разбирает наш глубокий разбор формата ICO.
Конвенция восходит к Internet Explorer 5 образца 1999 года, который автоматически запрашивал /favicon.ico у каждого посещённого сайта. Имя файла прижилось. А охват иконки с тех пор вырос: Google показывает фавиконки рядом с результатами в мобильном поиске, так что этот квадрат в 16 пикселей давно стал частью вашего поискового сниппета, а не просто украшением вкладки.
Шаг 1: подготовьте исходную картинку
Исходник решает, будет ли фавиконка чёткой или превратится в пятно. Три правила:
Сделайте квадратной. Фавиконки квадратные. Если ваш логотип широкий, сначала обрежьте его или дополните до квадратного холста, иначе конвертация его сплющит.
Держите простым. При 16×16 всего 256 пикселей. Тонкие линии, градиенты и мелкий текст растворяются в шуме. Одна смелая форма или одна-две буквы жирного начертания выживают; детализированная иллюстрация — нет. Проверьте, уменьшив картинку до размера миниатюры: если вы её там не узнаёте, вкладка браузера тоже не узнает.
Начинайте с большого. Работайте минимум от 512×512. Уменьшение прячет огрехи, увеличение их выдумывает.
Формат исходного файла почти не важен. Берите PNG или WebP, если у иконки прозрачный фон, — JPG не хранит прозрачность, и прозрачные области выйдут «приклеенными» к белому. Для плоского логотипа на однотонном фоне сойдёт и JPG.
Шаг 2: конвертируйте картинку в ICO
Перетащите исходный файл в конвертер под его формат: PNG в ICO, JPG в ICO или WebP в ICO. Инструмент декодирует изображение локально в вашем браузере, упаковывает стандартные размеры в один контейнер ICO и отдаёт один файл на скачивание. Ничего никуда не загружается; всё работает на вашей машине.
Мультиразмерный контейнер — причина предпочесть ICO простому переименованию PNG. PNG 512×512, подключённый как фавиконка, заставляет браузер уменьшать её на лету, а автоматическое уменьшение недобро обходится с тонкими формами. ICO несёт в себе вручную подточенные маленькие версии, и браузер просто выбирает.
Какие размеры класть внутрь и когда нужны файлы сверх ICO — отдельная тема; в нашем гиде по размерам favicon есть полная таблица, включая размеры apple-touch-icon для домашних экранов iOS.
Шаг 3: подключите к сайту
Положите favicon.ico в корень сайта и добавьте одну строку в <head> ваших страниц:
<link rel="icon" href="/favicon.ico" sizes="any" />
Подсказка sizes="any" сообщает браузеру, что файл хранит несколько разрешений, — пусть выбирает лучшее, а не считает, что там 16×16.
Размещение файла по пути /favicon.ico важно и помимо link-тега. Браузеры запрашивают этот путь автоматически для сайтов, где ничего не объявлено, а инструменты вроде RSS-ридеров и превью краулеров тоже смотрят туда. Фавиконка в корне работает даже для страниц, которые забыли про тег.
Современные браузеры принимают и PNG-фавиконки, объявленные так:
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
PNG-фавиконки меньше по файлу и проще в генерации, но корона совместимости по-прежнему у ICO: он работает в каждом браузере из когда-либо выпущенных, это формат, который ждёт автоматический запрос /favicon.ico, и один файл покрывает все размеры. Отдавать оба — ICO в корне плюс PNG-декларации — тот вариант «и ремень, и подтяжки», на котором останавливается большинство сайтов.
Проверьте результат
Жёстко обновите страницу (фавиконки агрессивно кешируются), затем посмотрите на вкладку, панель закладок и историю. Если иконка в размере вкладки выглядит мутной, виноват почти никогда не конвертер, а исходник. Вернитесь к шагу 1, упростите форму и сконвертируйте заново.
Файл с вашим логотипом наверняка прямо сейчас лежит в какой-нибудь папке. Перетащите его в конвертер, подключите link-тег — и ваша вкладка перестанет быть пустой иконкой документа.