Все о фавикон (favicon)

favicon

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

Что такое favicon?

Favicon (от англ. favorites icon - "значок для избранного") - значок веб-сайта, который отображается браузером в адресной строке перед url страницы. Также отображается и в других элементах интерфейса. Обычно храниться в корне сайта и имеет имя файла - favicon.ico (favicon.png).

Зачем нужен favicon?

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

vkladki-favicon

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

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

serp-favicon

У сайтов без фавикон CTR обычно ниже.

Также иконки сайтов используются в некоторых каталогах, рейтингах, сервисах и т.д. Например, topblogs.su и другие. Здесь узнаваемость и привлекательность вашего значка увеличит интерес к вашей статье.

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

Сначала определимся с тем, что же такое favicon.ico. Это графический файл в формате .ico и размерами 16 x 16 пикселей, все просто.

1. Для создания такого файла можно воспользоваться Photoshop 'ом. Однако сначала нужно научить его работать с форматом .ico, установив нужный плагин. В принципе, найти и установить такой плагин не сложно, просто наберите в поисковике ".ICO Plugin для Photoshop".

2. Можно воспользоваться онлайн-сервисом для создания фавикон - Favicon.ru. Тут тоже ничего сложного - загружаете нужное изображение и оно преобразуется в favicon.ico. Вам остается только скачать его и установить себе на сайт.

3. С помощью англоязычного онлайн-сервиса favicon.cc вы также можете создать иконку для вашего сайта.

А вообще для создания пиктограмм существует масса различных сервисов: favicongenerator.com, antifavicon.com, chami.com, iconj.com, degraeve.com. Выбирайте любой!

Где взять готовые favicon.ico?

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

Вот несколько ресурсов с самыми большими коллекциями фавикон: iconj.com, favicon.cc, favicon.co.uk, audit4web.ru.

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

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

Залейте иконку в корневую папку сайта через файловый менеджер или FTP. Затем пропишите в секции <head> на всех страницах сайта следующий код:

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

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

Делаем favicon в формате png

В последнее время, часто делают иконку для сайта в формате .png. Зачастую это оказывается проще и удобнее. Создаем графический файл размером 16 x 16 пикселей, сохраняем в формате .png и подключаем на сайте в секции <head>, прописав следующий код:

1
<link rel="icon" type="image/png" href="http://ваш-сайт.ru/путь-к-иконке/favicon.png" />

Вот такой способ вставить favicon в формате .png. Кстати, IE6 такой фичи не поймет, во всех остальных популярных браузерах без проблем!

2 комментария на тему: “Все о фавикон (favicon)”
  1. Илья
    01.03.2013 в 16:12 #1

    Как долго обновляется favicon? Я сделал новую иконку для сайта и поставил ее примерно две недели назад, но в Яндексе до сих пор отображается старая.

    • 01.03.2013 в 19:49 #2

      Нужно дождаться апдейта фавиконок. У меня была похожая ситуация с одним сайтом, ждал больше месяца.

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