Глоссарий фавиконов
36 терминов, каждый объясняется в первых двух предложениях. Что это значит, что публиковать и куда это идёт.
Основы
Favicon — это маленькая иконка, которую браузер показывает для вашего сайта во вкладках, закладках и истории. Что это такое, какие нужны размеры и форматы и как её добавить.
Читать определениеИконка приложения представляет установленное приложение на домашнем экране или в лаунчере, а не сайт на вкладке. Откуда её берёт каждая платформа и что отдавать.
Читать определениеFavicon — крошечная иконка вкладки; Open Graph-изображение — большое превью, когда вашу ссылку публикуют. Разные файлы для разных задач: где какое.
Читать определениеЛоготип — это ваш полный фирменный знак; favicon — крошечная производная, которая должна читаться на 16 пикселях. Почему нельзя просто уменьшить логотип и как вывести работающую иконку.
Читать определениеСделать favicon вручную — значит экспортировать каждый размер и написать теги самому; генератор делает и то, и другое за секунды. Когда ручной способ годится, а когда нет.
Читать определениеСправочник
Полное руководство по размерам favicon. Все размеры для браузеров, iOS, Android и PWA: какие обязательны и куда кладётся каждый файл.
Читать определениеТег <link rel="icon"> говорит браузеру, где ваш favicon. Что делают rel, href, type и sizes, где размещается тег и какой современный набор стоит отдавать.
Читать определение"shortcut icon" — устаревшее значение rel для favicon. Почему ключевое слово "shortcut" избыточно, нужно ли оно ещё и что писать вместо него.
Читать определениеБраузеры кешируют favicon жёстче и дольше, чем большинство ресурсов, и отдельно от страницы. Почему они такие «липкие» и как заставить favicon обновиться.
Читать определениеFavicon может реагировать на светлую или тёмную настройку ОС: SVG с медиазапросом внутри или два PNG, переключаемых через prefers-color-scheme в теге <link>.
Читать определениеGoogle показывает favicon рядом с вашим результатом, в основном на мобильных. Какой размер и формат нужны, как он находит иконку и почему ваша может не появляться.
Читать определениеБраузеры и краулеры запрашивают /favicon.ico из корня домена независимо от того, подключаете вы его или нет. Почему файл должен быть в корне и как фреймворки меняют место его размещения.
Читать определениеBIMI показывает ваш фирменный логотип рядом с письмами в поддерживающих почтовых клиентах: favicon для почты. Что нужно: SVG Tiny PS-логотип, принуждение DMARC и часто сертификат.
Читать определениеFavicon отрисовываются в квадратных слотах, так что неквадратное изображение получает поля или растягивается. Почему квадрат фактически обязателен и как обойтись с широким логотипом.
Читать определениеFavicon крошечные: favicon.ico обычно несколько килобайт, а размеры PNG заметно меньше 100 КБ. Что определяет объём и почему раздутый favicon — тревожный сигнал.
Читать определениеФорматы
Сравнение ICO и PNG для favicon: глубина цвета, прозрачность, размер файла и поддержка браузерами, плюс теги в <head>, чтобы отдавать оба без конфликтов.
Читать определениеSVG favicon — это один векторный файл, который остаётся чётким в любом размере и реагирует на тёмную тему. Поддержка браузерами, тег <link> и какие запасные варианты оставить.
Читать определениеfavicon.ico — это иконка, которую браузеры запрашивают из корня сайта, когда иконка не объявлена. Что внутри файла, куда его класть и почему стоит его сохранить.
Читать определениеFavicon можно встроить как base64 data URI вместо отдельного файла. Когда это экономит запрос и на каких поверхностях это тихо ломается.
Читать определениеНекоторые браузеры анимируют GIF-favicon на вкладке. Какие поддерживают, почему сайты используют JavaScript для живого статуса и когда оставить его статичным.
Читать определениеWebP favicon работают в большинстве современных браузеров, но не везде, и никогда для /favicon.ico. Когда WebP-иконка годится и почему PNG и ICO остаются безопасным выбором.
Читать определениеПрозрачные favicon чисто смотрятся на вкладке, но ломаются на домашних экранах iOS, которые накладывают на чёрный. Когда прозрачность помогает и когда нужен сплошной фон.
Читать определениеЭмодзи можно использовать как favicon однострочным встроенным SVG: удобно для быстрой заглушки. Почему он отрисовывается по-разному на разных ОС и когда экспортировать настоящий файл.
Читать определениеPWA
Иконки манифеста — это записи массива icons в manifest.json. Что делает каждое поле, какие размеры объявлять и как браузер выбирает одну.
Читать определениеМаскируемая иконка заполняет весь квадрат, чтобы платформы могли обрезать её под любую форму. Безопасная зона 80%, поле purpose в манифесте и как это протестировать.
Читать определениеВеб-манифест приложения — это JSON-файл, который говорит браузерам, как ваш сайт ведёт себя при установке: имя, иконки, цвета и режим отображения. Что он содержит и зачем.
Читать определениеPWA нужны определённые иконки, прежде чем браузер предложит установку: 192x192 и 512x512 в манифесте, желательно маскируемая, плюс apple-touch-icon для iOS.
Читать определениеСвойство display в манифесте решает, как выглядит установленный PWA: browser, minimal-ui, standalone или fullscreen. Что показывает каждый режим и какой выбрать.
Читать определениеУ манифеста два цвета с разными задачами: theme_color тонирует интерфейс ОС вокруг приложения, background_color красит экран загрузки. Плюс мета theme-color.
Читать определениеПлатформа
apple-touch-icon — это PNG, который iOS использует при добавлении сайта на домашний экран. Размер 180x180, тег <link> и почему прозрачность становится чёрной.
Читать определениеМета-тег theme-color говорит браузерам, каким цветом красить интерфейс вокруг страницы. Где он проявляется, варианты для тёмной темы и эквивалент в манифесте.
Читать определениеЗакреплённые вкладки Safari используют монохромный SVG, объявленный через rel="mask-icon". Как должен выглядеть файл, атрибут color и важно ли это ещё.
Читать определениеВариант precomposed говорил старой iOS не добавлять глянцевый блеск к иконке домашнего экрана. Делает ли он что-то ещё и что использовать сегодня.
Читать определениеbrowserconfig.xml и мета-теги msapplication-* задавали плитки закреплённых сайтов для Windows и старого Edge. Что они делали и нужны ли ещё.
Читать определениеМета-тег apple-mobile-web-app-capable запускает веб-приложение с домашнего экрана в полный экран на iOS. Что он делает, тег строки состояния и современная альтернатива в манифесте.
Читать определениеapple-touch-startup-image задаёт экран запуска для веб-приложения, добавленного на домашний экран iOS. Почему нужен по одному изображению на размер устройства и какие медиазапросы задействованы.
Читать определение