Изображение в Favicon: Создайте иконки для сайта из любой картинки

Q: Как мне указать на фавиконы в HTML?

Используя теги , указывающие на каждый размер и формат, а также для iOS. Браузер выберет лучшее совпадение. Полный набор тегов покрывает все платформы.

Последнее обновление: July 10, 2026. Поддержка favicon в браузерах развивается; базовые размеры и форматы здесь охватывают текущий ландшафт.

Favicon — это небольшая иконка, которая появляется во вкладке браузера, в списке закладок и на домашнем экране телефона, когда кто-то сохраняет ваш сайт. Преобразование изображения в favicon означает создание правильных типов файлов и размеров, чтобы иконка выглядела четко везде, где она появляется — от вкладки браузера размером 16-pixel до значка Apple Touch размером 180-pixel. В этом руководстве рассматриваются размеры, которые ожидают различные платформы, форматы файлов для генерации и способы сохранения узнаваемости иконки даже в крошечных размерах.

Краткий ответ: как создать фавикон из изображения?

Начните с квадратного исходного изображения (или обрежьте до квадрата с помощью Инструмента обрезки), уменьшите его до стандартных размеров фавикона (16px, 32px, 180px, 512px) и экспортируйте как PNG плюс файл ICO для устаревших браузеров. Ссылайтесь на них в вашем HTML <head> с помощью соответствующих тегов link. Проверьте версию 16px во вкладке браузера, потому что если иконка не распознается в этом размере, никакое количество более крупных версий это не исправит. Также сохраните версию SVG, если логотип является вектором, для четкого отображения на экранах с высоким DPI.

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

В разных контекстах фавикон отображается в разных размерах, и предоставление правильных размеров сохраняет его четкость везде.

Size	File	Used for
16x16	ICO / PNG	Вкладка браузера (устаревшее)
32x32	ICO / PNG	Вкладка браузера (retina)
180x180	PNG	Apple Touch icon
192x192	PNG	Домашний экран Android
512x512	PNG	PWA / splash
Любой	SVG	Современные браузеры, высокий DPI

Версия 16px является самой важной — это то, что видят большинство людей во вкладке.
Иконка Apple Touch требует 180px для четкого отображения на домашнем экране в iOS.
SVG обслуживает современные браузеры при любом разрешении без необходимости нескольких файлов.
Один ICO может объединять несколько размеров для поддержки старых систем (legacy support).

Как разработать фавикон, который хорошо выглядит при 16px?

Сложность фавикона заключается в том, что он должен быть узнаваемым даже при размере 16 пикселей, что очень мало. Детали, которые выглядят хорошо на 512px, исчезают при 16px, поэтому дизайн должен быть максимально простым.

Используйте простую, смелую форму — букву, значок логотипа или простой иконку.
Избегайте тонких линий и мелкого текста — они исчезнут при 16px.
Используйте высокий контраст, чтобы форма хорошо читалась на фоне вкладки.
Протестируйте версию в 16px в реальном размере перед публикацией.

Распространенная ошибка — использование полного логотипа с текстом. При 16px текст становится неразборчивым, из-за чего фавикон выглядит как расплывчатое пятно. Решение состоит в том, чтобы выделить самый узнаваемый элемент — иконку или первую букву — и использовать его в качестве фавикона. В руководстве SVG to PNG описано экспортирование векторных значков нужных вам размеров.

Какие форматы файлов вам следует генерировать?

Фавиконы охватывают несколько форматов, потому что поддержка браузеров развивалась со временем, и покрытие всех этих форматов гарантирует, что значок будет работать везде.

ICO — устаревший формат, объединяет несколько размеров, поддерживается всеми браузерами.
PNG — современный стандарт, один файл на каждый размер.
SVG — векторный, масштабируется до любого размера, поддерживается современными браузерами.
Apple Touch PNG — специально для иконок рабочего стола iOS размером 180x180.

Формат	Когда использовать
ICO	Поддержка устаревших браузеров, объединяет размеры
PNG	Современные браузеры, файлы по размеру
SVG	Современные браузеры, единый масштабируемый файл
Apple Touch PNG	Рабочий стол iOS

Сгенерируйте ICO для совместимости с устаревшими системами, PNG для каждого размера для широкой поддержки и SVG, если исходник является вектором. Генератор favicon обрабатывает генерацию формата, а Инструмент обрезки сначала получает квадратный источник.

Как ссылаться на фавиконы в HTML?

Сгенерированные файлы должны быть указаны в секции <head> страницы, чтобы браузеры могли их найти. Теги <link> сообщают браузеру, какой файл использовать для какого контекста.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

ICO охватывает устаревшие браузеры с набором размеров.
SVG обслуживает современные браузеры при любом разрешении.
Иконка Apple Touch покрывает сохранения на домашнем экране iOS.
Разместите файлы в корне сайта для максимальной совместимости.

В руководстве Mozilla по фавиконам описаны теги <link> и поведение браузеров, а в руководстве Web.dev по значкам приложений представлен стандарт маскируемых иконок для Android. Проверьте результат в реальной вкладке браузера и на домашнем экране телефона после развертывания, потому что особенности рендеринга проявляются только в фактических контекстах.

Создание фавиконов для светлого и темного режимов

Современные браузеры и ОС переключаются между светлым и темным режимами, и фавиконка, которая отлично выглядит на светлой вкладке, может исчезнуть на темной. PNG с прозрачным фоном или SVG с адаптивными цветами справляются с обоими контекстами, потому что иконка адаптируется к окружающему хромированию, а не несет собственный фон.

Проблема в режиме	Решение
Темная иконка исчезает на темной вкладке	Добавить тонкий контур или использовать прозрачность
Светлая иконка исчезает на светлой вкладке	То же — контур или адаптивный цвет
Низкая читаемость при 16px	Упростить форму, увеличить контрастность

Для SVG фавиконов вы можете использовать медиа-запрос prefers-color-scheme внутри SVG, чтобы предоставлять разные цвета для светлого и темного контекстов, что является самым чистым решением. Для PNG приемлемым на обоих фонах будет прозрачный фон с формой, имеющей достаточный внутренний контраст. Цель состоит в том, чтобы фавиконка была читаемой на вкладке независимо от того, использует ли пользователь светлый или темный режим, что становится все более стандартным явлением, а не исключением.

Распространенные ошибки с favicon

Слишком много деталей — иконка становится неразличимой при размере 16px. Упростите.
Неквадратный источник — сначала обрежьте до квадрата, иначе иконка исказится.
Отсутствие значка Apple Touch Icon — вместо этого в iOS будут отображаться общие скриншоты.
Нет SVG — экраны с высоким DPI отображают размытый PNG вместо четкого вектора.
Забыть протестировать на размере 16px — размер, который видят большинство людей, является самым часто игнорируемым.

Favicon маленький, но он отображается везде, где представлен ваш сайт — во вкладках, закладках, на домашнем экране и в результатах поиска. Четкий, узнаваемый значок во всех размерах укрепляет бренд с первого взгляда, тогда как размытый или отсутствующий favicon сигнализирует о небрежности. Уделите время, чтобы правильно настроить версию 16px, сгенерировать полный набор размеров и форматов, и значок будет чисто представлять сайт везде, где он появится. Инвестиция небольшая — всего один день работы по дизайну и экспорту — но она окупается каждый раз, когда пользователь видит ваш сайт во вкладке, закладке или на домашнем экране, что происходит гораздо чаще, чем большинство команд осознают.

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

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

Современный набор: 16×16, 32×32, 48×48 (классика), а также 180×180 (иконка касания Apple) и 192×192 / 512×512 (Android). Одно мастер-изображение генерирует весь набор. Браузер выбирает подходящий размер в зависимости от контекста.

Как мне разработать фавикон, который хорошо выглядит при 16px?

Держите это простым — одна смелая форма, высокий контраст, без мелких деталей или текста. При 16px что-либо замысловатое превращается в пятно. Перед использованием протестируйте дизайн на 16px; если он не читается при таком размере, значит, он слишком сложен.

Какие форматы файлов должен использовать фавикон?

ICO для обеспечения совместимости со старыми системами, PNG для современных браузеров и иконок Apple/Android, а также SVG для версии, независимой от разрешения (где это поддерживается). Генерируйте полный набор; один формат не покрывает все устройства.

Как мне указать на фавиконы в HTML?

Используя теги <link rel="icon">, указывающие на каждый размер и формат, а также <link rel="apple-touch-icon"> для iOS. Браузер выберет лучшее совпадение. Полный набор тегов <link> покрывает все платформы.

Могу ли я использовать одно изображение для всех размеров фавикона?

Да — один квадратный мастер (512×512 или больше) сгенерирует весь набор, от 16×16 до 512×512. Разработайте мастер-изображение так, чтобы оно хорошо выглядело при 16px (одна смелая форма), чтобы даже самый маленький размер оставался читаемым. Один мастер, множество размеров.

Как мне протестировать фавикон?

Откройте сайт во вкладке браузера и проверьте иконку на размере 16px (размер вкладок), 32px (закладки) и 180px (Apple touch). Если версия 16px не читается, значит, дизайн слишком сложен — упростите его до одной смелой формы. Фавиконы маленькие, но встречаются повсюду, поэтому четкая, узнаваемая иконка на всех размерах усиливает бренд с первого взгляда.

Что такое файл ICO?

Это устаревший контейнерный формат, который содержит одну или несколько растровых изображений в разных размерах, используемый для фавиконов в старых браузерах (в частности, в старом Internet Explorer). Современные браузеры используют PNG и SVG, поэтому ICO — это в основном слой обратной совместимости. Сгенерируйте ICO вместе со своим набором PNG/SVG, чтобы каждый браузер, каким бы старым он ни был, получил иконку.