Favicon для сайта: какие размеры нужны, где он виден и как поставить на конструкторе

Где виден favicon?

Favicon — это маленькая картинка сайта, которую браузер показывает во вкладке и в закладках, а поисковики используют в выдаче. Во вкладке она помогает найти сайт среди десяти открытых. Требования к значку Google и Яндекс описывают на отдельных страницах справки, и обе страницы разобраны ниже рядом, чтобы не открывать их по очереди.

Слово «favicon» ищут по-английски, а в редакторе rillo то же самое подписано «Иконка сайта (favicon)». Дальше в тексте это одно и то же. Яндекс в справке пишет «фавиконка».

Клиент, который открыл три сайта мастерских подряд, находит вашу вкладку по значку. Названия в узкой вкладке обрезаются, а цветной знак виден сразу.

Какие размеры и формат нужны?

Картинка в формате PNG подходит и Google, и Яндексу, а размеры в их справках названы разные. Google просит квадрат не меньше 8×8 пикселей и советует брать от 48×48, а Яндекс называет три размера: 120×120, 32×32 и 16×16. Остальные условия в таблице.

rillo делает из вашей картинки три PNG: 32×32, 48×48 и 180×180. Первый размер есть в списке Яндекса, второй соответствует совету Google, третий нужен устройствам Apple. Размера 120×120 в наборе нет. Справка Яндекса при этом пишет, что сервисы могут взять любой из значков сайта.

Загружайте картинку крупнее 180 пикселей по стороне. Из маленькой крупную не вытянуть: края размоются.

Что нарисовать, если логотипа нет?

Если логотипа нет, нарисуйте одну букву названия на сплошном фоне. Значок в 32 пикселя вмещает один знак, всё остальное сливается в пятно. Буква или простой знак на однотонном поле читаются на любом размере.

Пример: багетная мастерская «Паспарту» в Орле. Её логотип — рамка с тонким орнаментом и подписью, и в 32 пикселя орнамент превращается в серую кайму. Значок получился из буквы «П» светлым цветом на тёмно-зелёном квадрате: цвет совпадает с цветом сайта, буква крупная, деталей нет.

Проверяйте на настоящем размере. Уменьшите картинку до 32×32 и смотрите её не на экране редактора, а в обычном масштабе, на расстоянии вытянутой руки. Если букву приходится угадывать, утолщайте её или уберите тонкие линии. Если на фоне есть узор или переход цвета, замените его одним цветом.

Широкий логотип вписывается плохо. rillo обрезает картинку до квадрата по центру, поэтому края пропадут. Поставьте знак в середину и оставьте вокруг него поля. Тёмный знак на прозрачном фоне может пропасть на тёмной вкладке, поэтому заливайте фон.

Если ничего не загружать, rillo сам нарисует значок: логотип сайта, когда он есть, а иначе первую букву названия на акцентном цвете сайта. Для бесплатного сайта на пять страниц это нормальный вариант, а своя картинка нужна, когда хочется другой цвет или знак.

Как поставить иконку на конструкторе?

В rillo иконку загружают в «Настройки сайта» → «Поиск и соцсети», в поле «Иконка сайта (favicon)». Отдельный тариф для этого не нужен: поле есть в настройках любого сайта. Подсказка под ним: «Квадратное изображение. Подготовим PNG 32×32, 48×48 и 180×180 для устройств Apple».

1. Откройте «Настройки сайта» и выберите раздел «Поиск и соцсети».
2. В поле «Иконка сайта (favicon)» загрузите квадратную картинку: JPEG, PNG, WebP, AVIF или SVG.
3. Под полем появится строка «Подготовлены:» с тремя размерами, значит загрузка прошла.
4. Опубликуйте сайт. Правки в настройках попадают в черновик и на живой сайт приходят вместе с публикацией.

На опубликованной странице rillo пишет теги link: для 32×32 и 48×48 с rel icon и для 180×180 с rel apple-touch-icon. Руками в код лезть не нужно. Файл ICO в поле загрузки не принимается, сохраните значок как PNG.

В этом же разделе лежит описание для поиска, а как писать заголовок и описание страниц, показано в статье title и description: примеры для сайта услуг. Что ещё проверить перед запуском, собрано в руководстве проверка сайта перед запуском, а общую картину поисковых настроек rillo описывает страница SEO в rillo.

Почему иконка не обновляется?

Новый значок попадает в выдачу не сразу: Яндекс называет срок до двух недель после визита робота, Google пишет про срок от нескольких дней до нескольких недель. Во вкладке своего браузера вы можете видеть и старую иконку. Справки поисковиков про это молчат, поэтому проверяйте по шагам.

1. Убедитесь, что сайт опубликован после смены иконки: в черновике она есть, на живой странице её может не быть.
2. Откройте сайт в окне инкогнито или в другом браузере. Если там значок новый, а в вашем старый, дело в вашем браузере, а не в сайте.
3. Проверьте строку «Подготовлены:» в настройках. Если её нет, загрузка не прошла, и сообщение об ошибке стоит читать в окне настроек.
4. Для Яндекса отправьте главную страницу на переобход в Вебмастере. Как подключить сайт к Вебмастеру, написано в руководстве по добавлению сайта в Яндекс.
5. Для Google проверьте, что роботу Googlebot-Image не закрыт файл значка, а Googlebot — главная страница.

Меняйте значок редко. Google просит не менять адрес значка слишком часто, а в rillo каждая загрузка получает новый адрес.

Сделайте сегодня так: нарисуйте одну букву на однотонном квадрате, загрузите её в «Поиск и соцсети», опубликуйте сайт и откройте его в окне инкогнито. Через две недели посмотрите выдачу Яндекса.