Favicon проверить – Favicon checker | Дропшиппинг

Содержание

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

У Вас не отображается иконка сайта favicon.ico в браузере или в поиске? Давайте рассмотрим возможные причины.

Для начала хочу напомнить про статью Как создать favicon иконку сайта? Там Вы гарантированно сможете создать валидную иконку для сайта.

Вспомним как установить на сайт иконку сайта favicon

Иконка сайта подключается в head перед закрывающим тегом.

<html>

<head>

<title>Где подключить иконку сайта favicon?</title><link rel="icon" href="/favicon.ico" type="image/x-icon">

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

<body></body>

</html>

Рассмотрим три вида подключения к сайту иконки favicon

<!-- Если favicon лежит в корне сайта. РЕКОМЕНДУЕМЫЙ вариант. -->

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

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
 <!-- Если favicon лежит в корне сайта. Полный адрес к иконке. -->

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

<link rel="shortcut icon" href="http://yoursite.ru/favicon.ico" type="image/x-icon">
<!-- Если favicon лежит в папке Выше. НЕ РЕКОМЕНДУЕМЫЙ вариант. -->

<link rel="icon" href="http://yoursite.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

<link rel="shortcut icon" href="http://yoursite.ru/путь_к_иконке/favicon.ico" type="image/x-icon">

Почему написал у третьего варианта не рекомендуемый? Потому что, например, Яндекс может НЕ отображать Вашу иконку сайта в выдаче по запросу, если она находится в каком-либо подкаталоге, а не в корне. Личное наблюдение

Как индексируется иконка сайта favicon? Почему не отображается сразу после изменений?

Про индексацию иконки сайта favicon хотел бы предупредить, что сайт сначала должен проиндексировать специальным
поисковым роботом, прежде чем иконка будет отображаться рядом с сайтом по запросу в поиске. Поэтому иногда следует просто подождать. По времени это от недели до двух месяцев (для молодых сайтов — младше года). Если всё сделано правильно, то просто запасаемся терпением!
Как поступает Гугл не скажу, но заметил, что он показывает иконки не на всех сайтах.

Вы все сделали правильно, но фавикон не хочет отображаться?

Пожалуйста, проверьте, правильно ли создан сам файл и верно ли прописаны пути к нему в теге head в записи про icon (пример записей Выше). Другими словами, узнаем, как его видят поисковики и различные интернет-сервисы, в том числе и браузеры.

Я обновил запись c favicon (иконкой сайта), но у меня по-прежнему ничего не отображается. Почему?

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

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

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

tradebenefit.ru

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

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

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

Переход на безопасный протокол, сродни переезду на новый домен. Без редиректа сайта 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

Статьи по теме

(Всего просмотров 799)

Поделиться ссылкой:

Похожее

seojus.ru

Почему не отображается favicon | Как проверить

автор: admin 15.05.2016

Создание блога

Всем привет! Добро пожаловать на наш блог Thebizfromscratch, а на связи, как всегда, мы – Андрей и Даша. Как ваши дела, уважаемые читатели? Как и обещали, в этой статье мы займёмся серьёзными делами, а именно продолжим усовершенствование блога и тема сегодняшней статьи – Почему не отображается favicon (фавикон) и как это проверить.

С открытием дачно/деревенского сезона времени на блог становится всё меньше: стабильно, каждую пятницу по воскресенье мы уезжаем из города и погружаемся в мир грядок и сельской жизни…но, будем стараться это исправлять!

Изначально, иконку для блога мы настроили в нашей теме WordPress. Сами создали в редакторе картиночку-логотип и загрузили её на блог при помощи раздела «Свойства сайта». Стали ждать первой индексации, чтобы можно было увидеть наши старания. Первым наш блог проиндексировал google, но у этого поисковика не отображается favicon при выдаче запросов. Ладно, стали выжидать, когда к нам заглянет yandex и произошло это примерно через месяц после нашего старта. В результате, после того, как мы ввели в поиск Яндекса один из запросов блога thebizfromscratch, нас ждала грусть/тоска/разочарование, т.к. наша иконка не отображалась перед описанием сайта.

Что же делать? Прокопались пару-тройку часов в интернете, чтобы изучить данную проблему поподробнее. Поняли, что мы такие не одни и приступили к устранению неудачи. Дело в том, что все, кто настраивает свой логотип при помощи темы, имеет шанс столкнуться с такой же ситуацией – не отображается favicon перед описанием блога в яндексе. Единственным верным решением является небольшое изменение кода, установленной темы. Не стоит пугаться, никаких глобальных навыков программирования вообще не требуется, честно говоря даже любых навыков не требуется. Нет, конечно, если ты матёрый программист – это только плюс, но если ты – «чайник» как и мы, то смотри!

Что надо сделать!

Создаём иконку размером 16×16 или 32×32 пикселя с разрешением ico. Для этого удобнее воспользоваться специальным сервисом: favicon.ru, где можно с нуля нарисовать логотип или загрузить туда уже свой готовый, для того, чтобы изменить его размер и разрешение. В результате у тебя должна быть картиночка вот с таким названием — favicon.ico.
Размещаем, полученную картиночку в корневую папку сайта.

Заходим в админку WordPress, находим раздел «Внешний вид», далее «Редактор». С правой стороны выбираем вкладку «Заголовок» (или header.php).
После открывающего тега <head> (а где он смотри на рисунке ниже) прописываем или вставляем вот эту строчку и обновляем файл:

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

Где http://ваш сайт /favicon.ico – это путь до вашего фавикона. Только не забудьте вместо «ваш сайт» на самом деле указать ваш сайт.

Ждём до следующего посещения роботами сайта и смотрим на результат. У нас это произошло спустя 2-3 дня. Проблема была решена. Ура.

Как проверить отображается ли favicon?

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

http://favicon.yandex.net/favicon/свой домен

http://www.google.com/s2/favicons?domain=свой домен

И на этом мы заканчиваем. Надеемся, что данная статья будет для Вас полезной и теперь вы будете знать Почему не отображается favicon (фавикон) и как это проверить. Если появятся вопросы – обязательно задавай их в комментариях, постараемся помочь. Удачи! И до новых постов.

С уважением, Андрей и Даша.

thebizfromscratch.ru

форматы, поддержка, автоматизация / Habr

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

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

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

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

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

HTML5 и атрибут sizes

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

<link rel="icon">
<link rel="icon" 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="images\tileimage.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 src="images/image1.png" alt="alt text"/>
      <text>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" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" 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

Что такое фавикон, зачем он нужен на сайте?

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

Зачем нужен фавикон

Фавикон – на первый взгляд незначительный элемент сайта, но на самом деле помогающий решать важные задачи:

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

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

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

Как сделать фавикон

Традиционно в качестве иконки сайта используется изображение формата ICO размером 16 × 16 пикселей, размещенное в корневом каталоге как файл favicon.ico. Сейчас фавикон может иметь формат PNG, GIF, JPEG, SVG. Но так как поддержка может отсутствовать в каком-либо конкретном браузере или его версии, как правило, используют ICO. Размер, кроме стандартного, может быть 32 × 32, (не везде 60 × 60), 120 × 120.

Подобранное изображение должно:

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

Скачанное, сконвертированное или разработанное изображение размещается в корневой папке сайта. Затем в код head нужно добавить ссылку на фавикон вида <link rel=»icon» href=»http://путь до файла» type=» image/формат»>.

Если используется файл формата ICO, то в type указывается image/x-icon или image/vnd.microsoft.icon.

Для браузера Internet Explorer используется особая ссылка, где вначале будет link rel=»shortcut icon».

Для корректного отображения на мобильных устройствах также могут потребоваться отдельные записи, например rel=»apple-touch-icon».

Дополнительное использование файлов больших размеров, например 120 × 120, способствует тому, чтобы возможность отображения фавиконки в разных местах, устройствах, браузерах была максимальной. Например, в устройствах на iOS иконки большого формата могут использоваться как значки приложений.

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

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

wiki.rookee.ru

Как сделать и установить фавикон на сайт

Всем привет!

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

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

Что такое фавикон и почему он важен для СЕО

Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

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

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

Подведем небольшие итоги:

Favicon влияет на поведенческие факторы и кликабельность в выдаче.
Поисковые роботы также могут учитывать наличие или отсутствие фавикона.
Такой технический недочет может привести к падению трафика.

Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.

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

Где скачать готовый вариант

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

Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.

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

Готовые варианты можно поискать и на различных сайтах. Как правило, там представлены целые подборки всевозможных тематических логотипов, которые могут прийтись по вкусу некоторым вебмастерам.

Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.

Создание фавикона

Онлайн-сервисы

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

Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.

Как видите, здесь все интуитивно понятно. Выбираем карандаш, настраиваем цвет и рисуем. Если вашему логотипу нужна какая-то основа, то вы можете воспользоваться “Импортом из файла” и “Импортом с сайта”.

Как только мы закончим наши художества, прокручиваем страницу вниз и скачиваем нашу картинку.

Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера.

Все остальные генераторы работают по схожему сценарию. Точно так же выбираем цвет, рисуем при помощи простых инструментов, а после – скачиваем к себе на жесткий диск.

Adobe Photoshop

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

Итак, у нас есть два варианта:

Сделать фавикон из картинки (логотипа компании или других).
Просто выбрать шрифт и сделать его в виде буквы.

Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.

Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.

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

Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.

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

Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.

Фон как на скриншоте показывает, что я выбрал вариант “прозрачный” на первом этапе создания картинки.

Теперь вводим любую букву с клавиатуры. Мы можем уменьшить или увеличить ее, поменять цвет, добавить тени или расположить в любой части созданного нами квадрата. Давайте сделаем лого в виде буквы “А”.

Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.

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

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

Тут можно придать своей букве интересный вид. Например, настроить тени, сделать обводку или же градиентный цвет.

Кстати говоря, не пугайтесь, если при приближении ваша буква будет выглядеть как квадратное нечто. Если вы уменьшите масштаб до 100 % она примет свой естественный, четкий вид. Во вкладке картинка тоже будет выглядеть хорошо.

Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.

При установке через плагины или тему можно использовать любое название и формат. Однако в случае с корневым каталогом файл должен иметь название favicon и формат – ICO.

Установка на сайт

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

Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.

С помощью корневого каталога

Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

Важно: размер должен быть 16 x 16 или 32 x 32. Название favicon, а расширение *.ico.

Теперь мы должны загрузить этот файлик в корень нашего сайта. Можно сделать это при помощи FTP-клиента или файлового менеджера.

Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:

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

Для этого идем во “Внешний вид” – “Редактор”, находим в боковой панели нужный файл и кликаем для редактирования. Код мы должны вставить внутри тега <head>.

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

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

Через тему WordPress

Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.

Плагины

Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.

Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.

Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple. В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант. Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

Заключение

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

Многие вебмастеры, к сожалению, упускают этот момент. Вместе с ним из вида выпадают и другие, не менее важные нюансы. Если вы новичок и готовы учиться создавать крутые сайты и зарабатывать на них, то я приглашаю вас на курс Василия Блинова “Как создать блог”.

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

iklife.ru

Фавикон для сайта | CMS Рейтинг

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

Фавиконы популярных сервисов

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

Фавикон – небольшое изображение или пиктограмма, которую можно заметить рядом с названием сайта или открытой вкладкой. Термин происходит от английского «favicon» (favorite icon) и изначально использовался для метки сайтов в меню «Избранное» браузера Internet Explorer.

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

Где отображается favicon:

панель закладок;
избранные страницы;
адресная строка;
поисковая выдача Яндекса;
контекстная реклама;
в качестве ярлыка приложения на мобильных платформах.

Яндекс – не единственная поисковая система, где отображается иконка сайта. О желании ввести иконки уже заявили в Google, но пока это реализовано на уровне закладок пользователя.

Для чего нужен фавикон

Роль элемента заключается в повышении удобства пользователя. Графическая информация лучше усваивается, к тому же знакомство с площадкой начинается именно с ее значка. Отсутствие иконки снижает узнаваемость ресурса.

Какое влияние оказывает фавикон на развитие и продвижение сайта:

Повышение кликабельности ссылки в поисковой выдаче.
Информативное содержание: через значок можно передать тематику площадки или продемонстрировать фирменный логотип.
Упрощенная навигация для пользователя. Информативное изображение снижает вероятность ошибочного захода, что положительно отражается на показателе отказов и средней продолжительности нахождения на сайте.
Брендинг: видя знакомый значок, посетитель может кликнуть по нему, даже если он не находится в верхней части списка выдачи. Имидж проекта или отдельной компании действует в обе стороны, поэтому негативный опыт пользователя может стать причиной его отказа переходить по ссылке.
Помощь в поиске сайта в закладках и избранных ссылках. Визуально лучше воспринимаются значки, чем текст. Это экономит время на поиски нужной страницы.
Выделение площадки. Можно считать фавикон персональным идентификатором. В случае его отсутствие, ресурс имеет вместо иконки стандартный значок браузера. Это средство уникализации проекта.
При наличии нескольких сайтов у вебмастера, иконка упрощает их поиски в выдаче поисковой системы, меню закладок и так далее.

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

Навигация по favicon при открытии большого количества вкладок

Каким должен быть favicon

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

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

freshfavicon.com;
thefavicongallery.com;
faviconka.ru.

Идеальный фавикон обладает такими свойствами:

ассоциативность;
простота;
понятность для аудитории;
оригинальность.

Эти критерии относятся к внешнему виду графического идентификатора. Фавикон отличается от обычных изображений, имея свои стандарты оформления. Если отклониться от требуемых форматов, favicon может не отображаться или отображаться некорректно. Заменить иконку ресурса возможно оперативно, но в поисковой системе Яндекса смена (и появление) фавикона происходит в течение 3-4 недель. Все это время изменить значок в поисковой выдаче невозможно – обращение в службу поддержки не поможет, процесс осуществляется автоматически.

Стандарты оформления для favicon:

Разрешение изображения – квадрат с размером сторон, кратных 8. Рекомендуемое разрешение для десктопной версии 16х16, но присутствует возможность использования и других размеров: 24х24, 32х32 и так далее. Для удобства использования иконки в качестве приложения на мобильных платформах рекомендуемое разрешение значка 120х120 и 180х180.
Стандартное расширение для файла favicon – ICO. Кроме этого варианта допускается использование других графических форматов: PNG, GIF, JPEG, SVG. В некоторых ситуациях целесообразно создавать иконку в формате PNG вместо классического ICO, что объясняется возможными проблемами с масштабированием.
Картинка должна быть четкой и без размытых участков.
Иконка должна быть уникальной – это одно из условий добавления значка в поисковую систему Яндекса.

Оригинальный фавикон Яндекса

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

Как получить favicon для сайта

Существует несколько вариантов сделать это:

самостоятельно нарисовать значок;
использовать специализированные конверторы;
разработка иконки в Фотошопе и других редакторах;
заказ услуги отрисовки фавикона у специалистов.

Рассмотрим возможности каждого из методов.

Самостоятельная отрисовка

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

Популярные сервисы для отрисовки фавиконов:

favicon.cc;
onlinefavicon.com;
favicon.by.

Функциональность предложенных редакторов схожа, а процесс рисования выглядит просто и понятно.

Отрисовка favicon в сервисе Favicon.cc

Онлайн-конвертеры для преобразования графики в favicon

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

Помимо предложенных ранее сервисов, для конвертации в форматы фавикона подходят:

image.online-convert.com;
icoconverter.com;
fconvert.ru;
инструмент от PR-CY.

Возможности предложенных инструментов отличаются, стоит попробовать несколько из них, чтобы сравнить результаты. Использование сервисов бесплатное.

Adobe PhotoShop

Конвертацию и/или отрисовку можно выполнить самостоятельно в графических редакторах, среди которых наиболее популярным является Фотошоп. Недостаток метода в том, что базовое приложение не имеет возможности сохранить картинку в формате ICO, но с другими расширениями проблем нет. Если возникла необходимость получения иконки именно в ICO, то необходимо установить отдельный плагин. Для установки выбранного плагина нужно перенести его файлы в директорию Фотошопа, в папку …\Plug-ins\File Formats. После этого появится возможность сохранять изображения в формате ICO.

Разработка и редактирование иконки в Adobe PhotoShop

Заказ услуги

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

Где можно заказать создание фавикона для сайта:

Специализированные веб-студии. Самый дорогой и надежный вариант.
Подключение дизайнер-фрилансера. Бюджетное решение, где качество результата зависит от навыков исполнителя.
Биржи фрилансеров. Для составления заказа требуется ТЗ, иначе процесс разработки может затянуться надолго. Альтернативный вариант предложен на площадке FL.RU, где заказчик может организовать конкурс, получив сотни вариантов на выбор.

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

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

Инструкция по установке достаточно проста, и для этого требуется выполнить несколько шагов:

Зайти в файловый менеджер на хостинге или использовать FTP-клиент Filezilla.
Открыть корневую директорию сайта.
Перенести файл favicon с заменой существующего.

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

Расположение файла favicon в структуре сайта

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

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

Инструкция по установке отображения значка сайта:

Открыть редактирование файла header.php.
Найти область head.
Прописать код: <link rel=»icon» href=»/favicon.ico» type=»image/x-icon» />.
Сохранить изменения.

Эта инструкция подходит для взаимодействия с большинством современных браузеров, но рекомендуется дописать еще строки для отображения иконки в отдельных случаях:

Для IE: <link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon» />.
Для iOS: <link rel=»apple-touch-icon» sizes=»(размер)» href=»/apple-touch-icon-(размер).png»>.
Для Android: <link rel=»icon» type=»image/png» href=»/favicon-(размер).png» sizes=»(размер)»>.

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

Возможные проблемы с отображением и способы их устранения

Перечислим распространенные варианты ошибок, которые приводят к тому, что графический идентификатор сайта не появляется:

Использование неподходящего разрешения. Если размер картинки кратен 8, но не отображается, то стоит попробовать стандартное значение – 16х16.
Несовместимость формата. Как и в предыдущем случае лучше проверить работу стандартного расширения – ICO.
Яндекс не отображает значок. Есть две причины: или поисковый робот еще не занес иконку в каталог системы, или изображение не соответствует стандартам – не уникально, плохого качества или размыто.

В некоторых случаях поисковая система Яндекса не загружает favicon сайтов, которые занимают низкий рейтинг – далее сотой позиции.

Самостоятельно проверить загруженный роботом идентификатор можно, прописав в адресной строке браузера: http://favicon.yandex.net/favicon/www.(доменное имя сайта).

Фавикон как часть фирменного стиля проекта NIKE

Подведем итоги

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

Хороший favicon вызывает ассоциации, несет смысловую нагрузку и помогает понять специфику ресурса. Это отражается на поведенческом факторе. Графические элементы легче запоминаются, что отражается на узнаваемости площадки и бренда.

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

cms-rating.ru