Если «Яндекс» не видит фавикон — способы решения проблемы
Получи нашу книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Подпишись на рассылку и получи книгу в подарок!
Фавикон — это небольшой значок, который отображается в поисковой выдаче. Он привлекает внимание пользователя, побуждая его кликнуть на ссылку и открыть сайт.
Если человек добавляет понравившийся веб-ресурс в «Избранное», то фавикон также остается перед ссылкой.
Фавикон — это графический файл, путь к которому указывается в метатегах. Он создается в любом графическом редакторе или при помощи онлайн-сервисов.
Содержание скрыть
- Как правильно размещать фавиконку
- Как «Яндекс» работает с иконками
- Проблема с Яндекс.Директ
Как правильно размещать фавиконку
- Создайте файл формата ico. Допускаются также еще 4 формата: png, а также gif, bmp и jpeg. Размер файла в пикселях должен быть 16 пикс., 32 или 120 (квадратный).
- В head главной странице добавьте код:
- Для указания адреса на кириллице применяйте Punycode.
- Проверьте отображение иконки в браузере:
Если вы действовали по правилам, и ваш веб-ресурс проиндексирован «Яндексом», то через 2 недели после захода робота на сайт появится ваша иконка.
Как «Яндекс» работает с иконками
- Яндекс.Бот Yandex/1.02.000, собирающий фавиконки, по расписанию посещает главную страницу каждого сайта в индексе, где HTML ищет путь к favicon.ico.
- Если путь не прописан, бот идет в корень.
- Иконка преобразовывается в png размером 16*16, затем загружается на сервер фавиконок.
- Бот периодически проверяет иконку заново — частота его захода зависит от частоты обновления вашего веб-ресурса.
Иногда после создания favicon не отображается в «Яндексе». Давайте разбираться, почему так происходит.
Как проверить, что фавикон корректно отображается в «Яндексе»
- Способ первый — Яндекс.Вебмастер.
Если в разделе левого меню «Диагностика» нет уведомления о том, что робот-поисковик не загрузил файл, значит, все в порядке.
Если сообщение об ошибке появилось, значит, фавикон не отображается в поиске «Яндекса». - Способ второй: по прямой ссылке на базу фавиконок. Введите адрес: favicon.yandex.net/favicon/ваш домен.
Если изображение появляется, значит, все в порядке. - Вариант третий: проверяем фавиконку в базе Google. Если там она отображается, а в «Яндексе» ее нет — попробуйте подождать еще 2 недели. Возможно, фавиконка скоро попадет и в Yandex: www.google.com/s2/favicons?domain=ваш домен
- Вариант четвертый: проверка через специальные сервисы. Воспользоваться Favicon Validator можно бесплатно и без регистрации. В специальное поле вводится адрес — сервис выдаст результат и предложит варианты решения возможной проблемы. Самые популярные сервисы: ifavicon, html-kit.
Что делать, если «Яндекс» не видит favicon
- Попробуйте открыть фавиконку в браузере по прямой ее ссылке. Если этот файл открывается, значит, все в порядке (сервер отдает 200 ОК).
- Если не открывается, проанализируйте, не запрещен ли вышеуказанный файл к индексации в robots.txt, или, может быть, есть ошибка в его названии или в метатегах.
- Проверьте логин на посещение веб-ресурса роботом-поисковиком, найдите запись:
Если такая запись есть, значит, робот проиндексировал файл.
- Если у вас подключен SSL сертификат, вы могли не указать главное зеркало в Яндекс.Вебмастере. Укажите зеркало в HTTPS.
- Если в течение 2-х недель после посещения роботом favicon не появился, возможно, «Яндекс» не смог ее распознать.
Варианты решения проблемы
- Конвертируйте фавиконку в другой формат (один из разрешенных).
- Проверьте ее размер.
- Используйте четкие уникальные картинки. Иконки плохого качества могут удаляться из выдачи.
- Обновите файл на сайте и дождитесь посещения робота.
Если иконка так и не появилась, возможно, ваш веб-ресурс находится под фильтром.
Как определить, что сайт под фильтром
- Соответствующие уведомления в Яндекс.Вебмастере, фатальные ошибки, обнаруженные вирусы.
- Резко уменьшилось число проиндексированных страниц.
- Упала посещаемость.
- ТИЦ не определен. (Пройдите yandex.ru/yaca/cy/ch/ваш домен, если он от 0 или выше, то все в порядке).
- Онлайн-сервисы показывают проблемы с сайтом (Xtool, Pr-cy).
Следует устранить все нарушения и проблемы на сайте для того, чтобы выйти из-под фильтров. После этого иконка появится в поиске Yandex.
Проблема с Яндекс.Директ
В отдельных случаях фавикон не отображается для рекламной кампании. Подобные проблемы могут возникнуть у сайтов, реализованных на конструкторах, новых проектов, лендингов, веб-ресурсов на поддоменах. К сожалению, российский поисковик не дает гарантию отображения фавиконки в своих рекламных объявлениях.
Еще один вариант — иконка может быть не видна, если сайт в выдаче находится очень далеко (за 10 страницей). Работайте над улучшением качества вашего веб-ресурса, используйте белые методы продвижения, и иконка со временем обязательно появится.
Рассказать о статье:
Продвигайтесь в Семантике
– Только качественный трафик из Яндекса и Google
– Понятная отчетность о работе и о планах работ
– Полная прозрачность работ
21.08.2018 7881
Мы все разные. Почему результаты поиска одинаковы для каждого человека? На этот вопрос пытается ответить автор этой статьи. Они могут отличаться для каждого человека. Удобно, когда система понимает, что больше нравится конкретному человеку. Так, 2 года назад Google активно развивал персонализированный поиск. По словам Данни Салливана из Google персонализация поиска стала легче. Все дело в геолокации и языке, которые определяют,…
14.01.2019 9641
В прошлом году мы провели аудит контента. Удалили 31% статей в блоге. Два Месяца спустя трафик на оставшиеся статьи от 65 8354 посетителей вырос до 70 816 ежемесячно. Контента стало на треть меньше, а трафика больше. Siege Media увидели увеличение трафика примерно на 50% для одного из своих клиентов после урезания контента на 15%. Точно так же Робби Ричардс увеличил…
23.05.2019 4334
Внутренние ссылки помогают поисковым системам понимать старый контент и находить новые материалы на сайте. Вы написали классную колонку и опубликовали на сайте, но забыли поставить на нее ссылку из старой статьи. Если предположим, что страницы нет в карте сайта, на нее не ведут обратные ссылки, то веб-сканер может ее просто не найти. Что заявляют в Google: “Система постоянно ищет новые…
Как сделать favicon для сайта
Сегодня favicon – это возможность для бренда сайта выйти за пределы окна браузера и стать заметным и узнаваемым в разных контекстах пользовательского опыта. Визуальный значок ресурса позволяет выделиться среди конкурентов на странице поисковой выдачи. Его видно во вкладке браузера, в сниппетах результатов поиска, в закладках и на экране мобильного телефона. Он привлекает внимание и запоминается пользователям. Подробности рассказываем в нашей статье.
Последнее обновление: 17 октября 2022 года
- Что такое фавикон и каких форматов он бывает
- Какие требования предъявляют разные платформы
- С помощью каких инструментов можно создать иконку
- Можно ли не создавать фавикон и как это повлияет на выдачу
Что такое фавикон
Favicon – это сокращение от favorites icon, то есть иконка для избранного. Это может быть логотип сайта или любое другое изображение, которое позволит сделать ресурс узнаваемым. Первоначально фавикон служил для визуального выделения сайтов в закладках. Сейчас он отображаться практически везде, где это возможно: во вкладках и на пустом начальном экране десктопных и мобильных браузеров, в адресной строке и на странице поисковой выдачи рядом с url сайта. Когда вы сохраняете закладку на сайт на главном экране мобильного устройства, там тоже будет отображаться фавикон. Поэтому если раньше можно было создать favicon одного размера только для отображения в браузере, то сейчас необходимо генерировать иконки под разные контексты, платформы и технологии.
Так выглядят фавиконки во вкладках браузера и в сохраненных ссылках.
Формат и стили фавиконов
Очень долго основным форматом фавикона был .ico. Он удобен тем, что в файл можно прописать сразу несколько размеров иконок с разной битностью. Сейчас ему на смену пришли форматы .png и .svg. Формат .svg используется в Safari MacOS, а .png — в остальных операционных системах и платформах. .ico до сих пор используется, но современные версии браузеров иногда не могут выбрать правильную иконку в файле, из-за чего фавикон отображается в низком разрешении. Фавиконку можно сделать в форматах .jpeg и .gif, однако мы не рекомендуем их использовать, потому что такие фавиконы поддерживают не все браузеры.
С помощью сервиса caniuse.com можно проверить поддержку браузерами разных типов фавиконов. Современные сайты переходят на форматы фавиконов в .svg и .png, так как те мало весят и хорошо отображаются..
Чтобы фавиконки хорошо отображались в разных контекстах – в списках закладок, контекстном меню, на главных экранах мобильных устройств и телевизоров, создайте их в двух стилях.
- Один вариант с прозрачным фоном. Этот фавикон будет отображаться во всех местах рядом с url-адресом или именем сайта: в адресной строке, в закладках и пр.
- Второй вариант со сплошной заливкой. Он будет использоваться в сетчатых закладках и контекстных меню, где браузер или устройство применяет маску к фону, например, на домашнем экране устройства.
Фавиконки отображаются на пустой стартовой странице Google
Оставить заявку
Особенности фавиконов для разных платформ
Десктоп
Несмотря на то, что формат .ico постепенно устаревает, его всё ещё можно встретить в браузерах Internet Explorer 10 версии и ниже. В них .png не поддерживается, поэтому для корректного отображения нужно прописать в коде сайта комбинацию .ico и .png форматов фавиконок. Размеры иконок: Google рекомендует устанавливать иконки, размеры которых кратны 48 пикселям. Т.е. 48х48, 96х96, 144х144. Или использовать формат .svg, который не имеет конкретного размера. Яндекс указывает в Справке, что рекомендуемые размеры favicon: 120х120 пикселей – именно такая иконка выглядит четче и заметнее в его сервисах, а также 16х16, 32х32 пикселей. Из всех форматов рекомендуемый – также .svg.
Если вы используете формат .ico, мультиразмерную иконку удобно создавать в сервисе icoconvert или аналогичном. В настройках выберите следующие размеры: 16х16; 32х32; 48х48 пикселей. Andriod, Chrome и Opera Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.
Так выглядят фавиконы в мобильной версии браузера Google Chrome
Andriod, Chrome и Opera
Google рекомендует создать фавикон для этих платформ размером 192х192 и 512х512 пикселей в формате .png. Назовите файлы соответственно android-icon-192×192.png или android-chrome-512×512.png.
Если вы хотите, чтобы иконку вашего сайта можно было сохранить на домашнем экране телефона, планшета и даже телевизора теперь, создайте файл .png размером 192х192 пикселя и веб-манифест – текстовый файл JSON, который предоставляет информацию о приложении. Затем добавьте файл site.webmanifest на свой сайт и сошлитесь на него в HTML-странице в теге таким образом:
В манифесте есть ключ icons. Он принимает список иконок, их размеры и форматы. Если его не указать, браузер будет искать в коде такие варианты, как favicon.ico, Если вы подключили манифест, то можно сохранить сайт на экране устройства, как приложение.
Если сохранить сайт на домашнюю страницу мобильного устройства, favicon будет выглядеть, как приложение
Mac OS и iOS Safari Web Clip
Для корректного отображения в Mac OS favicon нужно создавать в формате .svg. Тогда иконка корректно отобразится при закреплении вкладки в браузере Safari. При создании фавикона, его нужно сделать простым, плоским и убрать все тени.
Для iOS Safari создают apple touch icon – фавикон в формате .png размером 180х180 пикселей. Как и в ОС Android, страницу сайта можно сохранить на экран мобильного устройства, и иконки в этом случае будут выглядеть как приложение. Такая ссылка называется Web Clip.При создании фавикона для iOS помните, что уголки иконки будут автоматически скруглены, поэтому отступите от краев примерно по 4 пикселя с каждой стороны.
Apple touch icon используются не только в iOS. Браузер Chrome также может искать их в коде сайта, так как такие фавиконки часто встречаются, сделаны в нужном формате .png и в высоком разрешении.
Размеры фавиконов для разных экранов устройств Apple:
Ретина версия 6 и ниже Ретина версия 7 Не ретина версия 6 и ниже Не ретина версия 7 iPhone 144х144 120х120 57х57 60х60 iPad 144х144 152х152 72х72 76х76 Для iPhone 6 Plus версия 8 и выше – 180х180 пикселей.
Другие варианты
Android TV (до 2014 г. – Google TV) Opera Coast 96х96 228х228 Как создать?
Для создания фавикона используйте графические редакторы или специальные сервисы.
Adobe Photoshop или Figma
Если у вас есть навыки работы в графических редакторах, будет несложно создать фавиконку. В Photoshop , например, для этого даже есть специальный плагин – Favicon . ico . В редакторе сразу можно задать размер созданного
изображения в пикселях и фон – прозрачный или непрозрачный.Realfavicongenerator.net – генерирует фавикон разных размеров онлайн. Загружайте исходник размером не менее 260х260 пикселей, желательно квадратной формы. Затем выберите настройки для iOS, Android, Windows Phone, MacOS Safari. Дополнительно выберите степень сжатия. В результате получаете все типы иконок и код для вставки.
Favicon.cc – еще один сервис для создания favicon формата .ico. Вы можете загрузить готовую картинку или нарисовать самостоятельно, используя инструменты графического редактора.
Не стоит создавать фавикон простым переименованием файла в нужный формат. Допустим, у вас есть файл favicon.png и вы его просто переименовываете favicon.ico. Такой значок будет отображаться с ошибкой или не показываться.
Также лучше не брать иконки из открытых источников. Они неуникальные и если их скачает кто-то еще, ваш сайт не будет отличаться. Если же вы случайно установите в качестве фавикона для сайта логотип чужой компании, к вам могут возникнуть юридические претензии. Лучше создать свою уникальную иконку самостоятельно или закажите создание фавикона у профильного специалиста.
Как установить
Задайте правильное имя – favicon .ico или другой тип расширения. Помните, что браузеры прежних версий не смогут определить иконку, если она будет в другом формате. Перед загрузкой на сайт откройте свойства файла, убедитесь, что нужный формат есть не только в названии файла, но и в его типе.
Делайте кроссплатформенные иконки. Пропишите правильно размеры и форматы для разных мобильных платформ и браузеров. Современные роботы и браузеры при отображении выбирают наиболее подходящий формат из загруженных. Он будет отображаться лучше, чем при ресайзе, когда фавикон загружен один и его приходится изменять под требуемые размеры. Воспользуйтесь сервисом realfavicongenerator.net.
Положите файлы в корневую директорию сайта и проверьте корректность. Для этого введите в адресную строку “yoursite.com/ favicon .ico” для файлов формата .ico, для других форматов — соответствующее расширение файла. Браузер должен отобразить иконку.
Пропишите адрес в коде на главной странице в теге . Требование желательно, но не обязательно, потому что браузеры новых версий автоматически ищут фавикон в корневом каталоге, если не нашли его в коде. С помощью можно задавать для разных страниц сайта собственные иконки.
Иконки в устройствах Apple всегда закругляются по углам, чтобы этого избежать используйте apple — touch — icon — precomposed вместо apple — touch — icon .
Проверьте ответ сервера. Фавикон индексирует специальный робот. Чтобы индексация прошла успешно, проверьте, что ссылка на фавикон не закрыта от индексации в файле robot.txt и отдает ответ сервера HTTP 200.
Узнайте, виден ли фавикон. Проверьте через сервисы, подставив адрес своего сайта:
- в Яндекс — http://favicon.yandex.net/favicon/mysite.ru
- в Google — http://www.google.com/s2/favicons?domain=mysite.ru.
Если у сайта нет фавиконки, то Яндекс.Вебмастер предупреждает об ошибке. Она может отображаться в журнале с системной информацией. Если же браузер не нашел в коде сайта нужный файл, например, favicon.ico, то сервер зафиксирует ошибку 404.
Когда поисковые роботы видят наличие технических недостатков, то понижают сайт в выдаче. Так фавиконы косвенно влияют на SEO-продвижение ресурса.
Красивая иконка на табло Яндекс Браузера
Переведя статью об иконках сайта, я, конечно же, решил настроить всё как надо на своих проектах. То есть на личном сайте и сервисе по генерации иконок (было бы странно создавать такой сервис, и не настроить для него иконки как следует). Однако, столкнулся с парочкой проблем.
Первая из них — это то, что старые версии сафари почему-то не воспринимали нормально иконку — она то появлялась, то пропадала. И методом известного еврейского учёного Тыка я пришёл к выводу, что лучше поставить иконку apple touch выше всех остальных — другие браузеры заменять на неё не будут, но зато в сафари съест её первой и всё отобразится нормально. То есть порядок я теперь использую такой:
Но перейдём ко второй, основной проблеме. Имя этой проблемы — Яндекс.Браузер (Браузер Яндекс? Я.Браузер?). Кто-нибудь, расскажите ребятам, что вечно называть свои приложения и сайты по-разному — это плохой маркетинговый ход (Я.Диск, потом Яндекс.Диск или Яндекс Диск, после — просто Диск и так со всеми приложениями по кругу).
Так вот, Яндекс Браузер наотрез отказывался нормально показывать иконку сайта на своём табло. Табло — это не грубое название лица, а страница, которая появляется при открытии новой вкладки. Если быть точным, он вовсе не показывал никакую иконку — просто писал текстом «mihailgok».
Как хороший мальчик, первое, о чём я подумал — надо прочитать API, наверняка добрые люди из Яндекса всё в нём описали. Каково же было моё удивление, когда на странице API Яндекс Браузера я увидел это:
НИ-ЧЕ-ГО. Ладно, подумал я, тогда мы гуглим (простите, яндексим) проблему. И действительно выясняем, что, у Яндекса некогда было API, описывающее работу с виджетом на табло, но когда мир нуждался в нём больше всего, оно исчезло.
- Я наткнулся на одну хорошую подробную статью (в ней есть некоторые неточности, а что-то уже не работает).
- Также в веб-архиве откопал-таки старое API.
Таким образом мы подошли к созданию иконки для Табло Яндекс Браузера.
Вот, что нужно сделать (коротко).
- Создать файл манифеста.
- Создать изображение (можно использовать квадратное, но лучше 100 на 300).
- Подключить файл манифеста.
Файл манифеста
Начнём с самого сложного — манифеста.
< // ОБЯЗАТЕЛЬНАЯ ЧАСТЬ "version": "", "api_version": , "layout": , // ОПЦИОНАЛЬНАЯ ЧАСТЬ "feed": >где:
version — версия вашего манифеста;
api_version — версия апи, используемого манифестом;
layout — информация вашего «виджета».layout выглядит так:
"layout": < "logo": "https://mihailgok.ru/tableau.png", "color": "#0035FF", "show_title": none >,logo — путь к картинке, которая будет отображаться на виджете. У неё должен быть прозрачный фон и разрешение 100 в высоту и 300 в ширину.
В API рекомендуют высоту до 50, но разрешения экранов с 2014 года поднялись. Я увеличил параметры в 2 раза и всё работает.
color — цвет фона;
show_title — информация о том, как отображается title страницы.Уточнения
Поля logo и color могут иметь как статические значения, так и зависящие от языка интерфейса браузера. В этом случае нужно указать варианты для разных языков и обязательно тот, который будет отображаться по умолчанию (т.е. когда у пользователя локаль браузера отлична от перечисленных в списке).
"layout": < "logo": < "en": "", "ru": "", "default": "" >, "color": < "en": "", "ru": "", "default": "" > >Начиная со второй версии API Табло поле show_title может принимать одно из трех значений:
- all — заголовок отображается независимо от того, для какой страницы сайта он был создан;
- internal — заголовок отображается только в том случае, если виджет был создан для внутренней страницы сайта (по умолчанию);
- none — заголовок не отображается.
Ранее была возможность отображать нотификаторы, однако не уверен, что это работает сейчас.
Чтобы добавить нотификатор на виджет, в манифесте необходимо описать:
- адрес сервера, с которого запрашиваются данные о нотификаторах,
- формат ответа сервера (json или xml),
- название и значок нотификатора.
Нотификаторы обновляются при каждом открытии Табло. Браузер отправляет запросы на адрес в поле url, ожидая от сервера ответа со значениями. Если сервер три раза подряд вернул некорректный ответ, то значения нотификатора обнуляются.
Ограничение. На виджете могут быть отображены только три нотификатора.
"feed": < // ОБЯЗАТЕЛЬНАЯ ЧАСТЬ "url": "", "format": "", // ОПИСАНИЕ НОТИФИКАТОРА "notifiers": [ < "name": "<уникальное название нотификатора>", //Значок нотификатора загружается с сервера сайта: "icon": "<URL значка нотификатора>", //либо используется ОДИН ИЗ предустановленных значков: "icon": "%BELL%", "icon": "%EARTH%", "icon": "%FRIEND%", "icon": "%MESSAGE%", "icon": "%PHOTO%", "icon": "%CHAT%", // ОПЦИОНАЛЬНАЯ ЧАСТЬ "<span xmlns="http://www.w3.org/1999/xhtml" >path<div ><iframe src="about:blank" ></iframe><div ><i ></i><div ><div ><span >[no-highlight[</span><p xmlns="" ><a ></a>Ответ сервера может содержать элемент со значением нотификатора на верхнем уровне. В этом случае описание нотификатора в манифесте должно содержать только поле <span >name</span> с соответствующим названием. Если же значение расположено глубже в иерархии ответа, необходимо использовать поле <span >path</span>. Это поле должно указывать на свойство (для JSON-ответа) или элемент (для XML-ответа), из которого нужно извлекать значение. Использование полей <span >name</span> и <span >path</span> и соответствующие ответы сервера показаны в <a href="/web/20140929153100/http://api.yandex.ru/tableau/doc/index.xml#widget-ex">примерах для JSON- и XML-ответов</a>.</p><span >]no-highlight]</span></div></div></div></div></span>": "<путь к значению нотификатора>", >] >Ответ сервера может содержать элемент со значением нотификатора на верхнем уровне. В этом случае описание нотификатора в манифесте должно содержать только поле name с соответствующим названием. Если же значение расположено глубже в иерархии ответа, необходимо использовать поле path. Это поле должно указывать на свойство (для JSON-ответа) или элемент (для XML-ответа), из которого нужно извлекать значение. Использование полей name и path и соответствующие ответы сервера показаны в примерах для JSON- и XML-ответов.
Уточнение
Начиная с третьей версии API Табло для нотификатора можно указать параметр type — тип значения в нотификаторе:
- int (по умолчанию),
- float (если в десятичной части более двух цифр, то будут отображены только первые две).
Итоговый манифест для сайта выглядит вот так:
Создание файла логотипа и подключение манифеста.
- Создаём файл 300px в ширину и 100px в высоту.
- Убираем белый фон (делаем прозрачным).
- Помещаем логотип (тоже без фона) и растягиваем его на всю высоту.
- Сохраняем как файл как png.
Генератор делает примерно тоже самое.
В итоге подключаем наш манифест на страницу:
И всё! Наконец-то наш сайт выглядит замечательно на Табло Яндекс Браузера.
Я сделал белые иконки и основной цвет фоном, так показалось красиво.
Одна проблема — чтобы это отобразилось, нужно удалить сайт с табло, почистить историю браузера. Затем зайти на сайт и только после того, как вы зашли и весь контент прогрузился, — можно добавлять сайт обратно на табло Яндекс Браузера и он отобразится нормально.
Если добавите сайт в табло до того, как зайдёте или не удалите с табло перед очисткой кэша, — всё отобразится по-старому.
Как настроить корректное отображение favicon сайта на различных устройствах
Favicon (favorite icon) — маленький значок (обычно логотип или часть логотипа), который отображается во вкладке браузера рядом с заголовком (title) страницы. На сегодняшний день у этой иконки существует еще множество предназначений. В этой статье мы рассмотрим основные из них. А также пройдемся по основным форматам и типам favicon.
Для чего нужен Favicon?
1. Иконка на вкладке браузера
Сегодня абсолютный стандарт использовать favicon рядом с заголовком страницы во вкладке браузера. Такая простая иконка favicon есть практически у всех сайтов.
2. Иконка в закладках браузера
Если сохранить страницу сайта в закладках браузера, то рядом с названием сохраняемой закладки будет также отображаться и иконка favicon. Также этот значок будет отображаться в настройках браузера в разделах «Закладки» и «История».
3. Иконка в поисковой выдаче
Поисковые системы Яндекс и Google выводят favicon слева от ссылки на страницу сайта. Это важный фактор, т.к. на сайты, имеющие favicon, кликают чаще, чем на сайты без favicon.
4. Иконка на рабочем столе компьютера
Если сохранить страницу сайта на свой компьютер, то будет создана иконка, которую можно, например, вынести на рабочий стол или панель быстрого доступа Windows. Если эта иконка будет представлять собой логотип, то это повысит лояльность к вашему бренду, а также его узнаваемость.
5. Иконка в рейтингах и на стартовых страницах
При регистрации сайта в различных внешних рейтингах и сервисах, рядом с названием и ссылкой часто также отображается и иконка favicon. Наличие favicon также выгодно выделяет сайт на фоне остальных. В целом можно сделать вывод о том, что наличие favicon в любом из перечисленных случаев помогает ассоциировать сайт с брендом, который он представляет, повышает узнаваемость и притягивает к сайту дополнительное внимание.
Какой должен быть формат файла Favicon?
Изначально, придуманный компанией Майкрасофт формат .ico был стандартом и использовался как в ранних версиях Internet Explorer. Его также поддерживали и считали стандартом и другие браузеры. Однако на данный момент гораздо чаще для этих целей используются файлы формата .png, что поддерживается стандартом разметки HTML5.
Формат .ico всё еще поддерживается основными браузерами, но считается устаревшим, поэтому всё же рекомендуется использовать для favicon файлы формата .png.
Какой должен быть размер Favicon?
Исторически сложились три стандартных формата favicon: 16×16, 32×32, 48×48. Однако в последние годы веб-платформы развились очень разносторонне, и на сегодняшний день включают в себя смартфоны, планшеты, телевизоры. На всех этих устройствах используются различные браузеры для доступа в интернет. Исходя из этого начали появляться и другие форматы favicon, такие как 96×96, 128×128, 196×196 и некоторые другие. Очень сильно повлияло на стандарты размеров favicon появление первых iPhone и знаменитых retina-экранов от Apple с удвоенной плотностью пикселей, диктующих свои размеры изображений для favicon. Проанализировав все возможные варианты устройств и мест использования favicon мы определили следующий набор иконок, которые обязательно должны присутствовать на сайте (значения указаны в пикселях):
Для устройств Apple
- 57×57 — iPhone (iOS 6 и ниже, экран Classic)
- 60×60 — iPhone (iOS 7, экран Classic)
- 72×72 — iPad (iOS 6 и ниже, экран Classic)
- 76×76 — iPad (iOS 7, экран Classic)
- 114×114 — iPhone (iOS 6 и ниже, экран Retina)
- 120×120 — iPhone (iOS 7, экран Retina)
- 144×144 — iPad (iOS 6 и ниже, экран Retina)
- 152×152 — iPad (iOS 7, экран Retina)
- 180×180 — iPhone (iOS 8 и выше, экран 6 Plus)
Для устройств на Windows
- 70×70 — закладки в Edge и плитка в Пуск (размер: Мелкий)
- 150×150 — плитка в Пуск (размер: Средний)
- 310×150 — плитка в Пуск (размер: Широкий)
- 310×310 — плитка в Пуск (размер: Крупный)
Остальные случаи
- 16×16 — для закладок браузеров
- 32×32 — для закладок на панели задач
- 96×96 — для ярлыков на рабочем столе
Например, на нашем сайте qmedia.by это выглядит следующим образом: