Сегодня поговорим, об одном, казалось бы неприметном, но весьма важном графическом элементе любого веб-сайта, о favicon.ico. И попробуем разложить по полочкам всю информацию о нем.
Что такое favicon?
Favicon (от англ. favorites icon - "значок для избранного") - значок веб-сайта, который отображается браузером в адресной строке перед url страницы. Также отображается и в других элементах интерфейса. Обычно храниться в корне сайта и имеет имя файла - favicon.ico (favicon.png).
Зачем нужен favicon?
Во-первых, иконка фавикон запоминается посетителями сайта. Например, Яндекс, Гугл или Википедию без труда можно узнать только по значку. Если у вас есть логотип сайта или компании почему бы не сделать его иконкой сайта? Вас лучше запомнят!
Во-вторых, благодаря фавикон можно быстрее найти вкладку, когда открыто множество сайтов в браузере. Или быстро найти в сохраненных закладках нужную.
Еще одна причина сделать favicon - для того чтобы получить больше трафика с Яндекса. Да, вы не ослышались, именно так! Яндекс отображает иконки сайтов в результатах поиска, и чем привлекательнее для пользователя будет favicon - тем выше будет CTR ссылки на ваш сайт в результатах поиска.
У сайтов без фавикон 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 такой фичи не поймет, во всех остальных популярных браузерах без проблем!
Не хотите пропустить новые статьи? Подпишитесь по e-mail, 
