Как вставить фавикон на blogspot?

Что такое Favicon и для чего он нужен?

Наверняка, уважаемые читатели, Вы обращали внимание на небольшие картинки, расположенные в адресной строке браузера перед URL открытой страницы.

Такие же картинки-значки можно увидеть и при поиске в yandex слева от выводимых сайтов.

Это, ничто иное, как Favicon – маленькое изображение в формате ico размером 16х16 пикселей.

Название Favicon имеет английские корни и дословно означает «иконка для «Избранного» — так называются закладки в браузере Internet Explorer.

Для чего нужен фавикон?

Фавикон выгодно выделяет Ваш блог среди других ресурсов, делает его узнаваемым на фоне других, безликих блогов, у которых еще нет своей иконки.

В сущности, фавикон выражает идею Вашего блога и является элементом бренда.

По статистике, сайты, у которых есть фавикон, получают прирост посещаемости, в среднем, от 1 — 15 % а это значит, что возрастает и число подписчиков, и число повторных заходов, к тому же, брендовые сайты (блоги) пользуются большим доверием и популярностью, что благоприятно сказывается на трафике, да и у пользователей среди множества открытых в браузере вкладок Ваш блог будет выгодно выделяться среди прочих.

Таким образом, главная задача фавикона – это привлечь внимание и, как следствие —  увеличение количества посетителей.

У Яндекса есть специальный поисковый робот для индексации фавиконов, благодаря которому Ваш Favicon со временем появится в выдаче рядом с URL Вашего блога и сделает его узнаваемым.

Так что, favicon вполне можно рассматривать, как один из инструментов раскрутки собственного ресурса.

Где взять фавикон и можно ли его сделать  самому?

Картинку можно нарисовать самостоятельно или взять уже готовую, а затем обработать изображение,  например, на http://favicon.cc, где встроенный генератор  выдаст уже готовый файл favicon.ico.

Есть бесплатные программы для создания фавиконов, которые без труда можно найти, написав  соответствующий запрос в поисковике; можно также сделать заказ на профессиональное изготовление фавикона (цена от 1000 рублей за штуку), но чаще веб-мастера подыскивают иконки в специальных галереях, таких, как  http://favicon.fr/ или audit4web ( в настоящее время на реконструкции), или http://www.animated-gifs.eu/

Как вставить фавикон в шаблон блога?

Должна признаться, что когда я несколько месяцев тому назад делала свои первые фавиконы, то шла к желаемому результату какими-то «партизанскими тропами», наощупь; есть в качестве иллюстрации и еще хорошее выражение: «методом тыка», но каким-то образом мне все же удалось вставить иконки  на свои ресурсы.

Потом открывались новые блоги, менялись шаблоны, и мне пришлось весь этот путь пройти заново, так что делюсь с Вами тем, чему сама научилась, понимая, как необходима вовремя сделанная подсказка.

Уже после моих экзерсисов с фавиконами я совершенно случайно обнаружила на очень интересном и полезном блоге  Все для bloggerr(а) на blogspot(е) подробный алгоритм действий по установке значков  на блог.

Если в качестве адреса к иконке я использовала URL веб-сайта, с которого брала эту иконку, то Света и Кайл подсказали, каким образом можно прописать адрес, если изображение находится на собственном компьютере.

Итак,  рассмотрим вопрос о том, как вставить фавикон, взятый непосредственно из галереи.

Для начала нам надо выбрать подходящую иконку, и мы ищем ее  в галереях фавиконов.

Стараемся подыскать такую, которая бы отвечала тематике Вашего блога.

Для «Школы блоггера» я выбрала ту, которую Вы сейчас видите у себя на вкладке браузера и слева от адресной строки.

На мой взгляд, она как нельзя лучше, символизирует бесконечность познания и обучения, да и название этого фавикона – Perpetum, вечный.

Нашла я это изображение на сайте http://www.favicon.cc/

Заходим туда,  выбираем подходящую анимированную картинку и  сохраняем ее

А вот теперь самое главное.

Уже после того, как был опубликован этот пост, мне поступил вопрос: почему фавикон через какое-то время пропадает и, разобравшись в деталях, я пришла к выводу, что причина этого явления в том — как и где Вы храните свою картинку.

Чтобы больше никто не столкнулся с потерей своего фавикона, я сейчас подробно распишу алгоритм действий.

Итак, хранить картинку лучше всего или на http://photobucket.com/ , или на Google Picasa, тем более, что google picassa дает  обратные ссылки на фото, к тому же она «родная» программа для блоггера и Вы, наверняка, умеете ею пользоваться, поэтому давайте подробнее остановимся на
http://photobucket.com/.

1. Регистрируемся, даем название своему альбому.
2. Кликаем Upload now.  Теперь нам предстоит сохранить картинку:  Мы можем ее сохранить как с компьютера, так и непосредственно с web-страницы. Для этого в выпадающем меню выбираем соответствующую функцию.

Копируем Direct linc.

Выбрать картинку из альбома и скопировать ссылку на нее можно также в колонке справа

Теперь эту картинку нам необходимо прописать в html-коде нашего шаблона между тегами

для чего адресная строка должна приобрести следующий вид:

<link href=’сюда помещаем скопированный direct linc’ rel=’shortcut icon’ type=’image/x-icon’/>

И  все это  выражение  помещаем непосредственно перед закрывающим тегом /head.

Шаблон сохраняем  и проверяем, как получилось.

Мне приходилось читать о том, что некоторые браузеры не показывают анимированные картинки, я же пользуюсь, в основном, Mozilla Firefox и, как видите, проблем с анимацией нет, чего и Вам желаю, хотя, как мне кажется, дело не в браузере, а том, что Blogger автоматически трансформирует анимацию в статичные картинки, но если Вы сохраните свои фавиконы на Photobucket или Google Picasa и уже оттуда загрузите их в шаблон,  то Вам удастся избежать подобной неприятности.

Удачи!

Сообщения по теме

Что использовать вместо фотошоп?

Как пользоваться визуальным редактором?