Размеры фавиконок: Какие вам действительно нужны в 2025 году

Если искать "favicon size", то вы получите множество противоречивых чисел: 16x16, 32x32, 48x48, 64, 180, 192, 256, 512. Большинство таких списков были написаны десять лет назад и никогда не обновлялись. На практике современному сайту нужно примерно четыре файла, и вы можете создать все их за один раз с помощью генератора фавиконок — он работает полностью в вашем браузере, так что ваш логотип никогда не покидает вашу машину.

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

Размеры, которые по-прежнему важны

16x16 и 32x32 — вкладки браузера и закладки

Это классическая фавиконка. 16x16 — это то, что вы видите в переполненной полосе вкладок; 32x32 используется на экранах с высоким DPI, на панели закладок и в некоторых интерфейсах адресной строки. Оба обычно упакованы в один файл favicon.ico, который может содержать несколько разрешений одновременно. Windows также извлекает 48x48 из того же .ico для ярлыков рабочего стола, поэтому включение его почти ничего не стоит.

180x180 — Apple touch icon

Когда кто-то нажимает "Добавить на экран" на iPhone или iPad, Safari ищет apple-touch-icon.png размером 180x180. Если его там нет, iOS делает снимок экрана вашей страницы и использует его вместо этого, что выглядит ужасно. Этот один PNG покрывает все текущие устройства iOS, потому что система масштабирует его по мере необходимости.

192x192 и 512x512 — Android и PWA

Android Chrome и устанавливаемые веб-приложения читают значки из вашего site.webmanifest. 192 — это значок на главном экране; 512 используется для экрана-заставки и списков приложений. Если вы когда-либо захотите, чтобы ваш сайт был устанавливаемым, вам нужны оба.

SVG — опционально, но полезно

Firefox и Chrome оба поддерживают фавиконку SVG, которая остается четкой при любом размере и может реагировать на темный режим с помощью медиа-запроса внутри файла. Это бонус, а не замена — Safari и более старые браузеры по-прежнему хотят растровые версии.

Что вы можете пропустить

64x64, 96x96, 128x128, весь набор плиток Windows и дюжину устаревших файлов в стиле apple-touch-icon-76x76. Они были нужны для устройств, которых давно уже нет. Доставка двадцати файлов значков раздувает ваш репозиторий и ничего измеримого не дает.

HTML код

Поместите файлы в корень вашего сайта и добавьте это в <head>:

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

И в манифесте:

"icons": [
  { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
  { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]

Дизайн для 16 пикселей

Сложная часть — не экспорт, а то, что полный логотип превращается в кашу при размере 16x16. Несколько вещей, которые помогают:

• Используйте фрагмент, а не весь логотип. Одну букву, один глиф, одну форму. Логотипы-словесные выражения нечитаемы при размере вкладки.
• Начните с квадрата. Если ваш исходный логотип широкий, обрежьте его до квадрата в первую очередь, чтобы генератор не добавлял письмо-боксинг с пустым пространством.
• Держите контраст высоким. Тонкие линии исчезают. Сплошные формы выживают.
• Решите о фоне. Прозрачный PNG адаптируется к светлому и темному окрашиванию браузера; если ваш знак темный, рассмотрите возможность дать ему вместо этого плитку с заплатой цвета. Вы можете удалить фон из снимка логотипа за секунды, если у вас есть только плоский JPG.
• Помните о безопасной области. Android маскирует значки в круги и скругленные квадраты, поэтому оставьте примерно 10% отступа вокруг края вашей работы размером 512.

Если вы подбираете фон фавиконки к цвету бренда вашего сайта, инструмент выбора цвета изображения вытащит точный хекс из существующего снимка экрана — это также удобно для мета-тега theme-color.

Создайте весь набор за один раз

Ничего не загружайте: просто перетащите квадратный PNG или SVG в бесплатный браузерный генератор фавиконок и он создаст .ico, Apple touch icon и 192/512 PNG локально в вашей вкладке. Ничего не отправляется на сервер, нет необходимости в регистрации, и никакая копия вашего неопубликованного логотипа не оказывается в чьем-то другом хранилище.

Затем уменьшите масштаб браузера, посмотрите на вкладку и задайте единственный важный вопрос: можете ли вы понять, что это?