31

Как создать фавикон для блога

Как создать фавикон для блога на blogspotСегодняшний гостевой пост для рубрики «Блоговодство« написала Татьяна Иванко (блог «Голос сердца«), которая, не пожалев времени и нервов, разобралась с тем, как создать фавикон для блога, и согласилась поделиться с нами этой информацией. Надеемся, она окажется полезной и для вас.

Добрый день, дорогие мамы, а может быть, и папы! Я веду свой блог с 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, на котором я в режиме онлайн нарисовала в качестве фавикона милую рожицу.

Как создать фавикон для блога на blogspot

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

Квадрат размером 16х16. Рисуем картинку попиксельно. Выбираем мышкой нужный цвет справа. А потом мышкой же кликаем по квадратикам-пикселам. Пикселы можно стирать ластиком (transparent), переместить картинку, если она получилась не по центру (move), или изменить цвет (восклицательным знаком выделила эти менюшки). В результате получается картинка. Под картинкой есть предпросмотр, и вы можете сразу увидеть, как это будет выглядеть в строке браузера. Кроме того, вы можете увидеть этот значок тут же в самой вкладке браузера и строке с URL еще до сохранения. Очень удобно. Если нравится, то жмем ниже «Download Favicon» и сохраняем его на своем компьютере.

Еще обратите внимание на подчеркнутое словосочетание прямо под рожицей – «Use Animations». Тут очень просто можно сделать gif-анимированную картинку. Например, чтобы у рожицы каждые 2 секунды менялся цвет.

Рисуем фавикон в фотошопе

Если хотите нарисовать фавикон в фотошопе, придется потрудиться. Зато у вас будет только ваш оригинальный фавикон. Особенности создания фавикона в фотошопе:

1. Картинка должна быть размером именно 16х16 пикселей. Для удобства можно нарисовать ее в большем размере, а потом уменьшить до нужного. Холст обязательно должен быть квадратным, не обрезайте пустое поле. Иначе получившийся прямоугольник при установке будет все равно растянут до квадрата и изображение исказится. Не пугайтесь, если конечное изображение выглядит в предпросмотре зернистым. Когда вы установите его на сайт, все будет в порядке.

2. Линии должны быть достаточно широкими, а цвета потемнее, иначе фавикон не будет виден. Например, изначальный вариант моего фавикона Фавикон 1пришлось преобразовать в такой. Фавикон 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, начало работы, основные отчеты.

Автор: Татьяна Иванко

Получайте свежие статьи на почту, как более 5000 читателей "Блоги Мам", и будьте в курсе всего самого интересного и полезного!

Ваш e-mail:

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

31 комментарий

сначала новые
по рейтингу сначала новые по хронологии

у меня все получилось!!! огромное спасибо!!!

Александра (Красивая мама)

Отличная тема! Всем Удачи!

Спасибо вам большое за ваш блог и за эту темку отдельно!Получилось только с 5-го раза!Всем удачи!

У меня, к сожалению, не получается. Выдает ошибку. В чем интересно состоит эта ошибка? Не понимаю. А хочется красоты.

А какую выдает ошибку? Если хотите, могу попробовать помочь разобраться. Мой мейл lilac.lion собачка gmail.com

Выдает следующую запись: Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты. Сообщение об ошибке в XML: Open quote is expected for attribute "{1}" associated with an element type "href".

Буду очень признательна, если поможете.

Спасибо, что откликнулись.

Юля, спасибо! Удачи в создании фавикона! Видела, у Вас новый блог, фавикон его несомненно украсит!

Татьяна хочу сказать просто огромное спасибо за такую подробную инструкцию. Я абсолютно согласна что фавикон, просто необходим для успешного продвижения. Сегодня же начну этим заниматься. Даже мужу понравилось, а он довольно скептически относиться как он говорит бабоблогам)))

Анжела, рада, что у Вас тоже получилось! Поздравляю с открытием блога!

Анжела

Спасибо большое за статью. У меня тоже получилось) Правда саму картинку фавикона буду переделывать, а в качестве эксперимента очень даже хорошо!

Спасибо!!

У меня получилось, когда нарисовала картинку на сайте favicon.cc . С нарисованной в фотошопе не вышло, хотя все так же делала.

Вот моя бабочка

http://quilling-bouquet.blogspot.com/

Светлана, отличная бабочка! Мне понравилась 🙂

Таня, спасибо за код, какие уже способы не пробовала, а бабочка моя не отображалась. И только твой код помог!!!! УРА!

Да, Виктория, красивая бабочка! Радуюсь за каждого, кому помогла статья! Ура!!!

Как интересно! Именно то, что нужно! Буду пытаться сделать! Спасибо.

Я очень рада, что у некоторых уже получилось! Я сама столько билась над этим, столько статей перелопатила... И мне приятно, что одной этой статьи оказалось достаточно 🙂 Всем пожалуйста! Похвастайтесь своими фавиконами, у кого получилось, а?

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

Всё получилось, спасибо!

Красиво получилось!

О, получилось!!! А можно я эту мордачку и оставлю у себя, а то другие у меня не вставляются. Я наверное, ссылку просто не правильно делала.:)

Я не против, оставляйте 🙂

Девочки, я вставила код, который можно копировать, в анонс статьи о фавиконе у себя в блоге http://slonix.blogspot.com/2010/12/blog-post_15.html

Это уже не картинка, а текст.

татьяна, я не ваш вставляла, апробовала скачать и вставить и ваш вставляла, че-то у меня не получается. то что картинка, я поняла:)

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

_

Вот код, который можно скопировать. Только подчеркивание впереди убрать надо.

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

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

Кроме предложенного хостинга для файлов можете попробовать и этот (мои блогспотовские фавиконки оттуда) iconj.com. После регистрации закачиваем картинку и в окошке появляется уже готовый кусочек с кодом, который нужно вставить в шаблон блога.

Я видела, что можно получить код и вставить его в сайт. Но мне больше нравится ресурс, на котором я буду иметь доступ к своему файлу. Мало ли что случится с этой картинкой или вообще с сайтом. Фавикон пропадет. Лучше я буду хранить копию фавикона на компьютере, а в интернете выложу на ресурсе, который дает доступ к файлу, а не просто ссылку на него.

Анна, я давала на этот ресурс ссылку в статье 🙂 Хороший, мне нравится.

Марина Подгорная

Спасибо! Очень полезная и интересная информация!