Яндекс favicon


Что такое favicon?

Favicon (англ. Favorite Icon), как многие наверняка знают, это такая иконка в специальном формате, которая отображается в адресной строке, при посещении какого-либо сайта, например этого, вкладке браузера или в его закладках (“Избранном”). Обычно она хранится в корневой папке сайта и называется favicon.ico.

Какая от фавиконов польза?

Использование этой иконки имеет множество положительных сторон. Во-первых, эта иконка запоминается посетителям порою лучше, чем название сайта. Посмотрите на изображение, какая иконка вам не знакома?

Примеры брендовых фавиконов (Опера, Мозилла, Виндоус, Одноклассники и т.д.)

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

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


Отображение иконок favicon во вкладках браузера

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

Отображение фавиконок в результатах поиска Яндекс

Исходя из сказанного о лучшей кликабельности сайта с фавиконом, вот пара советов, чтобы улучшить этот CTR:

  • Применяйте фавикон, на который хочется кликнуть (если не используете логотип компании);
  • Сделайте несколько дизайнов фавиконок для различных событий (напр. Нового Года, Дня Святого Валентина или Дня космонавтики, …). По запросу “одноклассники” я недавно наблюдал в выдаче яндекса деда мороза ?
  • Иконка должна соответствовать тематике сайта.

Как Яндекс работает с фавиконками?

Алгоритм работы Яндекса с иконками примерно следующий:

1. Специальный Яндекс.Бот, отвечающий за сбор и обновление иконок, поочередно, по своему расписанию, запрашивает главную страницу сайтов в своем индексе для нахождения в коде HTML пути к favicon.ico. Этот бот носит название “Yandex/1.02.000 (compatible; Win16; F)”.

2. Если в коде не обнаружено использование фавикон, тогда берется путь по умолчанию http://www.website.ru/favicon.ico.

3. Иконка загружается на сервер Яндекса (favicon.yandex.net), предварительно над ней проводится операция преобразования к формату PNG 16×16 пикселей. После этого шага иконка доступна по адресу

http://favicon.yandex.net/favicon/devaka.ru

где последняя часть является именем нужного домена (введите yandex.ru, например).

4. Бот, в зависимости от частоты обновления вашего сайта, периодически перепроверяет иконку, чтобы его база всегда содержала текущие пиктограммы.

По своим логам я заметил, что на необновляемом сайте бот заходит примерно раз в месяц:

213.180.207.227 – — [03/Oct/2008:15.


#8212; [07/Dec/2008:03:20:33 +0200] “GET / HTTP/1.1” 200 3844 “-” “Yandex/1.02.000 (compatible; Win16; F)”

На частообновляемом сайте, например на этом блоге, робот Яндекса проверяет иконку 5 раз в месяц, приблизительно раз в неделю.

213.180.207.227 – — [31/Aug/2008:01:02:06 +0300] “GET / HTTP/1.1” 200 35269 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [05/Sep/2008:11:51:15 +0300] “GET / HTTP/1.1” 200 33993 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [09/Sep/2008:20:12:00 +0300] “GET / HTTP/1.1” 200 33830 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [14/Sep/2008:08:19:29 +0300] “GET / HTTP/1.1” 200 33784 “-” “Yandex/1.02.000 (compa.


20;Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [10/Oct/2008:05:02:48 +0300] “GET / HTTP/1.1” 200 32254 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [15/Oct/2008:13:29:02 +0300] “GET / HTTP/1.1” 200 33625 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [19/Oct/2008:09:08:18 +0300] “GET / HTTP/1.1” 200 35325 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [25/Oct/2008:03:37:18 +0300] “GET / HTTP/1.1” 200 41338 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [08/Nov/2008:20:15:54 +0200] “GET / HTTP/1.1” 200 41112 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [13/Nov/2008:23:12:28 +0200] “GE.

21:49:34 +0200] “GET / HTTP/1.1” 200 50510 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [19/Dec/2008:07:53:10 +0200] “GET / HTTP/1.1” 200 49363 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [24/Dec/2008:09:58:38 +0200] “GET / HTTP/1.1” 200 44062 “-” “Yandex/1.02.000 (compatible; Win16; F)”

Желательно, чтобы иконка в HTTP заголовках возвращала Content-Type: image/x-icon, хотя на данный момент Яндекс умеет работать и с gif, png и другими форматами тоже. Для каждого сайта апдейт фавиконок происходит по своему расписанию.

Как сделать favicon.ico?

Для того, чтобы сделать свою пиктограмку, можно воспользоваться специальными сервисами по генерации иконок, например: http://www.favicon.cc/. Либо вы можете заказать дизайн favicon у специальных дизайнерских web-студий, они вам сделают пиктограмку профессионально и по теме. Также вы можете нарисовать иконку сами в фотошопе. Для сохранения изображений в photoshop в формате .ico, необходимо поставить специальный плагин (”скачать для windows“).

Как установить иконку favicon на свой сайт?

Используйте для этого приведенный ниже HTML код в теге <head>


<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon» />

<link rel=»icon» href=»/favicon.ico» type=»image/x-icon» />

P.S. Анимированные иконки преобразуются в статические PNG.
P.P.S. Иногда Яндекс плохо обрабатывает прозрачность, например для google.

devaka.ru

Яндекс.Вебмастер не видит favicon и sitemap

Переход на HTTPS протокол, «вызывает» у обновленного инструмента Яндекс.Вебмастер, крайний «интерес». Яндекс заваливает меня письмами, что он чего то не видит, чего то не нашел. Первыми письмами были сообщения, что Яндекс вебмастер не видит favicon и sitemap сайта https.

Яндекс favicon

Переход на безопасный протокол, сродни переезду на новый домен. Без редиректа сайта http на сайт https, у вас, по факту, два одинаковых сайта в двух разных каталогах: [privat_html] и [public_html] (названия могут быть другие). Есть два мнения по оптимизации сайта на https:


1. Первое, нужно сразу сделать переадресацию сайта http на сайт https и выполнив работу в инструментах веб-мастеров, ждать индексации. Этот способ убьет тИЦ сайта до следующего апдейта и значительно снизит трафик.

2. Второе мнение, что не нужно сразу делать переадресацию сайта http на сайт https, а подождать полной индексации нового сайта https и после перенаправить http на https.

Справедливости ради нужно отметить, что инструментами веб мастеров и Яндекс, и Google рекомендован первый вариант перехода.

Напомню, что вы должны были сделать в Яндекс.Вебмастер, после перевода сайта на HTTPS (SSL).

  • Добавить сайт https:// в Яндекс.Вебмастер, как новый сайт.
  • Если вы сразу сделали редирект сайта http на сайт https, то после добавления сертифицированного сайта для подтверждения прав на сайт достаточно выбрать свой способ проверки сайта и нажать проверку.
  • Если вы пошли другим путем, и в целях сохранить трафик сайта, не стали сразу делать редирект и оставили в сети два сайта https и http, вам нужно подтвердить права на «новый» сайт https по всем правилам системы. Напомню, что безопасный сайт https лежит в каталоге [privat_html].
  • После добавления нового сайта https в Яндекс.Вебмастер вам нужно сделать все настройки Яндекс.Вебмастер, который вы делали для сайта http: добавить карту сайта, проверить robots.txt, и т.д. и т.п.

Если вы предварительно всё это сделали, то велика вероятность, что письма, что Яндекс веб мастер не видит favicon и sitemap сайта https, придут с опозданием. Поэтому без ожидания писем, делаем проверки:

Проверка Sitemap

Если вы не делали переадресацию http на https, карту сайта нужно предварительно сделать и залить в корень сайта https.

Откройте в браузере, Sitemap «нового» сайта: https://вашдомен.ru/sitemap.xml.

Проверка Favicon сайта

Напомню, favicon (фавикон) сайта это картинка, которую браузер показывает в адресной строке рядом с вашим сайтом.

Чтобы проверить Favicon сайта для Яндекс, сделайте запрос: //favicon.yandex.net/favicon/exemple.edu, где exemple.edu замените на свой домен.

Если по этому запросу вы видите свой фавикон, Яндекс спешит с отсылкой писем и просто нужно подождать, пока Яндекс фавикон проиндексирует. Можно ускорить индексацию фавикона и на вкладке Индексирование>>>Переобход страниц добавить url своей иконки.

Если вы не видите свой фавикон по запросу, и более того не видите фавикон в панели вебмастера рядом с новым сайтом https, проверьте следующее:

  • Если ли вообще файл favicon в корне сайта;
  • Нет ли ошибок в названии: [favicon.ico] и расширении;
  • Возможно, нужно заменить иконку в рабочем шаблоне сайта или просто его добавить;
  • Очистите кеш своего браузера.

©SeoJus.ru

seojus.ru

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

Яндекс favicon

В каком формате должен быть фавикон?

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

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

Фавикон может быть создан ещё в нескольких форматах, например, в формате GIF или JPEG, но проблемы с поддержкой делают их использование нецелесообразным.

HTML5 и атрибут sizes

Атрибут sizes пришел в нашу жизнь с HTML5. Благодаря ему браузер или устройство может выбрать необходимый размер фавикона. Атрибут sizes указывается в формате [ширина х высота] без указания единиц. Если в файле хранится сразу несколько иконок, можно задавать их размеры через пробел. Ключевое слово any указывает, что иконка может масштабироваться до любого размера, например, если она хранится в векторном формате SVG.

 

<link rel="icon" sizes="<ширина>X<высота>"> <link rel="icon" sizes="<ширина1>X<высота1> <ширина2>X<высота2>* | any">

Пора ли отправлять ICO на свалку?

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

Windows

Начнём, пожалуй, с Windows.

До 11 версии формат PNG в IE не поддерживался, поэтому для IE10 и более младших версий по-прежнему необходимо использовать формат ICO. А вот с IE11 смело можно переходить на PNG. Для устаревших браузеров Microsoft рекомендует размеры 16х16, 32х32 и 48х48 для фавиконов формата ICO.

Начиная с IE9, сайты получили возможность быть закрепленными в меню и панели задач, а с приходом IE11 и Windows 8.1 появилась возможность создавать закрепленные сайты в виде живых плиток. По умолчанию изображением на плитке будет фавикон, но только не для больших и широких плиток, для которых нужно задавать изображение специального размера. Сделать это можно следующими способами: добавив теги метаданных в разметку веб-страницы или файл конфигурации браузера.

Сначала давайте рассмотрим первый способ.

Определение фавикона в устройствах Windows с помощью метаданных в <head>:

<meta name="msapplication-TileImage" content="imagestileimage.jpg"> 

Если мы хотим указать иконки для больших плиток, это можно сделать с помощью следующих метаданных:

<meta name="msapplication-square70x70logo" content="images/smalltile.png"> <meta name="msapplication-square150x150logo" content="images/mediumtile.png"> <meta name="msapplication-wide310x150logo" content="images/widetile.png"> <meta name="msapplication-square310x310logo" content="images/largetile.png"> 

Можно указать цвет фона плитки:

<meta name="msapplication-TileColor" content="#009900"> 

Можно указать имя закрепленного сайта:

<meta name="application-name" content="Rick and Morty"> 

Если нет этих метаданных, то в качестве имени используется значение в <title&gt; страницы.

Можно указать текст дополнительной подсказки, появляющейся при наведении указателя мыши на ярлык закрепленного сайта в меню “Пуск” Windows или на рабочем столе:

<meta name="msapplication-tooltip" content="Title"> 

Можно даже определить адрес документа:

<meta name="msapplication-starturl" content="./"> 

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

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

Начиная с IE11 Windows 8.1 и Edge Windows 10 можно закрепить веб-сайт с помощью файла конфигурации браузера. Это удобно: создать один файл browserconfig.xml и поддерживать, и подключать его на каждой странице, если у нас есть несколько страниц, которые будут использовать одни и те же плитки.

Вызов файла в <head>:

<meta name="msapplication-config" content="browserconfig.xml"> 

browserconfig.xml

<?xml version=”1.0" encoding=”utf-8"?> <browserconfig>  <msapplication>  <tile>  <square70x70logo src="/img/favicons/mstile-70x70.png"/>  <square150x150logo src="/img/favicons/mstile-150x150.png"/>  <square310x310logo src="/img/favicons/mstile-310x310.png"/>  <wide310x150logo src="/img/favicons/mstile-310x150.png"/>  <TileColor>#000000</TileColor>  </tile>  <notification>  <polling-uri src="notifications/contoso1.xml"/>  <polling-uri2 src="notifications/contoso2.xml"/>  <polling-uri3 src="notifications/contoso3.xml"/>  <frequency>30</frequency>  <cycle>1</cycle>  </notification>  </msapplication> </browserconfig> 

square70x70logo, square150x150logo, wide310x150logo, square310x310logo — элементы, внутри которых объявляются изображения для различных размеров плитки.

Microsoft рекомендует брать больший размер изображений в целях поддержки экранов с высокой плотностью пикселей. Желательно, чтобы размер исходного изображения примерно в 1.8 раза превышал размер целевой плитки, чтобы его можно было увеличивать и уменьшать. Например, для 70х70 рекомендуемый размер 128х128, а для широкой плитки 310×150 исходное изображение имеет размер 558×270.

Если плитка сайта статическая, то вышеперечисленных элементов будет достаточно. Если же предполагается динамическая плитка, то необходимо добавить элемент <notification>. Этот элемент может включать в себя до 5 элементов <polling-uri>, содержащих в атрибуте src пути к соответствующим xml-файлам уведомлений. Также внутри этого тега содержится элемент <frequency>, значение которого указывает в минутах интервал между обращениями к сайту за обновлением уведомлений, то есть живая плитка будет обновляться каждые, например, 30 минут. Да, значение не произвольное, а только 30, 60, 360, 720 или 1440.

Наконец, есть внутри тега <notification> еще элемент <cycle>, отвечающий за способ повторения уведомлений (может принимать значения от 0 до 7). Шаблоны доступны только для средних, широких и больших плиток.

Новый интерфейс Metro предлагает несколько новых принципов дизайна, например, «белые силуэты», используемые большинством предустановленных программ.

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

<tile>  <visual lang="en-US" version="2">  <binding template="TileWide310x150ImageAndText01"  <image id="1" src="images/image1.png" alt="alt text"/>  <text id="1">Text Field 1</text>  </binding>  </visual> </tile> 

То, что написано в кавычках в атрибуте template  —  название шаблона. Этот шаблон содержит изображение и небольшой текст. Используется для больших изображений и средних названий. На самом деле, подобных шаблонов очень много: и просто c текстом, и просто с изображением, и с несколькими изображениями, и с несколькими строками текста, и так далее. Большинство шаблонов изображения или текста размещают текст на той же плитке, что и изображение. Но шаблоны с Peek в названии выполняют переключение между изображением и текстом на плитке.

Подробнее о шаблонах можно узнать на официальном сайте.

Mac OS

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

Safari — вот где нам пригодится формат SVG. Чтобы использовать SVG, необходимо указать атрибут rel со значением mask-icon, все элементы SVG должны быть черного цвета. Но не стоит пугаться, цвет можно поменять атрибутом color. Эта SVG-иконка нужна для закрепления вкладки в Safari. А цвет при наведении будет таким, какой мы указали в атрибуте color.

<link rel="mask-icon" href="safari-pinned-tab.svg" color="#00а0ff"> 

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

Вспомнила еще один случай, где нам еще может пригодиться формат ICO. Поисковик Яндекс вставляет фавикон в поисковой выдаче рядом с заголовком сайта. Что, безусловно, увеличит привлекательность сниппета и, как следствие, кликабельность.Яндекс рекомендует использовать для этих целей формат ICO.

iOS

Safari в iOS вообще не отображает favicon во вкладках, но использует их для закладок, так же как и в Mac OS. В iOS пользователи могут добавить сайт на рабочий стол, и оно будет выглядеть как нативное приложение. Эти ссылки отображаются в виде значков и называются Web Clips.

Для этого нужно добавить rel=«apple-touch-icon» и указать размер с помощью атрибута sizes. Каждое устройство нуждается в своем размере иконки. Так как iOS устройств довольно много, и каждое устройство имеет свое разрешение экрана, спецификация, разработанная Apple, поддерживает возможность указать несколько тегов с иконками разных размеров.

<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"> 

Если значок не соответствует рекомендуемому размеру устройства, используется самая близкая по размеру иконка большего размера, нежели рекомендуемый. Когда пользователь заходит на ваш сайт с iOS устройства, запрашиваются файл apple-touch-icon-precomposed.png, который должен быть оформлен в стиле iOS: закругленные углы, блики, и тень. Если файла с таким названием в корне проекта или rel=«apple-touch-icon-precomposed» нет, будет запрошен apple-touch-icon.png, которому разрешено быть таким, какой он есть, а все эффекты будут наложены самим iOS. Соответственно, нужна иконка под каждый размер. А вот если нет и этих файлов, то на рабочем столе iPhone или iPad будет отображаться не красивая иконка, а миниатюра страницы — ее скриншот.

Ходят слухи что Blackberry будет тоже использовать rel=«apple-touch-icon-precomposed», но возможности проверить, к сожалению, не было.

Подробнее прочитать про актуальные размеры для устройств iOS можно на официальном сайте.

Некоторые могут возразить, что все 9 изображений не очень и нужны. Однако, по крайней мере, основная Apple Touch Icon должна быть 180х180. Остальные устройства могут уменьшить изображение. Но некоторые другие платформы тоже используют Apple Touch Icon, поэтому лучше их объявить.

Как бы странно это не звучало, устройства под iOS не единственные, которые ищут Apple Touch Icon. Поскольку они популярнее и встречаются чаще других PNG иконок высоких разрешений, некоторые браузеры, вроде Android Chrome, используют их. Таким образом, лучше их объявлять, это позволит посетителю с совместимым устройством или браузером использовать одну из этих иконок.

В iOS можно указать заголовок веб-приложения. По умолчанию используется значение тега <title>. Чтобы задать другой заголовок, добавьте метатег на веб-страницу:

<meta name = "apple-mobile-web-app-title" content = "AppTitle"> 

Кстати, можно даже установить стиль строки состояния для веб-приложения:

<meta name="apple-mobile-web-app-status-bar-style" content="black"> 

Можно поменять её цвет, можно сделать полупрозрачной. Это тоже повлияет на вид нашего сайта.

Android

Устройства на Android отлично понимают формат PNG, а ещё поддерживают манифест веб-приложения manifest.json, в котором можно прописать все параметры того, как будет вести себя сайт, если его установить на домашний экран. Этот манифест пока, к сожалению, не читают устройства под IOS. А если Android не найдет этот файл, то он будет использовать apple-icon-touch.

Файл манифеста может содержать в себе ряд космических параметров, но тут находятся лишь те, которые нам необходимы для отображения сайта на домашнем экране:

{  "name": "Rick and Morty",  "short_name": "Rick",  "icons": [  {  "src": "/android-chrome-192x192.png",  "sizes": "192x192",  "type": "image/png"  },  {  "src": "/android-chrome-512x512.png",  "sizes": "512x512",  "type": "image/png"  } ],  "theme_color": "#b3adad",  "background_color": "#b3adad",  "display": "standalone" } 

Ключ name определяет подпись в приложению на домашнем столе. Если этот параметр не указан, подпись будет взята из <title> в <head>;

Ключ short_name определяет укороченную подпись для приложения, если не хватает места для полного имени;

Ключ icons — определяет массив объектов иконок, может принимать три значения: sizes, src, type;

Ключ theme_color определяет цвет строки состояния. Начиная с 39 версии хрома для Android Lollipop появилась возможность менять цвет интерфейса браузера и цвет вкладки браузера.

Задать цвет можно и через <head>, добавив следующий мета-тег:

<meta name="theme-color" content="#9CC2CE"> 

Ключ background_color определяет цвет фона для веб-приложения на домашнем столе. Этот же параметр отвечает за то, какой цвет будет иметь фон приложения, когда он открывается, т.е. манифест загрузился, но ещё не загрузились стили;

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

Вызов в <head>:

<link rel="manifest" href="manifest.json"> 

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

Автоматизация

В заключение нужно сказать, что все, что мы рассмотрели в рамках данной статьи, не обязательно писать руками, не забывайте про автоматизацию. Существуют сайты, на которых можно быстро сгенерировать все необходимые нам размеры и форматы favicon: realfavicongenerator.net, а при необходимости можно заодно сгенерировать код.

Есть пакеты для сборки и для Gulp, и для Grunt.

Главное помнить, что сегодня favicon — это больше, чем иконка в адресной строке и закладке браузера.

habr.com

Привет всем читателям блога! Сегодня, я хочу вам рассказать, почему не отображается фавикон в поиске Яндекса или браузере.

Почему не отображается фавикон в поиске Яндекса

На самом деле совсем недавно у меня так же возник этот вопрос, когда я установила favicon на сайт. Разумеется, в адресной строке браузера он у меня появился, а вот в поисковой выдаче Яндекса нет. Не для кого не секрет что фавикон ( favicon.ico) обязательно нужно установить, чтобы повысить узнаваемость вашего ресурса и отразить его фирменный стиль. Но что же делать если он не высвечивается в поиске?

Теперь рассмотрим все причины, почему не отображается фавикон после его установки. Для начала давайте на всякий случай ещё раз посмотрим, видят ли favicon поисковики Яндекс и Google.

Проверяем фавикон в поисковых системах Яндекс и Google

Для этого вводим в адресную строку браузера этот адрес:

Для Яндекса — http://favicon.yandex.net/favicon/www.yandex.ru (где меняем в конце www.yandex.ru на свой домен).

Для Гугла — http://www.google.com/s2/favicons?domain=www.google.com (а здесь в конце вместо www.google.com так же вписываем имя проверяемого сайта).

В обоих случаях мы увидели, отображается фавикон в поиске Яндекса и Гугла или нет.

Если не отображается фавикон в браузере после установки нужно:
— перезапустить браузер
— почистить кэш
— проверить правильность создания и установки фавикона

Почему не отображается фавикон в поиске Яндекса:

1). В поисковой выдачи Яндекса favicon появится только после того, как сайт посетит робот и проиндексирует вашу иконку. Поэтому запаситесь терпением и подождите.

2). Скопируйте вот этот код и вставьте его

<link href=»http://ваш сайт/favicon.ico» rel=»shortcut icon» />
<link href=»http://ваш сайт/favicon.ico» rel=»icon» type=»image/x-icon» />

в админке в файл header.php прямо перед закрывающим тегом </head>(см.картинку ниже) и обновите.Только не забудьте вместо ваш сайт-написать свой домен.

не отображается фавикон

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

Советую познакомится с Яндекс.Вебмастер и добавить туда ваш сайт. Это сервис который предоставляет информацию о том, как индексируются ваши сайты, о новых и удалённых страницах, проверка орфографии и многое другое. Очень  полезный сервис,где вы увидите как часто заходит робот на ваш ресурс. В общем ознакомитесь и я уверена, что он вам будет полезен.

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

А, да кстати оказывается на опросах можно зарабатывать. Причём даже и не принимая участия в них мне накапало немножко денежек с рефералов на сайте Платный опрос.РУ. Вот скрин, недавно прислали деньги.

платный опрос

С уважением, Анна Федорова

sozdamblog.ru

Как правильно размещать фавиконку

  1. Создайте файл формата ico. Допускаются также еще 4 формата: png, а также gif, bmp и jpeg. Размер файла в пикселях должен быть 16 пикс., 32 или 120 (квадратный).
  2. В head главной странице добавьте код:Яндекс favicon
  3.  Для указания адреса на кириллице применяйте Punycode.
  4.  Проверьте отображение иконки в браузере:Яндекс favicon

Если вы действовали по правилам, и ваш веб-ресурс проиндексирован «Яндексом», то через 2 недели после захода робота на сайт появится ваша иконка.

Как «Яндекс» работает с иконками

  1. Яндекс.Бот Yandex/1.02.000, собирающий фавиконки, по расписанию посещает главную страницу каждого сайта в индексе, где HTML ищет путь к favicon.ico.
  2. Если путь не прописан, бот идет в корень.
  3. Иконка преобразовывается в png размером 16*16, затем загружается на сервер фавиконок.
  4. Бот периодически проверяет иконку заново — частота его захода зависит от частоты обновления вашего веб-ресурса.

Иногда после создания favicon не отображается в «Яндексе». Давайте разбираться, почему так происходит.

Как проверить, что фавикон корректно отображается в «Яндексе»

  1. Способ первый — Яндекс.Вебмастер.
    Если в разделе левого меню «Диагностика» нет уведомления о том, что робот-поисковик не загрузил файл, значит, все в порядке.Яндекс faviconЕсли сообщение об ошибке появилось, значит, фавикон не отображается в поиске «Яндекса».
  2. Способ второй: по прямой ссылке на базу фавиконок. Введите адрес: favicon.yandex.net/favicon/ваш домен.Яндекс faviconЕсли изображение появляется, значит, все в порядке.
  3. Вариант третий: проверяем фавиконку в базе Google. Если там она отображается, а в «Яндексе» ее нет — попробуйте подождать еще 2 недели. Возможно, фавиконка скоро попадет и в Yandex: www.google.com/s2/favicons?domain=ваш доменЯндекс favicon
  4. Вариант четвертый: проверка через специальные сервисы. Воспользоваться Favicon Validator можно бесплатно и без регистрации. В специальное поле вводится адрес — сервис выдаст результат и предложит варианты решения возможной проблемы. Самые популярные сервисы: ifavicon, html-kit.

Что делать, если «Яндекс» не видит favicon

  • Попробуйте открыть фавиконку в браузере по прямой ее ссылке. Если этот файл открывается, значит, все в порядке (сервер отдает 200 ОК).Яндекс favicon
  • Если не открывается, проанализируйте, не запрещен ли вышеуказанный файл к индексации в robots.txt, или, может быть, есть ошибка в его названии или в метатегах.
  • Проверьте логин на посещение веб-ресурса роботом-поисковиком, найдите запись:

Яндекс favicon

Если такая запись есть, значит, робот проиндексировал файл.

  • Если у вас подключен SSL сертификат, вы могли не указать главное зеркало в Яндекс.Вебмастере. Укажите зеркало в HTTPS.
  • Если в течение 2-х недель после посещения роботом favicon не появился, возможно, «Яндекс» не смог ее распознать.

Варианты решения проблемы

  • Конвертируйте фавиконку в другой формат (один из разрешенных).
  • Проверьте ее размер.
  • Используйте четкие уникальные картинки. Иконки плохого качества могут удаляться из выдачи.
  • Обновите файл на сайте и дождитесь посещения робота.

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

Как определить, что сайт под фильтром

  • Соответствующие уведомления в Яндекс.Вебмастере, фатальные ошибки, обнаруженные вирусы.
  • Резко уменьшилось число проиндексированных страниц.
  • Упала посещаемость.
  • ТИЦ не определен. (Пройдите yandex.ru/yaca/cy/ch/ваш домен, если он от 0 или выше, то все в порядке).
  • Онлайн-сервисы показывают проблемы с сайтом (Xtool, Pr-cy).

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

Проблема с Яндекс.Директ

В отдельных случаях фавикон не отображается для рекламной кампании. Подобные проблемы могут возникнуть у сайтов, реализованных на конструкторах, новых проектов, лендингов, веб-ресурсов на поддоменах. К сожалению, российский поисковик не дает гарантию отображения фавиконки в своих рекламных объявлениях.

Еще один вариант — иконка может быть не видна, если сайт в выдаче находится очень далеко (за 10 страницей). Работайте над улучшением качества вашего веб-ресурса, используйте белые методы продвижения, и иконка со временем обязательно появится.

semantica.in

Не отображается фавикон

ne_otobrazhaetsya_favicon

Существует немало проблем с отображением фавикона: поисковые системы его не видят, не появляется пиктограмма на определенных страницах проекта или его нет вообще. Постараемся расставить все точки над i.

Если возникли проблемы, проверьте следующие моменты:

  1. Графическое изображение в формате ico, png или gif находится в корне ресурса?
  2. Код, ведущий к изображению, на страницах ресурса прописан правильно?

Если вы все сделали правильно, а favicon все же не отображается, приступаем к следующему этапу: проверить фавикон в поисковых системах Яндексе и Google. Для этого нужно воспользоваться ссылками для проверки графического изображения: favicon.yandex.net/favicon/www.site.ru для Яндекса и google.com/s2/favicons?domain=www.site.ru для Google. Обратите внимание, что вместо site.ru нужно вводить домен вашего ресурса.

Также стоит учесть, что индексация фавиконов в поисковых системах происходит довольно длительное время, так как за этот алгоритм отвечает отдельный робот, загружающий иконки на свой сервер. Поэтому, если сайт в индексе, а пиктограмма до сих пор не отображается, не стоит расстраиваться, ведь поисковик мог ещё не успеть проиндексировать иконку. Стоит также обратить внимание на то, что поисковые системы Яндекс и Google отображают иконки не на всех страницах в поисковой выдаче. Если сайт находится ниже 10-15 позиции, то и изображения рядом со ссылкой не будет.

Существует ещё один вариант для проверки отображения фавикона: с помощью специальных сервисов (FaviconValidator). Воспользоваться услугами таких проектов можно совершенно бесплатно и без регистрации. Каждый из них имеет простой и интуитивно понятный интерфейс. Так, нужно в специальное поле ввести адрес сайта и получить результаты. Представляем вам наиболее популярные и удобные сервисы в своем роде.

  • ifavicon.com

ifavicon

В специальное поле  нужно ввести адрес сайта, после чего сервис покажет результат. Если это успешная проверка, то на ресурсе вы все сделали правильно. Если же сервис не смог найти иконку, тогда стоит ещё раз все проверить.

  • html-kit.com/favicon/validator/

Данный сервис содержит в себе немного больше функционала, чем предыдущий. На сайте нужно ввести адрес сайта и нажать на кнопку «Check». Если с графическим изображением у вас все нормально, система скажет об этом. Если же нет – предложит возможные варианты решения проблемы.

Не отображается фавикон в Яндексе

favicon_yandex

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

Для того, чтобы Яндекс правильно отображал ваше изображение в выдаче,  в мета-тег сайта <head></head> нужно вставить код:

<link rel=»icon» href=»http://site.ru/favicon.ico» type=»image/x-icon»>

Или другой вариант:

<link rel=»shortcut icon» href=»http://site.ru/favicon.ico» type=»image/x-icon»>

Предпочтение отдается фавиконам, размером 16×16 пикселей в формате jpeg, ico, gif или png. Строчка «image/x-icon» изменяется в зависимости от формата иконки. Если графическое изображение в формате gif, то в конце строки необходимо прописать image/gif, если jpeg – image/jpeg, если png – image/png, если ico, то image/ico.

Обратите внимание, что от пути к изображению напрямую зависит его отображение. Если хотите удалить или изменить фавикон, необходимо просто удалить или изменить файл favicon.ico (jpeg, gif, png). Апдейт фавикона происходит независимо от апа выдачи и тИЦ (подробнее о тИЦ и других параметрах сайта в статье).

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

seranking.ru

Почему не отображается favicon? Сейчас проверим

Для начала дам ссылки на все мои статьи о фавиконах, возможно это кому-то пригодится:

  • Что такое Favicon и где его скачать
  • Сервисы для создания фавиконов
  • Как установить иконку на сайт

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

Проверка Favicon в поисковых системах Яндекс и Google

Чтобы узнать видят ли иконку любого сайта поисковики, даже не обязательно открывать сам сайт. Достаточно ввести в адресную строку браузера такой адрес:
Для Яндекса — http://favicon.yandex.net/favicon/www.yandex.ru (меняем www.yandex.ru на свой домен).
Для Гугла — http://www.google.com/s2/favicons?domain=www.google.com (вместо www.google.com подставляем имя проверяемого сайта).

Заметил, что Гугл показывает иконки не на всех сайтах. Например, вместо моей, так же, как и на некоторых других блогах, показывает значок земного шара, хотя мой фавикон давно отображается и в поиске Яндекса, и во всех браузерах. Поэтому я просто не обращаю на это внимание. Возможно, это связано с тем, что на этом блоге файл favicon.ico установлен с помощью настроек моей темы WordPress.

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

Для начала советую сделать проверку с помощью сервисов-валидаторов, а затем воспользоваться рекомендациями Яндекса.

Проверяем наличие иконки сайта в сервисах Favicon Validator

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

ifavicon.com

На этом сайте, кроме проверки валидатором, можно также сгенерировать Favicon (в том числе анимированный) из любой картинки или вытащить его из любого сайта, не копаясь в коде. Ниже на картинках я показал, как это сделать. Все очень доступно, поэтому никакого описания не требуется.

Favicon Validator

Переходим по адресу http://ifavicon.com/tools/favicon-validator и проверяем свой фавикон.

Проверяем фавикон на сервисе ifavicon.com

Favicon генератор

Создание фавикона с помощью ifavicon-generator

Favicon Grabber

Вытаскиваем значок с сайта с помощью Favicon Grabber

Понятное дело, если удалось вытащить значок с сайта, значит, он там правильно был установлен.

blogibiznes.ru

Что делать, если фавикон не появляется в поисковиках?

 

Есть несколько причин почему не появляется ваш фавикон в поисковиках:

  • Не уникален рисунок фавикона
  • Еще не прошел робот поисковика и не зафиксировал его присутствие. Дело в том, что роботы бродят по интернету по своему, никому неизвестному расписанию, поэтому нужно набраться терпения и подождать какое-то время. Возможно он пройдет и проиндексирует ваш фавикон через день, а может и через две недели.
  • не прописан код в файле header.php, или неправильно прописан

Но прежде посмотрим, видят ли ваш фавикон поисковики.

 

Проверка на видимость фавикона в поисковиках

 

В Яндексе: Для этого наберите в адресной строке браузера    http://favicon.yandex.net/favicon/www.   …………  .ru  (вставьте в пустое место ваш домен)

В Гугле: В адресной строке браузера набираем    http://www.google.com/s2/favicons?domain=www.   …….   .ru  (в пустое место пишите свой домен)

В том и другом случае вы увидите в левом верхнем углу ваш фавикон. Ну или не увидите.

На всякий случай перед этим шагом почистите кэш браузера или перезапустите его.

 

Как правильно прописать код в файле header.php

 

Скопируйте код

<link href=»http://ваш сайт/favicon.ico» rel=»shortcut icon» />
<link href=»http://ваш сайт/favicon.ico» rel=»icon» type=»image/x-icon» />

и откройте в админке Внешний вид-Редактор, откройте в редакторе Заголовок (header.php). Вставьте перед тегом данный код и обновите файл.
Вставляем код в header.php

После внесения этих изменений ждем их индексации поисковыми роботами. Через какое-то время фавикон появится.

 

rwix.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.