Яндекс фавикон

Честно, я очень люблю фавикон. Я питаю к нему сколь глубокую, столь же и целомудренную платоническую любовь. Это не значит, что я рассказываю знакомым вебмастерам байки о том, как я сменил фавикон и трафик вырос на 10% (хотя постойте… может такое и было), но значит, что когда фавикон моего нового сайта появляется в индексе Яндекса, то сам сайт начинает казаться мне чуть более СДЛьным.

Что такое фавикон?

Фавикон (Favicon – сокращение от «favorite icon») — это изображение, которое отображается в адресной строке браузера перед адресом, во вкладке, соответствующей окну с открытой страницей сайта, а также при добавлении ресурса во вкладки с избранным. Эти изображения могут помочь пользователю лучше запомнить бренд или компанию, повысят узнаваемость сайта. Часто в качестве фавикона используют уменьшенное или немного переделанное в соответствии с форматом изображение логотипа компании или бренда.

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

Использование favicon приносит пользу со временем. Вот например зацените такие варианты:

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

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

Особенности работы Яндекса с фавиконками

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

Чтобы проверить, отображает ли Яндекс favicon, можно найти свой портал в списке выдачи и посмотреть, видна ли иконка слева от него. Также можно вписать в адресную строку следующую конструкцию: для Яндекса — http://favicon.yandex.net/favicon/www.site.ru (где вместо www.site.ru нужно напечатать домен своего сайта). Правильно созданный Фавикон отобразится на черном фоне, и это значит, что Яндекс его видит.

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

• Размер изображения не соответствует требуемому: 16х16 пикселей;
• Формат изображения не тот – должен быть ico, jpeg или png (первый вариант – более предпочтительный для Яндекса);
• Картинка размытая или не уникальная – иногда по этим причинам поисковик блокирует иконки;
• У Яндекса происходит обновление системы – тогда спустя какое-то время все должно исправиться само;
• Сайт находится далее сотой позиции в выдаче – в этом случае фавикон тоже может не отображаться.

Проверив картинку по этим критериям, нужно исправить недостатки. Если и после этого не отображается иконка, можно обратиться в поддержку Яндекса.

Чтобы фавикон отображался в Яндекс.Директе, он должен быть правильно оформлен и находиться в нужном месте на сайте. Тогда поисковой робот Яндекса проиндексирует его и начнет показывать в выдаче. Происходит это обычно через 2-4 недели после публикации сайта с изменениями. Уведомлять или просить Яндекс о публикации фавиконки не нужно, это произойдет автоматически по прошествии определенного времени после ее появления на портале.

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

Если вы хотите создать из большого изображения в формате, например, png, ico-файл, то вам не помешало бы поставить Adobe Photoshop для начала. Затем устанавливается плагин ICO для Фотошопа (поищите в поисковике плагин для вашей версии ФШ). Когда он установлен, мы копируем нужный файл ICOFormat.8bi (для 32-бит) или ICOFormat64.8bi (для 64-бит) по одному из следующих путей:

C:Program FilesAdobeAdobe Photoshop CS6 (64 Bit)Plug-insFile Formats
C:Program Files (x86)AdobeAdobe Photoshop CS6Plug-insFile Formats

Если папки «Plug-ins» или «File Formats» нет, то ее необходимо создать. Теперь при диалоге сохранения можно выбрать ico формат. Размеры создаваемых значков могут быть кратны 8 (16×16, 24×24, 32×32 и так далее, но надежнее всего выбрать именно 16×16).

Затем изображение, которое должно стать фавиконом, открывается в Фотошопе. Жмется “Image – Image Size” и размер изображения меняется на 16х16 пикселей. Затем жмется “File – Save as” и выбирается формат ICO (название файла нужно сделать favicon.ico).

Далее файл загружается в корневую папку сайта. После этого через «Внешний вид – редактор» админки WordPress в файле header.php прописываются следующие строки:

Через некоторое время фавикон появится на сайте.

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

Сервисы

Для создания иконок также существуют специальные программы и ресурсы, среди которых популярностью пользуются:

• favicon.cc – простейший редактор позволит создать несложное изображение, принцип работы немного напоминает Paint. Также выбираются цвета, и выполняется рисунок нажатием на пиксельные квадраты, которые нужно закрасить. Есть инструмент для исправления. Созданную картинку здесь же можно сохранить на компьютер в качестве готового изображения favicon. В процессе работы внизу экрана можно наблюдать предварительный результат в том виде, в каком он будет отображаться в браузере. Ресурс также предлагает большой выбор готовых иконок;


• favicon.ru – здесь лучше создавать фавиконы из уже готовых изображений. Картинка загружается с компьютера, обрабатывается системой и преобразуется в файл favicon.ico, который затем можно скачать;
• iconj и audit4web – базы, в которых можно найти готовые фавиконы.

Есть и такой сервис:

Можно обратиться за разработкой изображения и к дизайнеру, но это обойдется существенно дороже.

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

znet.ru

Что такое favicon?

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

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

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

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

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

Яндекс, в отличие от других поисковых систем, что мне больше всего в нем нравится, отображает этот фавикон для каждого сайта в результатах поиска. Таким образом, это один из рычагов управления кликабельности вашего сниппета. Изображение всегда привлекает внимание пользователя и, даже если ваш сайт будет не на первых позициях в результатах поиска, к вам перейдут больше посетителей, чем на сайт рядом с вашим без 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:03:34 +0300] “GET / HTTP/1.1” 200 3844 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [28/Nov/2008:18:34:42 +0200] “GET / HTTP/1.1” 200 3844 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [03/Dec/2008:09:39:38 +0200] “GET / HTTP/1.1” 200 3844 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [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 (compatible; Win16; F)”
213.180.207.227 – — [21/Sep/2008:06:04:33 +0300] “GET / HTTP/1.1” 200 33828 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [28/Sep/2008:07:53:32 +0300] “GET / HTTP/1.1” 200 33930 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [03/Oct/2008:01:06:09 +0300] “GET / HTTP/1.1” 200 33361 “-” “Yandex/1.02.000 (compatibl.

andex/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] “GET / HTTP/1.1” 200 40033 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [18/Nov/2008:20:36:50 +0200] “GET / HTTP/1.1” 200 39307 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [27/Nov/2008:20:45:06 +0200] “GET / HTTP/1.1” 200 46447 “-” “Yandex/1.02.000 (compatible; Win16; F)”
213.180.207.227 – — [06/Dec/2008: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

Иконка сайта подключается в 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 — это не просто значок 16×16 во вкладке браузера. Он является важной составляющей интерфейса, а также играет немаловажную роль в прогрессивных веб-приложениях. Существует немало способов подключения и использования 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

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

Самое первое на что я погрешил, это на то, что блогу подключил SSL сертификат, тем самым перевел его на HTTPS протокол. При этом изначально в яндекс вебмастере не указал явное зеркало блога. И яндекс почитал что главным зеркалом является блог по HTTP протоколу. Свою ошибку я обнаружил только через 1,5 недели после запуска блога. Кстати по http протоколу фавикон отображался нормально.

В итоге я удалил из вебмастера свой блог, и добавил его повторно. Только при этом указал что главным зеркалом является блог именно по HTTPS протоколу. И вот тут обнаружил, что фавикона нет. Решил подождать пару дней, но он так и не появился. Тогда написал письмо Платону.

Ответ как вы видите пришел 18 августа. Сегодня уже 8 сентября, но фавикона в яндексе до сих пор нет.

Стоит ли волноваться если фавикон не отображается в яндексе?

Хочу всех успокоить, волноваться не стоит. Лучше проверьте правильно ли он прописан на ваших сайтах. У вас должна присутствовать строка в теге HEAD вашего HTML шаблона со следующим содержанием:

<link rel=“shortcut icon” href=“https://inseo.site/favicon.ico” type=“image/x-icon”>

Соответственно вместо моего адреса, у вас должен быть прописан адрес вашего сайта.

Далее рекомендую проверить отображения фавикона в google.

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

http://www.google.com/s2/favicons?domain=masalkin.name (здесь в самом конце вместо моего адреса, вставляйте свой адрес)

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

На всякий случай оставлю еще адрес проверки фавикона в яндексе.

http://favicon.yandex.net/favicon/masalkin.name (здесь с моим адресом поступаем так же как и везде)

Причины по которым фавикон не отображается в поисковиках.

Для себя я могу выделить только 3 таких причины.

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

inseo.site

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

Существует немало проблем с отображением фавикона: поисковые системы его не видят, не появляется пиктограмма на определенных страницах проекта или его нет вообще. Постараемся расставить все точки над 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

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

• html-kit.com/favicon/validator/

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

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

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

Для того, чтобы Яндекс правильно отображал ваше изображение в выдаче,  в мета-тег сайта <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 и проверяем свой фавикон.

Favicon генератор

Favicon Grabber

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

blogibiznes.ru

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

semantica.in