Сегодняшний гостевой пост для рубрики «Блоговодство« написала Татьяна Иванко (блог «Голос сердца«), которая, не пожалев времени и нервов, разобралась с тем, как создать фавикон для блога, и согласилась поделиться с нами этой информацией. Надеемся, она окажется полезной и для вас.
Добрый день, дорогие мамы, а может быть, и папы! Я веду свой блог с 2007 года на платформе блогспот (blogspot). Но недавно мне надоело смотреть на блеклый шаблон, и я решила его немного приукрасить. Одним из этапов изменения шаблона было добавление в него фавикона.
Что такое favicon (фавикон)?
Favicon – это сокращение от английского FAVorites ICON, т.е. значок для избранного, значок сайта или блога. Фавикон отображается браузерами в адресной строке перед URL странички, а также как картинка рядом с закладкой в списке избранных сайтов.
Загляните сейчас в список страничек, которые вы когда-либо сохраняли. Вы увидите, что у некоторых сайтов есть свои картинки. Это и есть фавиконы.
Фавикон – важность для сайта и его продвижения
Некоторые считают фавикон неважным, но посмотрите сами, на каких сайтах останавливается ваш взгляд в списке избранных страниц – с фавиконом или без? Представьте себе, как было бы неудобно искать нужный сайт в списке из сотни сохраненных страниц, если бы этот список представлял собой только текст с названиями сайтов без картинок. Так что мне кажется, что фавикон – это довольно важный элемент странички. С его помощью ваш сайт будет легко найти в списке «Favorites».
От Аллы: еще один важный аспект — это то, как будет выглядеть сайт в поисковой выдаче. Удачный, притягивающий взгляд фавикон будет способствовать тому, что человек как минимум обратит внимание на ваш сайт, как максимум — перейдет на него по ссылке.
Как создать фавикон для блога и установить его
Это оказалось довольно нетривиальной задачей. Статей на тему, как его сделать и установить, было прочитано много, но в результате получался какой-то полурабочий вариант – картинка то не была видна в определенных браузерах (в частности, в Internet Explorer), то значительно замедляла загрузку блога, то искажалась. Но, потратив немало времени и перелопатив гору статей, я все же получила желаемый результат. Все, что я опишу ниже, я получила для платформы блогспот. Думаю, и для других платформ это подойдет.
Итак, начнем с конца. Весь процесс состоит из трех шагов и прост, как раз, два, три!
Шаг 1. Создаем фавикон для блога (скачиваем готовый или рисуем свой сами).
Шаг 2. Сохраняем этот файл в интернете.
Шаг 3. Добавляем всего одну строчку в HTML-код блога.
Вот и все!
Теперь подробнее о каждом из этих простых шагов.
В рамках этого поста я буду рассматривать пример фавикона только в формате .ico, т.к. попытки установить его в любом другом формате (jpg, png и т.д.) приводили к значительному увеличению времени загрузки сайта. Нужно учесть, что не у всех есть высокоскоростной интернет. Кроме того, установка фавикона в других фарматах, в том числе анимированного (gif), достойны отдельной статьи. 🙂 Итак…
Шаг 1. Создаем свой фавикон
Есть несколько вариантов создания фавикона для блога:
Скачиваем готовый фавикон
Задайте запрос «скачать фавикон» или «скачать favicon» и вы получите целый список сайтов. Например, IconJ или favicon.cc. Выбираем понравившийся фавикон и скачиваем себе на компьютер.
Создаем из фотографии или своей картинки
Если у вас уже есть картинка, которую бы вы хотели сделать фавиконом, можно воспользоваться онлайн-генератором фавиконов. Например, CY-PR.com. Заходите на сайт, выбираете свою картинку, нажимаете кнопку «Создать фавикон» и через пару секунд получаете картинку размером 16х16 пикселей в формате .ico. Сохраняем получившийся фавикон. Сразу скажу, что, перепробовав множество сайтов, я не всегда получала таким способом фавикон достойного качества.
Рисуем свой онлайн
Нарисовать свой фавикон онлайн можно на одном из сайтов, который легко найти по запросу «нарисовать или создать фавикон». Вот скриншот сайта favicon.cc, на котором я в режиме онлайн нарисовала в качестве фавикона милую рожицу.
Ничего сложного, все понятно сразу даже для тех, кто не очень владеет английским языком.
Квадрат размером 16х16. Рисуем картинку попиксельно. Выбираем мышкой нужный цвет справа. А потом мышкой же кликаем по квадратикам-пикселам. Пикселы можно стирать ластиком (transparent), переместить картинку, если она получилась не по центру (move), или изменить цвет (восклицательным знаком выделила эти менюшки). В результате получается картинка. Под картинкой есть предпросмотр, и вы можете сразу увидеть, как это будет выглядеть в строке браузера. Кроме того, вы можете увидеть этот значок тут же в самой вкладке браузера и строке с URL еще до сохранения. Очень удобно. Если нравится, то жмем ниже «Download Favicon» и сохраняем его на своем компьютере.
Еще обратите внимание на подчеркнутое словосочетание прямо под рожицей – «Use Animations». Тут очень просто можно сделать gif-анимированную картинку. Например, чтобы у рожицы каждые 2 секунды менялся цвет.
Рисуем фавикон в фотошопе
Если хотите нарисовать фавикон в фотошопе, придется потрудиться. Зато у вас будет только ваш оригинальный фавикон. Особенности создания фавикона в фотошопе:
1. Картинка должна быть размером именно 16х16 пикселей. Для удобства можно нарисовать ее в большем размере, а потом уменьшить до нужного. Холст обязательно должен быть квадратным, не обрезайте пустое поле. Иначе получившийся прямоугольник при установке будет все равно растянут до квадрата и изображение исказится. Не пугайтесь, если конечное изображение выглядит в предпросмотре зернистым. Когда вы установите его на сайт, все будет в порядке.
2. Линии должны быть достаточно широкими, а цвета потемнее, иначе фавикон не будет виден. Например, изначальный вариант моего фавикона 
пришлось преобразовать в такой. 
3. Если хотите получить прозрачный фон, а не заключенное в белый квадрат изображение, при рисовании не забудьте установить фон прозрачным, а при скачивании из интернета обратите на фон внимание. Если видите фавикон в белом квадрате, так он и будет выглядеть на сайте. Готовую картинку сохраняйте в формате png.
4. На выходе мы должны получить изображение в формате .ico. Можно загнать получившееся изображение в онлайн-конвертор, который описывала выше. Но опять же есть 2 момента – можем получить изображение худшего качества (у меня линия сердечка прерывалась и выглядела как пунктирная), а также можем получить белый или вообще черный фон вместо прозрачного. Не все онлайн-конверторы умеют работать с прозрачным фоном. Надо будет хорошо поискать, прежде, чем найдете устраивающий вас вариант.
Я пошла другим путем. Скачала из интернета плагин для фотошоп, который умеет сохранять изображения в формат ico, установила его, открыла получившуюся картинку формата png в фотошопе и сохранила, как картинку ico. Чтобы вы долго не искали этот плагин, дам ссылку на его скачивание.
Распаковываем архив и копируем файлик из него сюда C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\File Formats. Теперь можно сохранить изображение и формате ico.
По созданию изображения на первый раз хватит. 🙂
Шаг 2. Сохраняем этот файл в интернете
Для этих целей я использовала сайт narod.ru. Если вы знаете, как сохранить файл в интернете, можете не читать этот абзац. А если нет, то вот подробная инструкция.
Заводим аккаунт на narod.yandex.ru или, если уже есть, входим. Нажимаем «Создать сайт» и дальше действуем по подсказкам. На первом шаге выбираем, что сайт персональный. На втором достаточно только придумать ему название (другие поля можно не заполнять). На третьем шаге мы ничего не трогаем, жмем внизу страницы «Начать заполнять».
Попадаем на страницу конструктора сайта. В самом верху, рядом со словами «Яндекс Народ», видим кнопку «Конструктор сайтов». Жмем на нее и из появившегося меню выбираем «управление файлами». Появится желтое сообщение, нажмите «я в курсе». Это сайт предупреждает, что ваше изображение публикуется в интернете. 🙂 В левом верхнем углу страницы жмем «Загрузить файл». О да, мы наконец-то добрались до этого счастливого момента! Выбираем с нашего компьютера файл фавикона, и вот он загружен и отображается в табличке файлов. В этой табличке есть поле«ссылка», нажав на которую, вы и получите нужную ссылку. Выглядеть она будет примерно так: lilac-lion.narod2.ru/favicon.ico.
Обратите внимание: полученная ссылка заканчивается на .ico. Это важно. Потому что если вы попытаетесь выложить изображение в другом месте и получите на выходе ссылку, которая оканчивается на .html (например, lilac-lion.narod2.ru/favicon.ico.html), то может ничего не получиться.
Шаг 3. Добавляем всего одну строчку в HTML-код блога на blogspot
Заходим в блоге в меню «Дизайн», вкладка «Изменить HTML» и в страшном коде, который мы видим и от которого хочется сразу отвернуться, ищем с помощью поиска (Ctrl+F) слово /head, что означает конец описания заголовка страницы. Прямо перед ним, строчкой выше, вставляем такую строку:
<link href=’http://lilac-lion.narod2.ru/favicon.ico‘ rel=’shortcut icon’ type=’image/x-icon’>
Чтобы увидеть свой фавикон, вам нужно только заменить выделенный красным текст на свою ссылку, которую вы получили ранее. Можете в качестве эксперимента вставить эту строку в свой код, и вы увидите рожицу, которую я нарисовала.
Думаю, я все очень подробно описала и уверена, что у вас все получится!
Успехов!
Еще по теме:
Как сделать водяной знак на фотографиях — простая пошаговая инструкция.
Гугл-аналитик для чайников — установка Google Analytics, начало работы, основные отчеты.
Автор: Татьяна Иванко