Приветствую, всех посетителей блога — SdelaemBlog.ru. Сегодня, снова поговорим о картинках для блога, то есть об иконке проекта, под название favicon. Обсудим, что такое фавикон, как его сделать и подключить к нашему сайту. А также, каких размеров должно быть данное изображение и почему каждый из вас должен, просто обязан, его установить. Ведь, даже этот значок может повлиять на посещаемость вашего блога.
Что такое favicon?
Понятие фавикон довольно простое и образовано от двух слов на латинице (собственно, как и все в интернет) — favorites icon. Это, в свою очередь, можно перевести, как иконка или значок. Смысл может быть и таким; любимая иконка или избранная. Почему такое название? Да все просто, favorites — это просто название закладок в браузере, соответственно название можно трактовать, как картинка для закладки или вкладки браузера. Ведь вы не могли не заметить, что при открытии сайта или добавлении его в закладки, мы видим не только его название,но и его картинку, которая и называется фавиконом. Надеюсь, смог объяснить, что это за зверь такой? :)
Для чего может понадобиться фавикон?
Ну здесь все проще пареной репы, фавикон необходим для индивидуализации интернет-проекта. То есть еще одна отличительная черта вашего блога будет данное изображение, которое сделает не только удобнее использование вашего сайта в браузере, но и при правильном подходе увеличит число посетителей вашего проекта.
Во-первых, в браузере это может быть удобно, почему? Например, когда у меня открыта куча вкладок — я могу ориентироваться по иконке сайта, который мне нужен в данный момент. То есть — это удобно, для таких, как я.
Во-вторых, эта картинка может привлечь больше посетителей на ваш ресурс с поисковой системы Яндекс, если она броская и выделяется среди других, но без фанатизма. Благодаря тому, что Яндекс подставляет favicon на первых девяти страницах выдачи, ваш блог будет отличаться от других. Именно, по этой причине стоит задуматься о подключении фавикона к вашему проекту. Вот так выглядят первые страницы выдачи.
Как сделать favicon?
Сделать favicon не составит никакого труда, потому что в сети огромное количество генераторов, которые способны из обычных изображений делать фавикон и дают возможность нарисовать ее с нуля самому. Еще, изображение можно сделать с помощью программы фотошоп, а потом с помощью генераторов преобразовать ее в нужный формат.
Отличия обычных изображений от иконок небольшие, но они есть. Картинка должна быть простой (сложные графические элементы сложно будет увидеть), размером 16×16 пикселей и обязательно в формате ico. Можно конечно использовать и форматы png или gif, но такие изображения будут отображаться не во всех браузерах, поэтому лучший вариант — использовать формат ico.
Рассказывать, каждый шаг о том, как сделать этот значок, я не вижу смысла, потому что с этим справится каждый. Главное учитывайте требования к изображениям и все получится. Если кратко, то скачайте или нарисуйте изображение и сделайте с помощью онлайн-генераторов, фавикон. Онлайн-генераторы можно найти набрав в поиске Google или Яндекс — favicon. Или вот ссылка на сервис, с помощью которого вы сможете нарисовать с нуля или сделать из готового изображения — фавикон: http://favicon.ru/
Как подключить фавикон для сайта?
Хорошо, значок готов, как теперь сделать, чтобы браузеры начали показывать favicon для сайта?
После использования сервиса, скачайте готовую иконку для своего блога на компьютер. И загрузите картинку, с помощью ftp-клиента в корневую папку блога (public_html/site/ваш_файл_в_формате_ico) или в любую другую. Но лучше всего в корневую папку, просто так проще, при составлении пути к файлу.
Итак, файл загружен, что дальше? Теперь, можно проверить, если вы сомневаетесь, что файл загружен в корневую папку: ваш_site/favicon.ico. Если файл загружен в корневую папку, то он отобразиться по этому адресу. Дальше нужно прописать для каждой страницы ресурса между тегами <head> и </head> следующий код:
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
А если значок в другой папке, то должно быть так:
<link rel="icon" href="http://ваш-ресурс/путь_к_файлу/favicon.ico" type="image/x-icon">
Этот код считается общепринятым для многих интернет-ресурсов и будет работать на любом движке. Но можно для разных движков, прописать его по разному. Например, для wordpress, этот код будет выглядеть так:
<link rel="shortcut icon" href="<?php bloginfo('stylesheet_directory'); ?>/favicon.ico" />
Только, в этом варианте значок должен находиться в папке с шаблоном. Например (public_html/site/wp-content/themes/ваша-тема/favicon.ico).
После этих действий favicon для сайта начнет работать и вы его сможете увидеть во вкладках браузера. Но в выдаче Яндекс, файл не сразу будет показан, нужно сначала подождать пока робот Яндекса проиндексирует иконку и только после этого она начнет отображаться в выдаче, и то при условии, что ваш блог будет находиться на одной из первых девяти страниц выдачи.
На этом все. Если, что не понятно — спрашивайте — разберемся. До новых встреч! ;-)
@ Александра: Пожалуйста, все новое кажется сложным, но не обязательно является таковым.
Спасибо огромное за статью! Я раньше даже не знала что такое фавикон, думала, что это все очень сложно…теперь понимаю!
Спасибо, всё просто и понятно. Сделал и установил фавикон на свой сайте в течение трёх минут.
Всегда пожалуйста, Александр.