Статья
Что такое фавикон и зачем он нужен сайту
Фавикон — маленький значок сайта во вкладке браузера, в закладках и рядом с сайтом в результатах поиска. Он крошечный, но его видят чаще, чем любую другую картинку на сайте. Разбираем, какие форматы и размеры нужны, как установить фавикон и что делать, если Яндекс его не показывает.
Где видно фавикон
- во вкладке браузера — особенно важно, когда у человека открыто двадцать вкладок;
- в закладках и истории браузера;
- на главном экране телефона, если сайт добавили туда как ярлык;
- в результатах поиска Яндекса и Google — рядом с адресом сайта.
В выдаче фавикон работает как маленький логотип: по нему сайт узнают среди десятка ссылок.
Какие нужны размеры и форматы
| Где | Что подготовить |
|---|---|
| Браузеры | SVG — чёткий на любом экране; на всякий случай ICO или PNG 32×32 |
| Яндекс | 120×120, 32×32 или 16×16 пикселей; лучше SVG или 120×120 — так значок в сервисах Яндекса заметнее; анимация не поддерживается |
| Квадрат со стороной, кратной 48 пикселям: 48×48, 96×96, 144×144 | |
| iPhone и iPad | PNG 180×180 для ярлыка на главном экране |
| Android | PNG 192×192 и 512×512 в файле манифеста сайта |
Как сделать фавикон
- Из логотипа, а не логотипом целиком. Полное название в квадрате 16×16 превратится в серое пятно. Нужен знак, первая буква или упрощённый символ.
- Контрастный и простой. Проверьте, как значок выглядит на светлой и тёмной вкладке браузера.
- С отступами. Знак, который упирается в края квадрата, выглядит обрезанным.
- Квадрат с фоном часто читается лучше прозрачного: на тёмной теме браузера тёмный знак без фона пропадает.
Генераторы фавиконов соберут все размеры из одной картинки, но исходник лучше нарисовать под маленький размер, а не просто уменьшить логотип.
Как установить
- Сайт на коде. Файлы кладут на сайт, а в раздел
<head>каждой страницы добавляют ссылки на них — это делает разработчик за несколько минут. - Тильда и другие конструкторы. В настройках сайта есть поле для иконки — достаточно загрузить картинку.
- WordPress. В настройках темы обычно есть пункт «Иконка сайта».
После установки откройте сайт в другом браузере или в режиме инкогнито: браузеры хранят старый значок долго.
Почему фавикон не появляется в поиске
- Нужно время. Поисковик обновляет значок не сразу — иногда несколько недель.
- Файл недоступен роботу. Проверьте, что он открывается по прямой ссылке и не закрыт в robots.txt — подробно о нём в статье «robots.txt простыми словами».
- Не тот размер или формат. Сверьтесь с таблицей выше.
- Ссылки нет на главной странице. Поисковики ищут указание на фавикон в коде главной.
Если значок не появился через несколько недель, посмотрите сообщения в Яндекс Вебмастере — о нём статья «Яндекс Вебмастер».
Как устроено у нас
Наш фавикон — знак студии, стилизованная буква A, белая на тёмном квадрате со скруглёнными углами. Это не уменьшенное название AETHER, а только знак: в размере вкладки целое слово не прочитать. Основной файл — SVG, отдельно — PNG для ярлыка на iPhone. О том, какие ещё версии логотипа нужны сайту, — в статье «Логотип для сайта».
Если сайт ещё предстоит сделать
Фавикон, заголовки и описания страниц для поиска проще продумать при разработке, чем добавлять потом. Базовая подготовка к поиску — заголовки, описания, разметка — входит в наш лендинг.