Размеры фавиконки: какие файлы нужны и во сколько пикселей

Почему файлов фавиконки так много

Фавиконка — это маленькая иконка сайта: во вкладке браузера, в закладках, в результатах поиска и на главном экране телефона. Это лицо сайта; без неё он выглядит незаконченным.

Загвоздка в том, что каждое из этих мест требует свой размер и формат. Поэтому фавиконка — не один файл, а небольшой набор.

Нужный набор

• •favicon.ico — 16, 32 и 48px в одном файле. Для адресной строки, вкладок и закладок; самый старый стандарт и по-прежнему обязателен
• •PNG 16px и 32px — чёткие версии, которые современные браузеры показывают во вкладке
• •apple-touch-icon 180px — используется при добавлении сайта на главный экран iPhone или iPad
• •PNG 192px и 512px — для главного экрана Android и установки PWA, регистрируются в site.webmanifest

Как подготовить исходник

Правильный путь — начать с большого квадратного изображения (от 512px) и уменьшать. Увеличение маленькой картинки лишь размывает её.

Иконка должна узнаваться и при 16px, поэтому чем проще, тем лучше. Один символ лучше логотипа с текстом; небольшие поля по краям спасают от тесноты, а прозрачный фон уместен и в светлой, и в тёмной теме.

Как подключить в HTML

Загрузите файлы в корневую папку сайта и укажите их тегами link в head: rel="icon" — для ICO и PNG, rel="apple-touch-icon" — для иконки 180px, rel="manifest" — для site.webmanifest.

Запасной вариант: favicon.ico в корне сайта большинство браузеров находит и без тегов. Но чтобы PNG по размерам и иконки главного экрана работали как надо, теги стоит добавить.

Не собирайте набор вручную

Уменьшать картинку за картинкой и вручную паковать ICO утомительно. Положите одно изображение в генератор фавиконок Image Converter NOW — и получите favicon.ico, все PNG, site.webmanifest и готовые HTML-теги одним ZIP-архивом.

Всё выполняется в браузере — ваш логотип никуда не загружается.