Школа
Веб-разработка

Какие фавыконки использовать в 2025?

Раньше на сайтах добавляли кучу фавыконок: 16х16, 32, 64 и так далее. Что из этого сейчас актуально, а от чего можно отказаться?

Ильяс
30 янв 2025
👁 1242  
Веб-разработка

Какие фавыконки использовать в 2025?

Раньше на сайтах добавляли кучу фавыконок: 16х16, 32, 64 и так далее. Что из этого сейчас актуально, а от чего можно отказаться?

Ильяс
30 янв 2025
👁 1242  
Игорь Петров
Разработчик, преподаватель Школы бюро
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Фавыконка — это иконка сайта на вкладке браузера, в закладках, в поисковиках:

Как было

Раньше для сайтов готовили десяток фавыконок, пытались оптимизировать их под каждый существующий экран, браузер, поисковик, приложение. Это приводило к не особо осмысленной каше из кода и файлов, типа такого:

<link rel="icon" href="./favicon.ico">
<link rel="icon" href="./favicon.png">
<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="icon" type="image/png" sizes="96x96" href="./favicon-96x96.png">
<link rel="apple-touch-icon" sizes="120x120" href="./favicon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="./favicon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="./favicon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="./favicon-180x180.png">
<link rel="icon" sizes="512x512" href="./favicon-512x512.png">
<meta name="msapplication-TileImage" content="./favicon-144x144.png">

Универсальный упрощённый вариант

В 2025 советую быть проще. Не заморачивайтесь, берите минимальный набор из пары современных форматов. Да, в теории сайт окажется без иконки в браузере 2013 года, а в плитках древнего Виндоус 8 иконку замылит. Зато можно не возиться с кучей файлов и потратить силы на более полезные вещи.

Как и любые картинки, оптимизируйте иконки Имейж Оптимом или другим способом, чтобы ускорить загрузку сайта.

Советую такой набор: СВГ, ПНГ 32×32 и специальный ПНГ 180×180 для Эпла, код в теге head страницы:

Как и любые картинки, оптимизируйте иконки Имейж Оптимом или другим способом, чтобы ускорить загрузку сайта.

<link rel="icon" href="./favicon.svg" sizes="any" type="image/svg+xml">
<link rel="icon" href="./favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="./apple-touch-icon.png" sizes="180x180">

СВГ — самый современный формат. Мало весит, масштабируется без потери качества. Но поддерживается пока не везде, поэтому им одним не обойтись.

ПНГ 32×32 — универсальная иконка, используется большинством современных браузеров и программ и почти всегда прилично там выглядит.

Эпл‑иконка 180×180 нужна для айфонов, айпадов и маков. Там она используется в панели избранного или если добавить сайт на домашний экран. Её часто дизайнят отдельно, с учётом контекста использования и гайдлайнов Эпла.

Что ещё

СВГ‑иконку можно научить перекрашиваться, если в браузере включена тёмная тема. Добавьте в код СВГ‑файла блок стилей с медиавыражением:

<svg viewBox="0 0 250 250" … >
  <style>
    @media (prefers-color-scheme: dark) {
      path {
        fill: red
      }
    }
  </style>

  <path fill="blue" d="…"/>
</svg>

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

Дополнительные иконки добавляйте только если чётко понимаете, зачем. Например, иконки для Андроида в PWA.

Приглашаю уважаемых советчиков поделиться в коментах своими приёмами работы с фавыконками в современном вебе.

См. также:

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

Цель рубрики — обсуждение вопросов дизайна, веб-разработки, переговоров, редактуры и управления.
Комментарии модерируются. Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры.

Рекомендуем другие советы