Новый формат
Что такое фавикон и для чего он нужен
Фавикон (favicon, от favourite icon) — маленькая иконка рядом с названием сайта во вкладке браузера, в закладках, на рабочем столе и часто в сниппете поиска. Это не «SEO-фактор ТОПа», а узнаваемость и аккуратность интерфейса.
Ниже — зачем ставить, как сделать и подключить, на что смотреть в дизайне. Утверждения вроде «с фавиконом посещаемость выше конкурентов» оставляем как бытовой эффект узнаваемости, не как доказанный рычаг трафика.
Зачем нужен и какой дизайн
Фавикон помогает отличить вкладку среди десятка открытых и узнавать бренд в закладках. В поиске (где показывают иконку) он усиливает визуальный якорь рядом с title.
Дизайн: простота. Мелкие детали на 16×16 пропадают. Лучше силуэт логотипа, буква-монограмма или простой знак в цветах бренда — в одной системе с сайтом.
Для магазина техники не обязательно «рисовать холодильник»: достаточно узнаваемого знака бренда. Задача — ассоциация с сайтом, не каталог товаров в пикселях.
Чеклист вида:
- читается на тёмной и светлой вкладке;
- не перегружен текстом;
- совпадает с айдентикой, а не случайный сток;
- есть запасной вариант без мелкой графики.
Как установить и чем сгенерировать
Классика: файл в корне сайта (`/favicon.ico`) и/или явные ссылки в `<head>`: `rel="icon"` на PNG/SVG, при необходимости `apple-touch-icon`. Точный синтаксис зависит от CMS и сборки — смотрите документацию темы или генератора манифеста.
Онлайн-генераторы (Favicon Generator и аналоги) удобны, чтобы из одного PNG получить пакет размеров. Список конкретных сервисов 2018 года быстро устаревает: выбирайте актуальный инструмент и проверяйте лицензию на исходник.
Готовые «галереи чужих фавиконов» — плохая идея для коммерческого сайта: риск дубля и прав. Нет дизайнера — упростите логотип в квадрат или закажите знак вместе с айдентикой.
После смены очистите кэш браузера/CDN и подождите обновления в вебмастерах. Пока кэш жив, может показываться старая иконка.
Минимум на релиз:
- icon 32×32 (PNG) + svg при возможности;
- apple-touch-icon для ярлыка на iOS;
- проверка во вкладке Chrome/Safari/Firefox;
- уникальность относительно конкурентов в нише.
Частые вопросы
Обязателен ли фавикон?
Технически сайт работает и без него. На практике пустой квадрат или чужой дефолт выглядит незавершённо и хуже запоминается.
Какой размер нужен?
База — 16×16 и 32×32. Для ярлыков и устройств удобны наборы крупнее (48, 180 для apple-touch и т.п.). Часто собирают из одного исходника PNG/SVG.
Какой формат?
Современный минимум: PNG и/или SVG + при необходимости ICO для старых клиентов. GIF/анимация почти не нужны и плохо поддерживаются.
Влияет ли на позиции?
Прямого «ранжирующего» веса нет. Косвенно помогает узнаваемости в выдаче и закладках, если иконка читается в маленьком размере.
Как быстро обновится в поиске и браузере?
Браузер и CDN часто кэшируют. В выдаче — дни–недели после смены. Жёсткого «ровно неделя» нет.
Можно ли взять иконку из бесплатной галереи?
Риск совпасть с чужим сайтом и нарушить права. Лучше упростить свой логотип или знак из айдентики.
Во вкладке пустой квадрат?
Соберём фавикон из айдентики и подключим корректно во всех браузерах.
Обсудить задачу
