Фавиконы в 2026: какие размеры нужны и как их подключить

Однажды я выложил сайт с единственным фавиконом 16 пикселей и решил, что этого хватит. Потом кто-то добавил страницу на экран айфона — и иконка вышла размытым серым квадратом. В этом и подвох: маленький значок 16×16 во вкладке вы видите каждый день, а остальной набор всплывает как раз тогда, когда вы на него не смотрите.

Почему favicon.ico не умирает

Формат .ico появился ещё в Internet Explorer 5 в 1999 году, и с тех пор браузеры сами запрашивают /favicon.ico из корня сайта — независимо от того, просили вы об этом или нет. Загляните в любой лог сервера, и вы увидите эти обращения.

Поэтому современный набор иконок всё ещё включает .ico. PNG-фавиконы чётче и делаются проще, но многие клиенты сначала ищут именно favicon.ico и сдаются, если его нет: старые браузеры, RSS-читалки, боты предпросмотра ссылок, немало сервисов закладок. Один такой файл ничего не стоит и подхватывает всех отстающих. Генератор фавиконов упаковывает версии 16, 32 и 48 пикселей в один .ico, чтобы иконка оставалась чёткой, где бы она ни появилась.

Размеры, которые реально нужны

Сорок иконок вам ни к чему. Нужна горстка, и у каждой своя задача:

16×16 и 32×32 — вкладка браузера и панель закладок. Именно здесь решается, читается иконка или нет.
48×48 — Google показывает фавикон рядом с результатом в мобильном поиске и хочет размер не меньше 48px (или кратный ему) по стабильному адресу.
180×180 — иконка Apple, её берут, когда добавляют страницу на домашний экран айфона.
192×192 и 512×512 — Android и устанавливаемые веб-приложения читают их из манифеста. А 512 заодно работает как заставка.

Пропустите размеры, которые никто не запрашивает, — и вы всё равно закроете все реальные площадки.

Текст или логотип — работает и то, и другое

Логотип есть не у всех. Если вы запускаете сайд-проект в 11 вечера, две буквы на цветном фоне лучше сломанной иконки. Введите инициалы, выберите цвет фона и форму углов — квадрат, скругление или круг, — а инструмент нарисует каждый размер на canvas прямо на странице. Есть готовая графика? Перетащите PNG или SVG, и она сама уменьшится под все размеры.

В любом случае ничего не загружается. Отрисовка идёт на вашем компьютере — поэтому всё продолжает работать даже с выключенным Wi-Fi.

Как подключить набор

Распакуйте архив в корневую папку сайта, туда же, где лежит главная страница, и вставьте пять строк в <head>:

<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

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

Две буквы и цвет или уже готовый логотип — и то, и другое даёт полный набор одним архивом. Откройте Генератор фавиконов и заберите свой.