Иконка сайта - как создать иконку favicon для Blogger?

Иконка сайта, favicon, которая отображается на вкладке маленьким значком, это по большому счёту украшательство. Но красивая иконка сайта сделает его заметнее - конечно, стандартная favicon на блогодвижках Blogger тоже ничего, но она одна и та же у всех на Blogger. Оригинальная иконка это и лицо сайта, и хороший тон дизайнера. Сделать favicon самому нетрудно, а для размещения её потребуется вставить только одну строчку в код шаблона. Итак , заводим себе аккаунт на любом хостинге картинок (та же Picasa подойдёт), берём любой графический редактор и создаём favicon ico за пять минут.


Создать favicon - просто!
Для этого нужно пять минут, немного терпения и графический редактор.

  1. Загружаем ваш любимый графический редактор (Adobe Photoshop, GIMP, Cinepaint...) и создаём изображение размером 16х16 или 22х22 пикселя. Рисуем, творим и создаём favicon - можно взять из элементов оформления блога или из любого понравившегося изображения. Главное, чтобы изображение было несложным - помните, ваш холст всего 22х22 пикселя!
  2. Сохраняем результат в формате png или ico. Есть мнение, что favicon ico предпочтительнее, однако favicon png так же хорошо отображаются (во всяком случае, Blogger-ом).
  3. Загружаем получившийся favicon на хостинг изображений, берём оттуда прямую ссылку на наш favicon.
    Следующие шаги специфичны для блогохостинга Blogger, однако идея для других движков должна быть сходной.
  4. Теперь заходим в Панель управления блогами в Blogger, нажимаем Макет и там - Править HTML.
  5. В коде блога ищем:

    <title><data:blog.pagetitle/></title>


  6. Сразу под этим кодом вставляем такой:
    <link href='http://где.ваша.картинка.png' rel='shortcut icon'/>


  7. Приведённый код должен быть между тегами
    <head> ... </head>


  8. Сохраняем шаблон и перезагружаем страницу. Всё, теперь на вкладке должна появиться созданная иконка.
Пример можно увидеть хотя бы на этом блоге - посмотрите на вкладку с этим постом, наверху должна быть иконка этого блога, жёлтый кленовый лист.


Ссылки
При написании этого поста и правке шаблона руководствовался тем и этим постами.

24 комментариев: |высказаться!| RSS-лента дискуссии.|
tinman321 комментирует...

вот спасибо, вот как хорошо

HoverHell комментирует...

Не украшательство, а возможность найти нужную страницу среди сотни закладок в окне или на минималистичной панели мукмарков :)

Эльдар Курбанов комментирует...

Если я правильно понимаю из того, что вычитал в интернете, то изображение может быть любого размера и формата для современных адекватных браузеров (не IE, как минимум).

Но ограничиваться всё же должно логикой, что в окошке перед адресной строкой максимум 22*22 пикселя. Ну и желательно формат со сжатием, так как всё -таки трафик тратить на такую ерунду не очень хотелось бы =)

Кстати, если верить Википедии, то IE воспринимает только когда пишут целиком rel='shortcut icon' и иконка только в формате ico. Остальные умеют догадываться и без shortcut.

Проверил, загрузив 48*48 favicon.png.
Firefox нормально всё увидел, IE - нет.

librarian комментирует...

Для того чтобы сжать можно воспользоваться различными утилитами, например чтобы ужать png можно воспользоваться pngcrush
http://pmt.sourceforge.net/pngcrush/

virens комментирует...

2 tinman321 комментирует...
вот спасибо, вот как хорошо
Пожалуйста. Решил себе прикрутить на блог - дай, думаю, напишу. Мало ли кому пригодится.

2 HoverHell комментирует...
Не украшательство, а возможность найти нужную страницу
В общем да, есть такой момент. Но есть некоторые суровые орлы из юзабилити, которые за минимализм. Подумал, решил сделать - не помешает.

2 inse3t комментирует...
Постарайтесь оставлять комментарии, несущие разумное-доброе-вечное :-)

2 Эльдар Курбанов комментирует...
Если я правильно понимаю из того, что вычитал в интернете, то изображение может быть любого размера и формата
Мои источники говорят, что желательно PNG или ICO (первое предпочтительнее, ибо).

для современных адекватных браузеров (не IE, как минимум).
Эльдар, тут ведь вот какое дело. По статистике, на этот блог заходят пользователи альтернативной системы из Редмонда - их много, не менее 30% от всех. Часто доходит до 50%. Так что хорошо бы и их не забыть. Кстати проверю на работе, грузится ли моя favicon в IE.

Ну и желательно формат со сжатием
Это копейки, но вообще правильно.

Кстати, если верить Википедии, то IE воспринимает только когда пишут целиком rel='shortcut icon' и иконка только в формате ico.
Гляну на работе - неужели IE настолько крив, что кроме ICO ничего не знает?

В общем, если у кого favicon не грузится - отпишитесь.

virens комментирует...

2 librarian пишет...
Для того чтобы сжать можно воспользоваться различными утилитами
Спасибо за ссылку! Пригодится для других, правда, дел - у меня получаются графики в PNG огромных размеров. Будем ужимать :-)

А favicon у меня занимает 883 байта. Ну не катастрофа, я думаю :-)

Vii комментирует...

IE 7 иконки воспринимает только в формате .ico -- это факт (про ie 6 даже и говорить не хочется :(( он вообще ничего не понимает).
Хотя, думаю, для блогов достаточно специфичной тематики (как например ваш) на подобные вещи стоит закрывать глаза... )))

tarusexpert комментирует...

У меня почему-то как ни старайся значок в командной строке браузера получается размытым, не четким. Странно, а когда я его открываю просто в приложении, то все в порядке.

FATROLL комментирует...

Кстати, Firefox слегка искажает значки (проверял в Опере, такого не было)

tinman321 комментирует...

ничего подобного не заметил, буквально сегодня ставил, никаких проблем

virens комментирует...

2 Vii комментирует...
IE 7 иконки воспринимает только в формате .ico -- это факт
Странно, но я почему-то не удивлён :-)

про ie 6 даже и говорить не хочется :(( он вообще ничего не понимает
Им ещё кто-то пользуется... просто удивительно! :-)

Хотя, думаю, для блогов достаточно специфичной тематики (как например ваш) на подобные вещи стоит закрывать глаза...
Кстати, зря вы так думаете. Хотя суммарная доля броузеров M$, согласно статистике, здесь составляет около 7%, то из-под Windows сюда заходит почти половина читателей.

2 tarusexpert комментирует...
У меня почему-то как ни старайся значок в командной строке браузера получается размытым
Сглаживание?
По мне так даже лучше - пикселей меньше видно :-)

2 FATROLL комментирует...
Кстати, Firefox слегка искажает значки (проверял в Опере, такого не было)
Не замечал (FF 3.0). Вроде нормально отображает.

Калькулятор комментирует...

Полезная статья, раньше думал, что под блоггером нельзя этого делать.

Serge-Victore комментирует...

Да, большое спасибо. Пригодилось

Андрей Бурдаев комментирует...

Что-то непонятное: favicon в последние дни исчез...
http://burd-a-komi.blogspot.com/

И суда по блогам - не только у меня...
У вас остался ! Это как ????

Lirik комментирует...

Спасибо за статью. Наконец-то сделал нормальный значок для своего блога

Вячеслав комментирует...

Спасибо за такой важный совет!!! Я теперь постараюсь по вашей инструкции сделать нормальную иконку.

Анонимный комментирует...

Photoshop CS2 без плагинов .ico не сохраняет

L0stName комментирует...

Отлично, не думал что это так просто. Спасибо!

Александр комментирует...

Спасибо за помощь! Прикрепил)

MaximTr комментирует...

Я пытался для своего ресурса по заработку сделать favicon.png пречисленным выше способом но у меня в opera отображается все равно blogger favicon(
Что посоветуете

Dumper комментирует...

Между _head> нужно поместить по моему вот так:
_link rel="icon" href="http://sait.ru/favicon.ico" type="image/x-icon">
_link rel="shortcut icon" href="http://sait.ru/favicon.ico" type="image/x-icon">

MaximTr комментирует...

Очень важная информация!
Я пытался на blogger сделать фавикон и залить через сервис пикаса картинку favicon a, однако это не верный путь. Необходимо заливать favicon через любую другую службу изображений тот же народ допустим. Так как через пикаса идет какой-то редирект. Как только я сделал favicon и залили через народ то в opera и др браузерах все прекрасно отображается.
Примите к сведению и спасибо всем за помощь в создании favicon

Сергей комментирует...

надо хоть отличатся чем то, а то у всех одно и тоже. Бывает даже бесит. Но я люблю блогспот

Бонг Мастер комментирует...

я всегдя для создания иконок использую favicon.ru очень удобно, особенно когда нет графического редактора, а и такое бывало )

Отправить комментарий

Подписаться на RSS-ленту комментариев к этому посту.