Favicon - это маленькая иконочка, графическое изображение, призванное охарактеризовать ваш сайт, своеобразный маленький логотип, лейбл интернет-ресурса. Какую роль играет Favicon в жизни сайта, как и где он рисуется, кому и где показывается... На эти и другие вопросы попытаюсь дать расширенный ответ.
Favicon придумали в Microsoft: в 1999 году в Internet Explorer 5 разработчики включили поддержку значка для сайта (это был файл с именем favicon.ico), он показывался в списке избранного и рядом с URL в адресной строке, только если страница находилась в закладках. Придумано это было не для красоты, администраторы сайтов могли узнать, сколько пользователей внесли их сайт в закладки (можно было оценить по количеству обращений к файлу Favicon). В настоящее время Favicon, естественно, работает для других целей.
Favicon сегодня утратил первоначальное значение - сокр. от англ. FAVorites ICON - «значок для избранного», сегодня это логотип веб-сайта, отображающийся браузером в адресной строке перед URL страницы, выводящийся в некоторых поисковых системах в результатах поиска, использующийся в элементах интерфейса программ, работающих с сайтом и т.д.
Favicon.ico сайта сайт в результатах поиска Яндекса
От удачного Favicon зависит узнаваемость интернет-ресурса (как в результатах поиска), так и среди других закладок в браузере, поэтому к выбору изображения, характеризующего Ваш сайт в сети, нужно подойти со всей ответственностью.
Изначально Favicon носил размер 16×16 пикселей и имел графический формат ICO (это формат хранения значков файлов в Microsoft Windows, аналогичен формату CUR, предназначенному для хранения курсоров там же). Впоследствии, на практике начали использовать и внедрять в браузеры такие форматы как PNG, GIF, JPEG, APNG, SVG и даже анимированные GIF. Тем не менее, кроссбраузерным остался все тот же ICO. Посмотрите на таблицу поддержки форматов Favicon браузерами, чтобы решить для себя какой формат лучше использовать на своем сайте:
Где взять Favicon?
В сети практически не осталось сайтов, у которых нет Favicon. Они даже встраиваются по умолчанию в . Между тем, полезно сменить Favicon на тот, который более соответствует тематике Вашего сайта: нарисовать самому или найти в огромной массе уже нарисованных.
Favicon можно закачать у дизайнеров-фрилансеров. Или нарисовать самому - это не так трудно, как может показаться на первый взгляд. Чтобы нарисовать свой уникальный Favicon не обязательно быть знатоком фотошопа. В сети есть много интернет-ресурсов, позволяющих онлайн нарисовать Favicon для Вашего сайта.
http://www.xiconeditor.com/
http://www.favicon.cc/
http://antifavicon.com/
http://favicon.ru/
http://faviconist.com/
http://favicon.by/
http://www.genfavicon.com/
Целесообразно иметь уникальный (ручной работы) Favicon, но и ничего плохого не будет в том, если вы позаимствуете уже кем-то нарисованный. Дело в том, что в интернете существуют миллиарды Favicon и вероятность того, что ваш и чей-то Favicon могут перепутать - практически равна нулю. Разумеется, я не призываю использовать чьи-либо логотипы, которые защищены авторскими правами - их не нужно использовать ни в коем случае!!!
Где искать Favicon? Заходим в вбиваем в строку поиска ".ico ", выбираем "Картинки" - "Инструменты поиска" - "Размер" - "Точный размер" - "16х16"
После того, как мы обзавелись картинкой Favicon, мы должны ее зарегистрировать, как для своих браузеров, так и для поисковых систем. Честно говоря, поисковые системы по умолчанию ищут Ваш Favicon в корне сайта, поэтому регистрация для них необязательна. Тем не менее, существует возможность явно указать положение Favicon в HTML-коде и это полезно, например, если вы хотите указать Favicon разных типов (для разных браузеров), для разных страниц свой Favicon и т.д. Для этого добавляем строчку в свой HTML-код (внутри элемента
):При этом:
После того, как вы прописали вызов Favicon внутри
, поместили сам Favicon в корень своего сайта, наберите в браузере:http://ваш_сайт/favicon.ico
Если вы увидели на экране заветный Favicon, значит все нормально. Осталось ждать, когда поисковые системы его закэшируют. Да, поисковые системы именно кэшируют Favicon сайта, а не показывают его каждый раз с вашего хостинга, поэтому нужно время (от двух недель и больше) пока Favicon не станет официальным значком Вашего сайта.
Какой Favicon закрепила за Вашим сайтом поисковая система? Проверить это очень просто:
Какой Favicon зарегистрировал Яндекс?
http://favicon.yandex.net/favicon/ваш_сайт.ru
Какой Favicon зарегистрировал Google?
http://www.google.com/s2/favicons?domain=ваш_сайт.ру
Подставляем вместо ваш_сайт.ру свой домен и видим закэшированный Favicon для своего сайта.
Надеюсь, из моей беглой статьи, узнали для себя что-то полезное!
Вконтакте
Оцените материал:
Здравствуйте, друзья! Когда-то я написал целых три статьи о фавиконах. Казалось бы, ну что там воду лить и так все всем давно известно. Но, как оказалось, вот эта маленькая иконка многим создает проблемы. Не удивительно, что вопросы возникают у тех, кто делает самые первые шаги в сайтостроении. Но, иногда, сложности бывают и у более опытных товарищей. У кого-то Favicon не отображается в браузере, у других в поиске Яндекса, а у некоторых одни страницы сайта с фавиконом, другие без. Конечно причины у каждого свои, но узнать, как проверить Favicon будет не лишним.
Итак, вы все сделали правильно, но фавикон не хочет отображаться. Давайте проверим, правильно ли создан сам файл и верно ли прописаны пути к нему в коде страниц сайта. Другими словами, узнаем, как его видят поисковики и различные интернет-сервисы, в том числе и браузеры.
Чтобы узнать видят ли иконку любого сайта поисковики, даже не обязательно открывать сам сайт. Достаточно ввести в адресную строку браузера такой адрес:
Для Яндекса - 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 (в том числе анимированный) из любой картинки или вытащить его из любого сайта, не копаясь в коде. Ниже на картинках я показал, как это сделать. Все очень доступно, поэтому никакого описания не требуется.
Favicon Validator
Переходим по адресу http://ifavicon.com/tools/favicon-validator и проверяем свой фавикон.
Favicon генератор
Favicon Grabber
Понятное дело, если удалось вытащить значок с сайта, значит, он там правильно был установлен.
Этот сервис более популярен и имеет просто огромный функционал по созданию и проверке Favicon. Одной из его особенностей является большое количество редактируемых параметров изображения и возможность создавать иконки для iPhone, iPod Touch и iPad браузеров. Давайте в картинках и по порядку.
Создание Favicon
Можно сделать иконку из значка в Твиттере
или из любой картинки.
Загрузив изображение и нажав кнопку “Generate FavIcon.ico “, можно скачать статичный и анимированный фавикон или продолжить редактирование, тиснув на кнопку “Edit “.
Перед нами открываются все настройки редактирования. Чтобы перейти к нужной настройке, надо щелкнуть на соответствующий пункт. Покажу, как это выглядит с переводом в Хроме:
Если в нескольких словах, то можно:
Все изменения отображаются в правой части экрана.
Чтобы очистить список созданных фавиконов и начать редактирование нового, надо нажать кнопку “New Icon ” в правом верхнем углу.
Есть подсказка, как установить анимированный фавикон вместе с обычным. При нажатии на кнопку “Загрузите “, скачается пакет со всеми фавиконами, где в файле ReadMe.txt будет подробная инструкция по их установке и необходимые коды.
В общем, советую всем попробовать этот сервис. Кроме всего, существует приложение для браузера Google Chrome, которое называется FavIcon from Pics . Ссылку не даю, так как целесообразность его установки вызывает сомнение. Все, что оно дает, это прямой переход на страницу с генератором фавиконов.
Как проверить Favicon
Теперь, собственно, перейдем к тому, из-за чего я начал писать эту статью - как сделать проверку, если не отображается Favicon. Переходим по ссылке http://www.htmlkit.com/go/favicon/validator/ , вводим адрес проверяемого сайта и жмем “Check “. Ниже вы можете увидеть, какую информацию можно будет узнать.
Получаем результат:
Если фавикон не будет найден, то сервис укажет причину, почему это произошло.
Если же ошибок не найдено, но все равно Яндекс не видит фавикон сайта, читайте статью Платона Щукина “Вся правда о фавиконках “. В ней он перечислил 5 причин, почему не отображается фавикон в поиске Яндекса. Если и эти рекомендации не помогут, то надо написать о своей проблеме Платону в службу поддержки.
Пожалуй, на сегодня хватит. Теперь, думаю, это последняя статья о фавиконках на этом блоге, так как, по-моему, обо всем уже написал. Наверно, даже больше чем стоило. Ну, а если у кого-то еще остались вопросы, то задавайте их в комментариях.
У Вас не отображается иконка сайта favicon.ico в браузере или в поиске? Давайте рассмотрим возможные причины.
Для начала хочу напомнить про статью Как создать favicon иконку сайта? Там Вы гарантированно сможете создать валидную иконку для сайта.
Честно, я очень люблю фавикон. Я питаю к нему сколь глубокую, столь же и целомудренную платоническую любовь. Это не значит, что я рассказываю знакомым вебмастерам байки о том, как я сменил фавикон и трафик вырос на 10% (хотя постойте… может такое и было), но значит, что когда фавикон моего нового сайта появляется в индексе Яндекса, то сам сайт начинает казаться мне чуть более СДЛьным.
Фавикон (Favicon – сокращение от «favorite icon») — это изображение, которое отображается в адресной строке браузера перед адресом, во вкладке, соответствующей окну с открытой страницей сайта, а также при добавлении ресурса во вкладки с избранным. Эти изображения могут помочь пользователю лучше запомнить бренд или компанию, повысят узнаваемость сайта. Часто в качестве фавикона используют уменьшенное или немного переделанное в соответствии с форматом изображение логотипа компании или бренда.
Использование favicon приносит пользу со временем. Вот например зацените такие варианты:
Таким образом, фавикон – часть образа сайта, которая выполняет не только эстетическую функцию, но и делает более удобным для пользователя поиск портала в закладках, вкладках, выдаче.
Поисковая система Яндекс – одна из немногих, которые выделяют фавиконы сайтов и отображают их при построении списка результатов поиска. Для этого специальный бот периодически индексирует сайты и обновляет информацию о наличии у них фавиконок.
Раньше апдейты фавиконок происходили раз в пару месяцев. Сейчас, в 2018, Яндекс индексирует их гораздо бодрее и на некоторых моих новых сайтах favicon появляется уже через несколько дней.
Чтобы проверить, отображает ли Яндекс favicon, можно найти свой портал в списке выдачи и посмотреть, видна ли иконка слева от него. Также можно вписать в адресную строку следующую конструкцию: для Яндекса - http://favicon.yandex.net/favicon/www.site.ru (где вместо www.site.ru нужно напечатать домен своего сайта). Правильно созданный Фавикон отобразится на черном фоне, и это значит, что Яндекс его видит.
Если фавикон не виден, это может быть связано со следующими причинами:
Проверив картинку по этим критериям, нужно исправить недостатки. Если и после этого не отображается иконка, можно обратиться в поддержку Яндекса.
Чтобы фавикон отображался в Яндекс.Директе, он должен быть правильно оформлен и находиться в нужном месте на сайте. Тогда поисковой робот Яндекса проиндексирует его и начнет показывать в выдаче. Происходит это обычно через 2-4 недели после публикации сайта с изменениями. Уведомлять или просить Яндекс о публикации фавиконки не нужно, это произойдет автоматически по прошествии определенного времени после ее появления на портале.
Если вы хотите создать из большого изображения в формате, например, png, ico-файл, то вам не помешало бы поставить Adobe Photoshop для начала. Затем устанавливается плагин ICO для Фотошопа (поищите в поисковике плагин для вашей версии ФШ). Когда он установлен, мы копируем нужный файл ICOFormat.8bi (для 32-бит) или ICOFormat64.8bi (для 64-бит) по одному из следующих путей:
C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Plug-ins\File Formats
C:\Program Files (x86)\Adobe\Adobe Photoshop CS6\Plug-ins\File 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).
Сам я в последнее время перевожу изображения в ico формат без фотошопа. С помощью сервиса https://realfavicongenerator.net/ .
< link rel = ”shortcut icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ > < link rel = ”icon ”href = ”/ favicon . ico ”type = ”image / x - icon ”/ > |
Через некоторое время фавикон появится на сайте.
Некоторые умники делают фавикон в виде стрелки, треугольника, добавляют красные элементы, чтобы «юзер кликал». Так, конечно, можно делать, но за такое сайт могут искусственно занизить.
Яндекс пугает фавиконных очкошников
При разработке иконки следует учитывать, что изображение должно быть четким и хорошо различимым, несмотря на маленький формат. Поэтому лучше использовать как можно меньше отдельных объектов и не слишком много цветов. Можно посмотреть фавиконы конкурентов и подумать, как можно выделиться на их фоне.
Для создания иконок также существуют специальные программы и ресурсы, среди которых популярностью пользуются:
Есть и такой сервис:
Можно обратиться за разработкой изображения и к дизайнеру, но это обойдется существенно дороже.
Еще такой момент — изображение для иконки не может быть анимированным, оно всегда неподвижно, даже если в основе была использована картинка с любыми не статичными эффектами.
всего
Переход на HTTPS протокол, «вызывает» у обновленного инструмента Яндекс.Вебмастер, крайний «интерес». Яндекс заваливает меня письмами, что он чего то не видит, чего то не нашел. Первыми письмами были сообщения, что Яндекс вебмастер не видит favicon и sitemap сайта https.
Переход на безопасный протокол, сродни переезду на новый домен. Без редиректа сайта http на сайт https, у вас, по факту, два одинаковых сайта в двух разных каталогах: и (названия могут быть другие). Есть два мнения по оптимизации сайта на https:
1. Первое, нужно сразу сделать переадресацию сайта http на сайт https и выполнив работу в инструментах веб-мастеров, ждать индексации. Этот способ убьет тИЦ сайта до следующего апдейта и значительно снизит трафик. 2. Второе мнение, что не нужно сразу делать переадресацию сайта http на сайт https, а подождать полной индексации нового сайта https и после перенаправить http на https.Справедливости ради нужно отметить, что инструментами веб мастеров и Яндекс, и Google рекомендован первый вариант перехода.
Напомню, что вы должны были сделать в Яндекс.Вебмастер, после перевода (SSL).
Если вы предварительно всё это сделали, то велика вероятность, что письма, что Яндекс веб мастер не видит favicon и sitemap сайта https, придут с опозданием. Поэтому без ожидания писем, делаем проверки:
Если вы не делали переадресацию http на https, карту сайта нужно предварительно сделать и залить в корень сайта https.
Откройте в браузере, Sitemap «нового» сайта: https://вашдомен.ru/sitemap.xml.
Напомню, favicon (фавикон) сайта это картинка, которую браузер показывает в адресной строке рядом с вашим сайтом.
Чтобы проверить Favicon сайта для Яндекс, сделайте запрос: //favicon.yandex.net/favicon/exemple.edu , где exemple.edu замените на свой домен.
Если по этому запросу вы видите свой фавикон, Яндекс спешит с отсылкой писем и просто нужно подождать, пока Яндекс фавикон проиндексирует. Можно ускорить индексацию фавикона и на вкладке Индексирование>>>Переобход страниц добавить url своей иконки.
Если вы не видите свой фавикон по запросу, и более того не видите фавикон в панели вебмастера рядом с новым сайтом https, проверьте следующее:
