Favicon — маленькая иконка во вкладке браузера, в закладках и поисковой выдаче. Всего 16x16 или 32x32 пикселя, но ваш бренд виден в каждой вкладке. Сайт без favicon выглядит пустым, непрофессиональным.
Почему важно?
1) Брендинг — ваш логотип в каждой вкладке. 2) Пользователь находит вас среди множества вкладок. 3) Доверие. 4) Мобильный — иконка приложения при "Добавить на главный экран". 5) Видна в мобильной выдаче Google.
Нужные размеры
1) 16x16, 32x32 — вкладка браузера. 2) 180x180 — Apple touch icon (iOS). 3) 192x192, 512x512 — Android/PWA. 4) favicon.ico — старые браузеры.
Правила дизайна
1) Просто — в малом размере детали не видны. 2) Самая узнаваемая часть логотипа. 3) НЕТ полного текста. 4) Контрастно. 5) Прозрачный фон (PNG).
Инструменты
1) favicon.io — из текста, эмодзи или картинки. 2) realfavicongenerator.net — самый полный. 3) Figma/Canva.
Подключение в HTML
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
SVG favicon — современный
Современные браузеры поддерживают SVG favicon — чёткий в любом размере, маленький файл.
Favicon для dark mode
В тёмном режиме favicon может адаптироваться через @media (prefers-color-scheme: dark) внутри SVG.
Проверка
1) Видно во вкладке? 2) realfavicongenerator checker. 3) "Добавить на главный экран". 4) Очистите кэш при смене.
Частые ошибки
1) Только favicon.ico. 2) Слишком сложный дизайн. 3) Неверный размер. 4) Файл не в корне.
Опыт Сайт.uz
У Сайт.uz полный набор favicon: вкладка, Apple touch, Android, SVG.