Как создать фавикон: размеры для всех устройств

Favicon происходит от «favorite icon» — иконка, которую браузеры сохраняют вместе с закладками. Сегодня концепция ушла далеко вперёд: фавикон появляется на вкладках браузера, в адресной строке, в ярлыках на рабочем столе, на главном экране телефонов iOS и Android, в результатах Google и как иконка Progressive Web Apps (PWA). Для каждого контекста нужен свой размер.

Самая частая ошибка — создать только один файл favicon.ico 16×16 пикселей и считать работу выполненной. На Retina-мониторе или iPhone такая иконка будет выглядеть размытой. Решение — сгенерировать полный набор размеров: это кажется сложным, но с правильным инструментом делается за секунды.

Что такое файл .ico и когда его использовать

Формат .ico — оригинальный формат фавикона, созданный Microsoft в 90-х. У него есть особая черта: он может содержать несколько размеров в одном файле — например, 16×16 и 32×32 одновременно. Браузер сам выбирает наиболее подходящий размер для каждого контекста.

favicon.ico всё ещё нужен в 2026 году по конкретной причине: старые браузеры и некоторые поисковые роботы автоматически пытаются обратиться к файлу /favicon.ico в корне сайта. Если его нет, в логах сервера появляется лишняя ошибка 404. Поэтому, даже если вы используете современный PNG для всего остального, рекомендуется держать favicon.ico в корне.

Полная таблица размеров фавикона

Вот список всех размеров, которые должен покрывать полный набор фавикона в 2026 году:

Размер	Формат	Где используется
16 × 16 px	.ico / PNG	Вкладка браузера (по умолчанию)
32 × 32 px	.ico / PNG	Ярлык на рабочем столе (Windows), вкладки на HiDPI-экранах
48 × 48 px	.ico / PNG	Ярлык в проводнике Windows
57 × 57 px	PNG	iPhone (iOS 1–6, не-Retina экраны)
60 × 60 px	PNG	iPhone (iOS 7+, не-Retina экраны)
72 × 72 px	PNG	iPad (iOS 1–6, не-Retina экраны)
76 × 76 px	PNG	iPad (iOS 7+, не-Retina экраны)
96 × 96 px	PNG	Ярлык в Chrome (Android)
114 × 114 px	PNG	iPhone Retina (iOS 1–6)
120 × 120 px	PNG	iPhone Retina (iOS 7+)
144 × 144 px	PNG	iPad Retina (iOS 1–6), плитка Windows 8
152 × 152 px	PNG	iPad Retina (iOS 7+)
167 × 167 px	PNG	iPad Pro (iOS 9+)
180 × 180 px	PNG	iPhone 6 Plus и более новые модели
192 × 192 px	PNG	Android Chrome, PWA (manifest.json)
512 × 512 px	PNG	Сплэш-экран Android Chrome, PWA высокого разрешения

💡 Хорошая новость: вам не нужно создавать каждый размер вручную. Генератор фавиконок ImageTools автоматически создаёт все эти файлы из одного изображения — включая .ico с несколькими размерами и ZIP со всеми PNG.

Какое изображение использовать в качестве основы для фавикона

Исходное изображение должно быть не меньше 512×512 пикселей — это максимальный требуемый размер, и использование крупного изображения гарантирует качество меньших размеров. Использование маленького изображения в качестве основы приводит к размытым иконкам в более крупных размерах.

Принимаемые входные форматы

PNG с прозрачным фоном — идеально. Иконка выглядит чисто на любом цвете фона вкладки или главного экрана.
PNG со сплошным фоном — хорошо работает, если цвет фона сочетается с дизайном сайта.
JPG — принимается, но без поддержки прозрачности.
SVG — лучшая отправная точка, если он у вас есть. Векторный формат, любой размер без потерь.

Советы по дизайну фавиконов

Фавикон — очень маленькое пространство: версия 16×16 содержит всего 256 пикселей. Это накладывает ограничения дизайна, которые многие игнорируют:

Используйте самый простой элемент вашего бренда. Полный логотип обычно не работает на 16px. Отдайте предпочтение только инициалу, отдельному символу или упрощённой версии иконки.
Избегайте тонкого текста. Любой текст в размерах ниже 32px будет нечитаем.
Используйте высокий контраст. Фавикон конкурирует с десятками других открытых вкладок — иконка с низким контрастом визуально теряется.
Сплошной цветной фон часто работает лучше прозрачного. Это гарантирует, что иконка выделяется как на светлых, так и на тёмных вкладках.
Проверьте результат на 16px, прежде чем считать работу законченной. Дизайн, который отлично смотрится на 512px, может стать неузнаваемым на 16px.

Сгенерируйте фавикон прямо сейчас — все размеры сразу

Загрузите изображение и скачайте ZIP с .ico и всеми нужными PNG для браузеров, iPhone, Android и PWA. Бесплатно, без регистрации.

Создать фавикон бесплатно

Как установить фавикон на сайт

После генерации файлов их нужно подключить в <head> HTML. Рекомендуемый полный код для 2026 года:

<!-- Базовый фавикон для браузеров -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

<!-- Apple Touch Icon (iPhone и iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

<!-- Android и PWA -->
<link rel="manifest" href="/site.webmanifest">

Файл favicon.ico должен находиться в корне сайта (в той же директории, что и index.html). Остальные PNG-файлы могут быть в корне или в подпапке, если пути в HTML указаны правильно.

Файл site.webmanifest

Для PWA и корректного распознавания иконки в Android Chrome нужен файл site.webmanifest в корне сайта. Базовое содержимое:

{
  "name": "Название вашего сайта",
  "short_name": "Сайт",
  "icons": [
    {
      "src": "/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "display": "standalone"
}

📦 ZIP от Генератора фавиконок уже включает предварительно настроенный файл site.webmanifest с правильными путями — просто распакуйте и загрузите файлы в корень вашего сайта.

Как установить на конкретных платформах

WordPress

В WordPress фавикон называется «иконкой сайта». Чтобы настроить: перейдите в Внешний вид → Настроить → Информация о сайте и нажмите «Выбрать иконку сайта». WordPress автоматически создаёт нужные размеры из загруженного изображения — просто используйте квадратное изображение не менее 512×512 пикселей.

Shopify

В Интернет-магазин → Настройки прокрутите до «Иконка магазина» и загрузите квадратное изображение не менее 512×512 пикселей в PNG или JPG.

Wix

В Настройки → Айдентика бренда → Favicon. Используйте квадратное изображение в PNG или JPG.

Squarespace

В Дизайн → Стиль браузера, раздел «Favicon». Рекомендуется: квадратный PNG 100×100 пикселей (остальное Squarespace сделает сам).

Чистый HTML/CSS или фреймворки

Разместите все сгенерированные файлы в корне проекта и добавьте показанные выше теги <link> в <head> каждой страницы — или в базовый layout, если используете фреймворк вроде Next.js, Nuxt или аналогичный.

Проверка работы фавикона

После установки откройте сайт во вкладке браузера и проверьте, отображается ли иконка на вкладке. Если она не появляется сразу, попробуйте:

Очистить кэш браузера (Ctrl+Shift+R на Windows, Cmd+Shift+R на Mac).
Открыть во вкладке инкогнито — она не использует кэш.
Подождать несколько минут — браузеры обычно кэшируют фавиконы на разные периоды времени.
Проверить, что путь к файлу в HTML указан правильно и что файл действительно существует на сервере.

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

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

512×512 пикселей. Это самый большой требуемый размер (для сплэш-экрана PWA на Android), и использование изображения такого размера в качестве исходного гарантирует чёткость всех меньших размеров. Использование меньшего изображения приводит к размытым иконкам в более крупных форматах.

PNG или ICO: что лучше для фавикона?

Они дополняют друг друга. .ico должен находиться в корне сайта для совместимости со старыми браузерами и поисковыми роботами. Отдельные PNG используются для Apple Touch Icon, Android Chrome и PWA — эти контексты не принимают .ico. Рекомендуется иметь оба варианта: favicon.ico в корне и PNG, подключённые через теги <link> в HTML.

Действительно ли нужны все эти размеры?

Для большинства сайтов минимальный рабочий набор — это: favicon.ico (16+32px), favicon-32x32.png, apple-touch-icon.png (180×180) и android-chrome-192x192.png. Это покрывает современные браузеры, iPhone и Android. Остальные размеры нужны для совместимости со старыми версиями iOS и специфичных контекстов вроде плиток Windows. Поскольку генератор создаёт всё сразу, иметь полный набор не составляет труда.

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

Google требуется время, чтобы проиндексировать и показать фавиконы в результатах поиска — обычно от нескольких дней до недель после публикации. Чтобы фавикон отображался, сайт должен: иметь публично доступный фавикон (не заблокированный robots.txt), иметь файл favicon.ico в корне или корректный тег <link rel="icon"> в HTML, и быть просканированным Googlebot. У новых сайтов это обычно занимает больше времени.

Можно ли использовать логотип компании в качестве фавикона?

Да, если упрощённая версия хорошо выглядит на 16×16 пикселях. Логотипы с текстом, мелкими деталями или множеством элементов обычно неузнаваемы в таких маленьких размерах. Идеально — создать «иконочную» версию логотипа: только символ, инициал или самый заметный элемент бренда, специально для использования в качестве фавикона.

Влияет ли фавикон на SEO моего сайта?

Напрямую нет — фавикон не является фактором ранжирования. Косвенно да: присутствующий и хорошо сделанный фавикон появляется в результатах поиска рядом с названием сайта, повышает узнаваемость бренда и может улучшить CTR (кликабельность). Сайты без фавикона показываются с обычной иконкой в результатах, что выглядит менее профессионально.