Favicon: все что вы о нем не знали

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

Favicon: история развития

Favicon придумали в Microsoft: в 1999 году в Internet Explorer 5 разработчики включили поддержку значка для сайта (это был файл с именем favicon.ico), он показывался в списке избранного и рядом с URL в адресной строке, только если страница находилась в закладках. Придумано это было не для красоты, администраторы сайтов могли узнать, сколько пользователей внесли их сайт в  закладки (можно было оценить по количеству обращений к файлу Favicon). В настоящее время Favicon, естественно, работает для других целей.

Favicon: сегодня

Favicon сегодня утратил первоначальное значение - сокр. от англ. FAVorites ICON — «значок для избранного», сегодня это логотип веб-сайта, отображающийся браузером в адресной строке перед URL страницы, выводящийся в некоторых поисковых системах в результатах поиска, использующийся в элементах интерфейса программ, работающих с сайтом и т.д.

Favicon в результатах поиска Яндекса
favicon.ico сайта seo-zona.ru в результатах поиска Яндекса

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

Требования к Favicon

Изначально Favicon носил размер 16×16 пикселей и имел графический формат ICO (это формат хранения значков файлов в Microsoft Windows, аналогичен формату CUR, предназначенному для хранения курсоров там же). Впоследствии, на практике начали использовать и внедрять в браузеры такие форматы как PNG, GIF, JPEG, APNG, SVG и даже анимированные GIF. Тем не менее, кроссбраузерным остался все тот же ICO. Посмотрите на таблицу поддержки форматов Favicon браузерами, чтобы решить для себя какой формат лучше использовать на своем сайте:

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

Где искать Favicon? Заходим в https://www.google.com/ вбиваем в строку поиска ".ico", выбираем "Картинки" - "Инструменты поиска" - "Размер" - "Точный размер" - "16х16"

Регистрируем Favicon

После того, как мы обзавелись картинкой Favicon, мы должны ее зарегистрировать, как для своих браузеров, так и для поисковых систем. Честно говоря, поисковые системы по умолчанию ищут Ваш Favicon в корне сайта, поэтому регистрация для них необязательна. Тем не менее, существует возможность явно указать положение Favicon в HTML-коде и это полезно, например, если вы хотите указать Favicon разных типов (для разных браузеров), для разных страниц свой Favicon и т.д. Для этого добавляем строчку в свой HTML-код (внутри элемента <head>):

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

При этом:

  • rel может содержать «shortcut icon» (при этом IE будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам, — на слово «icon»)
  • href может содержать как абсолютный, так и относительный URL к файлу
  • форматом файла может быть png или gif, размером 16x16 или 32x32 и с 8-битной или 24-битной глубиной цвета

После того, как вы прописали вызов Favicon внутри <head>, поместили сам Favicon в корень своего сайта, наберите в браузере:

http://ваш_сайт/favicon.ico

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

Как проверить Favicon в Яндексе и Google

Какой Favicon закрепила за Вашим сайтом поисковая система? Проверить это очень просто:

Какой Favicon зарегистрировал Яндекс?

http://favicon.yandex.net/favicon/ваш_сайт.ru

Какой Favicon зарегистрировал Google?

http://www.google.com/s2/favicons?domain=ваш_сайт.ру

Подставляем вместо ваш_сайт.ру свой домен и видим закэшированный Favicon для своего сайта.

Надеюсь, из моей беглой статьи, узнали для себя что-то полезное!

Оцените материал:
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (7 голоса, рейтинг: 4,86 из 5)
Загрузка...

Вячеслав - типичный интернетчикВячеслав Скоблей (ака files) - типичный интернетчик. Скитаюсь интернетом, пишу на PHP, увлекаюсь созданием веб-сайтов на Wordpress, решаю многочисленные проблемы, которые до появления интернета не существовали...

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

Наверняка у Вас есть вопросы, просьбы или пожелания. Не стесняйтесь спросить, я отвечаю всегда быстро...

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

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