Размер фавикона: все размеры от 16×16 до 512×512 и генератор favicon
У фавикона нет одного размера — это набор. Рабочий минимум: 16×16 и 32×32 для вкладки браузера, 180×180 для домашнего экрана iPhone, 192×192 и 512×512 для Android и PWA. Версии 16, 32 и 48 складываются в один favicon.ico, и этим закрывается всё остальное.
У поисковиков свои числа. Яндекс поддерживает 16×16, 32×32 и 120×120, а рекомендует 120×120 или SVG. Google рисует иконку в выдаче в 48×48 и просит размер, кратный 48, по неизменному адресу. Картинка в любом случае должна быть квадратной — 1:1.
Исходник для отрисовки: 512×512 · Минимум, который примет Google: 8×8 · полная таблица размеров ↓
Все размеры фавикона и где они нужны
«Обязательный» — значит без него что-то заметно ломается. «По желанию» — размеры, которые иногда запрашивают, но ни одна массовая площадка без них не падает; в архив они входят, потому что ничего не стоят.
| Размер | Файл | Где показывается | Нужен? |
|---|---|---|---|
| 16×16 | favicon.ico, favicon-16x16.png | Вкладка браузера, панель закладок, история | Обязательный |
| 32×32 | favicon.ico, favicon-32x32.png | Вкладка на экране с высокой плотностью, панель задач Windows | Обязательный |
| 48×48 | favicon.ico, favicon-48x48.png | Иконка сайта в выдаче Google, ярлык на рабочем столе | Рекомендуется |
| 64×64 | favicon-64x64.png | Закреплённые сайты в Windows, старые ярлыки | По желанию |
| 96×96 | favicon-96x96.png | Google TV, старые версии Android | По желанию |
| 120×120 | favicon-120x120.png | Иконка сайта в Яндексе — рекомендованный им размер | Важен для Яндекса |
| 128×128 | favicon-128x128.png | Chrome Web Store, расширения браузера | По желанию |
| 180×180 | apple-touch-icon.png | Домашний экран iPhone и iPad (iOS 8 и новее) | Обязательный |
| 192×192 | android-chrome-192x192.png | Домашний экран Android, берётся из веб-манифеста | Обязателен для PWA |
| 256×256 | favicon-256x256.png | Плитки Windows, экраны с высокой плотностью | По желанию |
| 512×512 | android-chrome-512x512.png | Установка PWA и заставка при запуске на Android | Обязателен для PWA |
| Вектор | favicon.svg | Современные браузеры и Яндекс — один файл на все размеры | Желательно |
Генератор ниже делает все строки, кроме последней: одиннадцать PNG плюс многоразмерный favicon.ico с версиями 16, 32 и 48. SVG-фавикон рождается только из векторного логотипа — растровый генератор его не придумает, поэтому такой файл готовится отдельно, а в <head> добавляется ещё одна строка, она показана ниже.
Перетащите изображение или нажмите для загрузки
PNG, JPG, SVG или WebP — лучше всего квадратный логотип
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="120x120" href="/favicon-120x120.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Таблица выше — короткий ответ, генератор — всё остальное. Введите пару букв или загрузите логотип и получите весь набор одним архивом: favicon.ico, PNG от 16×16 до 512×512, иконку 120×120 для Яндекса, иконку для iPhone, веб-манифест и готовый HTML-код для вставки в head. Всё рисуется прямо в браузере, поэтому файлы никуда не загружаются.
Требования Яндекса и Google к размеру фавикона
Это единственные две площадки, где неправильный размер стоит чего-то заметного — пустого квадрата рядом со ссылкой в выдаче. Обе читают иконку с главной страницы, то есть <link> должен стоять именно там, и обе хотят, чтобы адрес файла больше не менялся.
| Поисковик | Минимум | Рекомендуется | Форматы |
|---|---|---|---|
| Яндекс | 16×16 | 120×120 или SVG | SVG, ICO, PNG, JPEG, GIF, BMP |
| 8×8 | Размер, кратный 48 — 48×48 или 96×96 | ICO, PNG, JPEG, GIF, BMP, PPM, TIFF |
- Яндекс
- SVG — прямая рекомендация Яндекса: вектор не привязан к пикселям и остаётся чётким везде. Анимация не поддерживается. Иконка обновляется в выдаче примерно за две недели после обхода робота; ускорить можно переобходом главной страницы в Вебмастере.
- Одна иконка на один хост: у поддомена может быть своя, у подпапки — нет. SVG в списке форматов Google отсутствует, поэтому набор только из SVG оставит вас без иконки в выдаче.
Какие размеры нужны именно вам
Блог или лендинг
favicon.ico (16/32/48)
Один файл, одна строка кода — закрыты вкладка и оба поисковика. Это нижняя планка, а не компромисс.
Обычный сайт
+ 16, 32, 120, 180 PNG
Добавляет чёткую вкладку на Retina, иконку для домашнего экрана iPhone и те самые 120×120, которые просит Яндекс. Пять строк в head.
Устанавливаемое приложение
+ 192, 512 + манифест
Android берёт эти два размера из манифеста для домашнего экрана и заставки. Без 512×512 предложение установить приложение вообще не появится.
HTML-код для каждого размера
favicon.ico — 16×16, 32×32, 48×48
sizes="any" сообщает браузеру, что в одном файле лежит несколько разрешений, и позволяет выбрать нужное. Браузеры всё равно запрашивают /favicon.ico из корня сайта, так что файл должен лежать именно там, даже если вы его объявили.
<link rel="icon" href="/favicon.ico" sizes="any">
PNG — 16×16 и 32×32
Чётче, чем .ico, на экранах с высокой плотностью: по атрибуту sizes браузер сопоставляет файл с плотностью пикселей устройства.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Яндекс — 120×120
Рекомендованный Яндексом размер. Файл должен быть доступен по стабильному адресу; обновление иконки в выдаче занимает около двух недель, а переобход главной страницы через Вебмастер сокращает это до трёх дней.
<link rel="icon" type="image/png" sizes="120x120" href="/favicon-120x120.png">
Иконка Apple — 180×180
Прозрачность здесь лишняя: iOS накладывает иконку на чёрный фон, и светлый логотип становится невидимым. Залейте фон сплошным цветом.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Android и PWA — 192×192 и 512×512
Эти размеры объявляются в site.webmanifest, а не в link-тегах. Генератор собирает этот файл за вас.
{
"icons": [
{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png",
"purpose": "any maskable" }
]
} SVG — любой размер
Необязательно и добавляется поверх растрового набора, а не вместо него. Chrome и Firefox предпочтут его, если он есть; Safari и Google откатятся на .ico.
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
Четыре способа испортить фавикон
- Одна большая PNG на всё. 512×512, втиснутая в 16 пикселей, превращается в кашу. Каждый размер нужно рисовать отдельно — поэтому в архиве одиннадцать файлов, а не один.
- Неквадратный исходник. Google требует соотношение 1:1 и всё остальное игнорирует. Если логотип — широкая надпись, вырежьте из неё знак или положите на квадратный фон: кадрирование изображения обрежет картинку, а калькулятор соотношения сторон покажет, дотягиваете ли вы до 1:1.
- Слишком много деталей. В 16 пикселях помещается одна фигура или две буквы. Надписи целиком, градиенты и тонкие контуры исчезают. Проверяйте на файле 16×16 в его настоящем размере, а не увеличенным.
- Решить, что не выложилось. Браузеры кэшируют фавиконы намного жёстче страниц, Яндексу нужно около двух недель, а Google может обновлять иконку месяцами. Прежде чем чинить, откройте /favicon.ico напрямую.
Как это работает
- 1 Выберите текст или изображение На вкладке «Текст» введите одну-две буквы, или на вкладке «Изображение» перетащите логотип (PNG, JPG, SVG или WebP). Лучше всего подходит квадратная картинка.
- 2 Задайте цвет и форму Для текстового режима выберите цвет фона и форму углов: квадрат, скругление или круг. Превью обновляется сразу.
- 3 Скачайте и подключите Нажмите «Скачать набор фавиконов», чтобы получить архив со всеми размерами и favicon.ico. Распакуйте его в корень сайта и вставьте HTML-код в <head>.
Ваши данные защищены
Всё обрабатывается прямо в вашем браузере. Никакие файлы или текст не отправляются на наши серверы. Отключите интернет — инструмент продолжит работать.
Часто задаваемые вопросы
- Какого размера должен быть фавикон?
- Одного размера не существует — фавикон это набор. Значимые размеры: 16×16 и 32×32 для вкладки браузера, 48×48 для иконки в выдаче Google, 120×120 для Яндекса, 180×180 для домашнего экрана iPhone, 192×192 и 512×512 для Android и устанавливаемых веб-приложений. Версии 16, 32 и 48 упаковываются в один favicon.ico, остальное отдаётся PNG-файлами.
- Какой размер фавикона нужен Яндексу?
- Яндекс поддерживает 16×16, 32×32 и 120×120 и рекомендует именно 120×120 — либо SVG, потому что вектор не привязан к пикселям и выглядит чётко во всех сервисах Яндекса. Анимация не поддерживается, фон может быть как прозрачным, так и залитым. В нашем архиве 120×120 есть, и строка для него уже стоит в готовом HTML-коде.
- Какой размер фавикона показывает Google?
- Google рисует иконку в выдаче в размере 48×48. Формальный минимум — 8×8, но рекомендуется размер, кратный 48: 48×48 или 96×96, по адресу, который не меняется. Google берёт одну иконку на один хост, а SVG в его списке форматов нет, поэтому набор из одного SVG оставит выдачу без иконки.
- Можно ли сделать фавикон любого размера?
- Картинка обязана быть квадратной — соотношение 1:1. Браузер отмасштабирует что угодно, так что одна PNG 512×512 формально сработает, но при уменьшении в 32 раза тонкие линии превращаются в кашу. Поэтому каждый размер отрисовывается отдельно — именно за счёт этого специально нарисованный 16×16 остаётся читаемым.
- Какого размера должен быть favicon.ico?
- Формат .ico — это контейнер, внутри которого лежит сразу несколько изображений. Стандартное наполнение — 16×16, 32×32 и 48×48: этого хватает и вкладке, и ярлыкам Windows, и иконке Google, причём всё по одному адресу. Наш favicon.ico содержит ровно эти три версии.
- 16×16 или 32×32 — что лучше?
- Нужны оба. 16×16 рисуется на обычном экране, 32×32 подхватывается на Retina и при системном масштабе 125–150%, иначе иконка выглядит мыльной. Вместе они весят пару сотен байт и оба лежат внутри favicon.ico, так что выбирать не приходится.
- Какого размера иконка для iPhone?
- 180×180 в PNG, подключается через rel="apple-touch-icon". Это размер для iOS 8 и новее; старые варианты на 76, 120 и 152 пикселя отдельно делать уже не нужно — iOS уменьшит 180. Прозрачность лучше не оставлять: iOS накладывает иконку на чёрный фон, и светлый логотип на нём пропадает.
- Нужен ли SVG-фавикон?
- Это дополнение, а не замена. SVG масштабируется на любой размер из одного файла и умеет подстраиваться под тёмную тему через медиазапрос, и это рекомендованный формат Яндекса — но в Safari поддержка неполная, а Google его для иконки в выдаче не принимает. Сначала растровый набор, SVG сверху.
- Нужен ли favicon.ico, если есть PNG?
- Да, это самый надёжный вариант по умолчанию. Старые браузеры, RSS-читалки, сервисы закладок и краулеры сначала ищут /favicon.ico. Он входит в набор, так что покрыты все клиенты.
- Изображение загружается на сервер?
- Нет. Картинка читается и рисуется через HTML canvas прямо в браузере. Она не покидает ваше устройство — фавиконы можно создавать даже офлайн после загрузки страницы.
- Куда класть файлы и код?
- Распакуйте всё в корневую папку сайта (туда же, где главная страница), затем вставьте шесть строк кода в <head>. Если старая иконка не меняется, очистите кэш браузера.
- Почему видны только первые две буквы?
- Фавикон крошечный — часто всего 16 пикселей в ширину, — поэтому читаемыми остаются один-два символа. Генератор берёт инициалы: «belun.app» превращается в BA, «Acme» — в AC.