Фавыконка — это иконка сайта на вкладке браузера, в закладках, в поисковиках:
Как было
Раньше для сайтов готовили десяток фавыконок, пытались оптимизировать их под каждый существующий экран, браузер, поисковик, приложение. Это приводило к не особо осмысленной каше из кода и файлов, типа такого:
<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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.