Как сделать favicon: конвертация PNG в ICO

Favicon — маленькая иконка во вкладке браузера, закладках и результатах поиска. Отсутствующий или битый favicon делает сайт незавершённым, а Google теперь показывает favicon рядом с результатами мобильного поиска — так что он напрямую влияет на клики.

Почему ICO, а не просто PNG?

Современные браузеры принимают favicon в PNG, но классический favicon.ico — по-прежнему самый надёжный вариант: именно его браузеры запрашивают по умолчанию по адресу /favicon.ico, его ждут старые браузеры и часть инструментов, а контейнер ICO может хранить несколько разрешений в одном файле.

Делаем ICO из логотипа

  1. Подготовьте квадратный PNG логотипа, лучше 256×256 или больше, с прозрачностью.
  2. Откройте конвертер PNG в ICO и загрузите его.
  3. Нажмите «Конвертировать» — получится ICO 256×256 (с PNG-сжатием, современный формат Vista+, который чисто масштабируется вниз).
  4. Положите файл в корень сайта как favicon.ico.
Рекламный блок — включите рекламу в public/ads.js · article-mid

HTML-разметка

Для полного покрытия добавьте в <head>:

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> (PNG 180×180 для iOS)

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

  • Проверьте вид в 16×16: мелкие детали исчезают, выигрывают жирные простые формы.
  • Держите контраст и на светлой, и на тёмной теме браузера.
  • Прозрачность выглядит лучше белой подложки.