Какого размера должен быть фавикон?

Вкладки браузера показывают фавиконы размером 16 × 16 CSS-пикселей, что на экранах высокой плотности равно 32 × 32, поэтому ICO содержит версии на 16, 32 и 48 пикселей. Добавьте Apple touch icon 180 × 180 и иконки 192 и 512 пикселей для веб-манифеста, и все распространённые случаи покрыты. Начинайте с изображения не меньше 512 × 512 пикселей.

Нужен ли ещё файл favicon.ico?

Да. Браузеры, RSS-ридеры и поисковые роботы запрашивают /favicon.ico автоматически, даже если на него не указывает ни один тег, а старые браузеры понимают только ICO. Держите его в корне сайта рядом с иконками SVG и PNG.

Можно ли использовать SVG как фавикон?

Да. Chrome, Edge, Firefox и последние версии Safari поддерживают SVG-фавиконы через тег link с type="image/svg+xml". Загрузите сюда SVG, и он войдёт в набор как icon.svg рядом с запасным ICO, а HTML-фрагмент подключит оба.

Что такое apple-touch-icon?

Это PNG 180 × 180 пикселей, который iPhone или iPad использует, когда сайт добавляют на домашний экран. У него должны быть сплошной фон и прямые углы, потому что iOS сама скругляет углы и делает прозрачные области чёрными.

Почему не отображается фавикон?

Браузеры агрессивно кешируют фавиконы, часто на несколько дней. Убедитесь, что файл доступен по пути из тега link, затем обновите страницу без кеша или откройте сайт в приватном окне. Переименование файла или параметр версии вроде favicon.ico?v=2 заставляет браузер скачать его заново.

Как конвертировать PNG в ICO?

Перетащите PNG на эту страницу и скачайте favicon.ico. Генератор уменьшит изображение до 16, 32 и 48 пикселей и упакует все три размера в один файл ICO, где каждый хранится как PNG внутри контейнера.

Зачем нужен site.webmanifest?

Это небольшой JSON-файл, который сообщает Android и Chrome название сайта, цвет темы, цвет фона и иконки на 192 и 512 пикселей для добавления сайта на домашний экран или установки его как приложения.

Загружается ли мой логотип на сервер?

Нет. Каждая иконка рисуется и кодируется в вашем браузере, а ZIP собирается на вашем устройстве. Ничего никуда не отправляется, и после загрузки страница работает офлайн.

Генератор фавиконок

Every favicon size, a real multi-size .ico and a web manifest from one image. Всё выполняется локально — ничего не отправляется на сервер.

Вход: PNG · JPEG · WebP · SVG
Выход: ICO · PNG · webmanifest · ZIP

Перетащите логотип

PNG, JPEG, WebP или SVG. Лучше всего квадрат не меньше 512 × 512 px. Изображение можно и вставить.

Все файлы фавикона из одного изображения

Этот генератор фавиконок превращает один логотип в полный набор, который нужен сайту сегодня: favicon.ico с иконками 16, 32 и 48 пикселей внутри, чёткие PNG от 16 до 512 пикселей, Apple touch icon, иконки Android Chrome, site.webmanifest и HTML-теги для вставки на страницу. Сделайте изображение квадратным, добавьте отступы, скруглите углы или поместите его на сплошную плашку, а затем скачайте всё одним ZIP-архивом. Масштабирование и сборка ZIP выполняются на вашем устройстве, поэтому логотип никуда не загружается.

Как сделать фавикон

Перетащите на страницу PNG, JPEG, WebP или SVG или вставьте изображение из буфера обмена. Самый чёткий результат дают квадратный логотип не меньше 512 × 512 пикселей или SVG.
Выберите Вписать, чтобы сохранить изображение целиком с полями вокруг, или Заполнить, чтобы обрезать его до квадрата. Добавьте отступ и радиус углов, если нужна скруглённая плашка.
Выберите цвет фона или оставьте его прозрачным. Apple touch icon всегда получает сплошной фон, потому что iOS закрашивает прозрачность чёрным.
Укажите название приложения и цвета для веб-манифеста, затем нажмите Скачать ZIP или скачайте отдельные файлы из предпросмотра.
Загрузите файлы в корень сайта и вставьте HTML-теги в <head> каждой страницы.

Какие файлы фавикона на самом деле нужны современным браузерам?

Советы по фавиконам полны пережитков 2012 года: десятки размеров, XML для плиток Windows и маски для закреплённых вкладок Safari. Сегодняшние браузеры ищут гораздо меньше. Четыре файла покрывают практически все используемые браузеры, телефоны и операционные системы.

Всё остальное в ZIP-архиве лежит для полноты: PNG на 16, 32 и 48 пикселей для инструментов и CMS, которые запрашивают их по имени, и необязательная плитка Windows 150 × 150 для старых закреплённых сайтов. Лишние файлы не вредят, но ссылаться на все из них не нужно.

favicon.ico: Универсальный запасной вариант. Браузеры сами запрашивают /favicon.ico, даже если на него не указывает ни один тег, и так же поступают RSS-ридеры, менеджеры закладок и поисковые роботы. Один файл содержит версии на 16, 32 и 48 пикселей, и каждая хранится как PNG внутри контейнера ICO, который читает любой браузер начиная с Windows Vista.
icon.svg: Векторный фавикон, чёткий при любом размере и масштабе. Chrome, Edge, Firefox и последние версии Safari используют его, если на него есть ссылка. Он появляется, только если исходник в SVG: растровое изображение не может стать настоящим вектором.
apple-touch-icon.png: Непрозрачный PNG 180 × 180, который iPhone и iPad показывают, когда сайт добавляют на домашний экран. iOS накладывает собственную маску со скруглением, поэтому углы должны быть прямыми, а фон сплошным.
Иконки манифеста: PNG на 192 и 512 пикселей, перечисленные в site.webmanifest. Android использует их для ярлыка на домашнем экране и заставки установленного веб-приложения, а Chrome проверяет их наличие, прежде чем предложить установить сайт.

HTML-теги для вставки

Фрагмент подключает ICO с sizes="32x32", а не с sizes="any". С «any» Chrome предпочитает ICO, даже когда доступен SVG. Если вы загрузили SVG, фрагмент подключает и его, так что браузеры с поддержкой SVG-фавиконов используют его, а остальные откатываются на ICO. Без SVG вместо него подключаются PNG на 32 и 16 пикселей.

Мета-тег theme-color окрашивает панель браузера на Android и в Safari, а site.webmanifest содержит название приложения, цвета и большие иконки. Оставьте имена файлов как есть и разместите все файлы в корне домена или поправьте пути во фрагменте под своё расположение.

Как нарисовать фавикон, который выдержит 16 пикселей

Упрощайте. Иконка 16 × 16 — это всего 256 пикселей. Текстовые логотипы и тонкие линии превращаются в кашу; одна буква, символ или знак логотипа без текста читаются гораздо лучше.
Подберите контраст для обоих цветов вкладок. Вкладки браузера бывают светлыми или тёмными в зависимости от темы. Предпросмотр показывает каждый размер на белой и почти чёрной плашке, так что тёмный логотип, исчезающий в тёмной теме, видно ещё до публикации.
Если сомневаетесь, добавьте плашку. Сплошной фон с небольшим отступом и скруглёнными углами сохраняет тонкий или прозрачный логотип видимым на любой вкладке и выглядит продуманно на домашнем экране.
Начинайте с большого. Изображения уменьшаются шагами вдвое ради чистых краёв, но ничто не добавит деталей, которых нет в исходнике. Дайте ему 512 пикселей и больше или SVG.
Проверьте цвета. Если фирменный цвет слишком бледный на белой или тёмной вкладке, проверьте его проверкой контрастности или переведите значение из другой записи конвертером цветов.

Почему здесь нет загрузки на сервер

Большинство генераторов фавиконок отправляют логотип на сервер для масштабирования. Этот рисует каждый размер на canvas в вашем браузере, записывает файл ICO побайтно на JavaScript и собирает ZIP небольшим модулем WebAssembly, поэтому изображение не покидает ваше устройство, а инструмент продолжает работать офлайн после загрузки страницы. Это важно для ещё не вышедшего бренда или логотипа клиента, который пока нельзя показывать.

Часто задаваемые вопросы

Какого размера должен быть фавикон?: Вкладки браузера показывают фавиконы размером 16 × 16 CSS-пикселей, что на экранах высокой плотности равно 32 × 32, поэтому ICO содержит версии на 16, 32 и 48 пикселей. Добавьте Apple touch icon 180 × 180 и иконки 192 и 512 пикселей для веб-манифеста, и все распространённые случаи покрыты. Начинайте с изображения не меньше 512 × 512 пикселей.
Нужен ли ещё файл favicon.ico?: Да. Браузеры, RSS-ридеры и поисковые роботы запрашивают /favicon.ico автоматически, даже если на него не указывает ни один тег, а старые браузеры понимают только ICO. Держите его в корне сайта рядом с иконками SVG и PNG.
Можно ли использовать SVG как фавикон?: Да. Chrome, Edge, Firefox и последние версии Safari поддерживают SVG-фавиконы через тег link с type="image/svg+xml". Загрузите сюда SVG, и он войдёт в набор как icon.svg рядом с запасным ICO, а HTML-фрагмент подключит оба.
Что такое apple-touch-icon?: Это PNG 180 × 180 пикселей, который iPhone или iPad использует, когда сайт добавляют на домашний экран. У него должны быть сплошной фон и прямые углы, потому что iOS сама скругляет углы и делает прозрачные области чёрными.
Почему не отображается фавикон?: Браузеры агрессивно кешируют фавиконы, часто на несколько дней. Убедитесь, что файл доступен по пути из тега link, затем обновите страницу без кеша или откройте сайт в приватном окне. Переименование файла или параметр версии вроде favicon.ico?v=2 заставляет браузер скачать его заново.
Как конвертировать PNG в ICO?: Перетащите PNG на эту страницу и скачайте favicon.ico. Генератор уменьшит изображение до 16, 32 и 48 пикселей и упакует все три размера в один файл ICO, где каждый хранится как PNG внутри контейнера.
Зачем нужен site.webmanifest?: Это небольшой JSON-файл, который сообщает Android и Chrome название сайта, цвет темы, цвет фона и иконки на 192 и 512 пикселей для добавления сайта на домашний экран или установки его как приложения.
Загружается ли мой логотип на сервер?: Нет. Каждая иконка рисуется и кодируется в вашем браузере, а ZIP собирается на вашем устройстве. Ничего никуда не отправляется, и после загрузки страница работает офлайн.