Ваш логотип во вкладке браузера

Что такое фавикон и где его видно

Фавикон (favicon, от favorite icon) - маленький значок сайта, который браузер показывает рядом с заголовком страницы. Он стоит во вкладке, в закладках и на панели закладок, в истории и в списке открытых вкладок на телефоне, а Chrome ставит его в ярлыки на новой вкладке. Google показывает фавикон рядом с названием сайта и в результатах поиска по своим правилам, на компьютере и на телефоне.

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

Зачем фавикон вашей витрине

• Узнаваемость. Среди открытых вкладок клиент ищет не текст, а картинку: ваш логотип находят за секунду, даже когда заголовок обрезан до двух слов.
• Доверие. Значок рядом с названием - признак законченного сайта. Пустой глобус выглядит как страница, которую забыли доделать.
• Возврат. Закладка и история хранят страницу вместе со значком: вернувшись через месяц, клиент узнаёт вас по логотипу, а не по адресу.
• Единый знак. Та же аватарка стоит на иконке приложения на телефоне и в превью ссылки в мессенджере, поэтому витрина выглядит одинаково везде, где её открывают.

Как это сделано во Флоулиап

Фавикон витрины собирается из аватарки компании: круглая картинка 64×64 px с прозрачными углами. Браузеры не применяют стили к фавикону, поэтому картинка делается физически круглой - так она совпадает с аватаркой в кабинете и в превью ссылок. Значок стоит на всех страницах витрины: визитка, запись, магазин, карточки товаров и контакты, в том числе на своём домене.

1. 1Загрузите аватарку компании в кабинете: это можно сделать на плашке «Иконка приложения» в «Настройках» кнопкой «Загрузить аватарку компании».
2. 2Откройте витрину на компьютере: во вкладке рядом с названием стоит ваш логотип.
3. 3Сменили аватарку - новый значок появится после обновления страницы: браузер держит прежний фавикон в своём кэше, а закладки обновляют его при следующем открытии.

Что учесть, если делаете фавикон для своего сайта

• Квадрат и запас по размеру. Google принимает значок от 8×8 px, но рекомендует больше 48×48, чтобы он выглядел чётко везде; форматы - PNG, ICO, JPEG, GIF и другие из списка Google.
• Простой силуэт. В 16 px не читаются мелкие детали и текст: оставьте знак, а не полное название.
• Один значок на домен и постоянный адрес файла: Google хранит один фавикон на сайт и не любит, когда адрес меняется.
• Проверка в обеих темах. Вкладки бывают светлыми и тёмными, значок не должен пропадать ни на одной из них.
• Доступ роботам. Файл фавикона и главная страница должны быть открыты для обхода, иначе значок в поиске не появится.
• Тот же знак, что в приложении и соцсетях: клиент должен узнавать вас по одному и тому же изображению.