Фавикон

Какого размера в пикселях делать фавикон?

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

Центр Google Поиска советует делать фавикон квадратным (1:1) и крупнее 48×48 пикселей, чтобы он хорошо смотрелся на разных экранах. Если используется файл настроек веб-приложения (манифест), web.dev рекомендует включить иконки как минимум 192×192 и 512×512.

В таблице ниже — часто используемый набор. Какие файлы реально нужны, немного зависит от того, как сделан сайт, поэтому определите это вместе с веб-студией.

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

Какой формат фавикона лучше: ICO, PNG или SVG?

Сейчас часто делают основным PNG, а при необходимости добавляют ICO и SVG. Google сообщает, что поддерживает разные форматы: ICO · PNG · GIF · JPEG и др.

ICO — старый формат, в одном файле которого можно хранить несколько размеров, и его читают почти все браузеры. SVG не теряет качества при увеличении, но используется ещё не везде, поэтому надёжнее добавить и PNG.

iPhone на главном экране использует не обычный фавикон, а отдельную иконку «apple-touch-icon». Её делают не на прозрачном, а на сплошном фоне — так она аккуратно выглядит на главном экране.

SVG-фавикон можно сделать так, чтобы он менял цвет под тёмную тему. Но поддержка в браузерах разная, поэтому, если в этом нет особой нужды, проще один дизайн, который виден и на светлом, и на тёмном фоне.

Как сделать фавикон и подключить его к сайту?

Если есть файл логотипа, фавикон делается в несколько шагов. Делаете ли вы его сами или поручаете веб-студии, зная порядок, проще проверить результат.

Некоторые современные конструкторы и фреймворки автоматически создают код подключения, если положить файлы иконок в определённую папку. Нужно ли вставлять код вручную, спросите у веб-студии.

Обязательно сохраните большой исходный файл. Если позже понадобится новый размер, а увеличивать придётся маленький файл, значок получится размытым.

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

1. 01Выберите часть логотипа, которая узнаётся даже в маленьком размере (первая буква, символ).
2. 02Разместите её крупно на квадратном холсте, оставив по краям лишь небольшой отступ.
3. 03Сначала сделайте большой исходник, например 512×512, а из него — нужные маленькие размеры.
4. 04Проверьте, различима ли форма при уменьшении до 16×16 · 32×32; если она сливается, сделайте линии толще.
5. 05Добавьте в начало главной страницы сайта код подключения «icon» · «apple-touch-icon».
6. 06Проверьте во вкладке браузера, при добавлении на главный экран телефона и на светлых и тёмных вкладках.

Почему фавикон не отображается в результатах поиска Google?

Чаще всего не выполнено одно из условий Google. Google требует, чтобы код подключения фавикона был на главной странице сайта и чтобы поисковый робот Google мог прочитать и главную страницу, и файл фавикона.

Фавикон учитывается только один на адрес сайта (хост); главная страница подраздела (например, адрес/shop) отдельно не учитывается. Важно также не менять часто адрес файла фавикона.

Даже при выполнении всех условий значок меняется не сразу. Google сообщает, что повторное сканирование может занять от нескольких дней до нескольких недель; запрос на индексацию главной страницы через инструмент проверки URL в Search Console может немного ускорить процесс. Учтите, что даже при соблюдении условий показ не гарантирован.

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

Как оформить фавикон для разных сфер?

Фавикон помогает найти ваше заведение среди десятков вкладок, поэтому собственный узнаваемый знак полезнее, чем картинка по теме сферы. Распространённые изображения — чашка кофе или ножницы — легко путаются с другими заведениями.

Самым чётким в уменьшенном виде будет один основной цвет логотипа. Градиенты и тонкие линии при размере 16 пикселей почти не видны.

Сделав значок, откройте его среди нескольких вкладок и сравните. Самый надёжный критерий — сразу ли ваш значок бросается в глаза рядом со значками часто посещаемых сайтов.

• Кафе: первая буква названия в круге фирменного цвета.
• Салон: только символ из логотипа, перерисованный толстыми линиями.
• Мастерская: рукописный логотип в уменьшенном виде не читается, поэтому — только один инициал.
• Онлайн-продажи: клиенты часто держат открытыми много вкладок магазинов, поэтому делайте сильный цветовой контраст, чтобы значок выделялся.

Какие ошибки чаще всего совершают с фавиконом?

Самая частая ошибка — вписать горизонтальный логотип в квадрат целиком, из-за чего он становится крошечным. Нередко и чёрный логотип на прозрачном фоне, который не виден на тёмных вкладках.

Бывает, что остаётся стандартная иконка конструктора сайтов. Это видно с одного взгляда на вкладку, поэтому обязательно проверьте перед запуском.

Если вы заменили файл фавикона, а на вашем компьютере значок прежний, обычно это браузер сохранил старую иконку. Откройте сайт в другом браузере или в режиме инкогнито — так видно, изменился ли значок.

Что уточнить у веб-студии о фавиконе?

Если до запуска уточнить у веб-студии четыре пункта ниже, значок будет чётко виден везде — во вкладках, в поиске, на главном экране телефона.

• Сделаете ли вы иконки для вкладки браузера, поиска Google и главного экрана телефона?
• Добавлен ли фон или обводка, чтобы значок был виден на тёмном экране?
• Не закрыт ли файл фавикона от поискового робота Google?
• Можно ли получить исходный файл (в большом размере)?