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

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

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

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

Сразу под этим кодом вставляем такой:

<link href='http://где.ваша.картинка.png' rel='shortcut icon'/>

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

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

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

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

tinman321 комментирует...: 21 июл. 2008 г., 18:12:00; вот спасибо, вот как хорошо
HoverHell комментирует...: 21 июл. 2008 г., 19:42:00; Не украшательство, а возможность найти нужную страницу среди сотни закладок в окне или на минималистичной панели мукмарков :)
Эльдар Курбанов комментирует...: 21 июл. 2008 г., 23:41:00; Если я правильно понимаю из того, что вычитал в интернете, то изображение может быть любого размера и формата для современных адекватных браузеров (не IE, как минимум).

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

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

Проверил, загрузив 48*48 favicon.png.
Firefox нормально всё увидел, IE - нет.
Анонимный комментирует...: 22 июл. 2008 г., 01:29:00; Для того чтобы сжать можно воспользоваться различными утилитами, например чтобы ужать png можно воспользоваться pngcrush
http://pmt.sourceforge.net/pngcrush/
virens комментирует...: 22 июл. 2008 г., 01:31:00; 2 tinman321 комментирует...
вот спасибо, вот как хорошо
Пожалуйста. Решил себе прикрутить на блог - дай, думаю, напишу. Мало ли кому пригодится.

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

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

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

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

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

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

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

А favicon у меня занимает 883 байта. Ну не катастрофа, я думаю :-)
Анонимный комментирует...: 22 июл. 2008 г., 05:47:00; IE 7 иконки воспринимает только в формате .ico -- это факт (про ie 6 даже и говорить не хочется :(( он вообще ничего не понимает).
Хотя, думаю, для блогов достаточно специфичной тематики (как например ваш) на подобные вещи стоит закрывать глаза... )))
Анонимный комментирует...: 26 июл. 2008 г., 15:55:00; У меня почему-то как ни старайся значок в командной строке браузера получается размытым, не четким. Странно, а когда я его открываю просто в приложении, то все в порядке.
Fatroll комментирует...: 30 июл. 2008 г., 03:07:00; Кстати, Firefox слегка искажает значки (проверял в Опере, такого не было)
tinman321 комментирует...: 30 июл. 2008 г., 03:26:00; ничего подобного не заметил, буквально сегодня ставил, никаких проблем
virens комментирует...: 30 июл. 2008 г., 04:53:00; 2 Vii комментирует...
IE 7 иконки воспринимает только в формате .ico -- это факт
Странно, но я почему-то не удивлён :-)

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

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

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

2 FATROLL комментирует...
Кстати, Firefox слегка искажает значки (проверял в Опере, такого не было)
Не замечал (FF 3.0). Вроде нормально отображает.
Анонимный комментирует...: 30 июл. 2008 г., 17:17:00; Полезная статья, раньше думал, что под блоггером нельзя этого делать.
Анонимный комментирует...: 9 сент. 2008 г., 08:36:00; Да, большое спасибо. Пригодилось
Андрей Бурдаев комментирует...: 25 окт. 2008 г., 02:49:00; Что-то непонятное: favicon в последние дни исчез...
http://burd-a-komi.blogspot.com/

И суда по блогам - не только у меня...
У вас остался ! Это как ????
Анонимный комментирует...: 20 нояб. 2008 г., 08:20:00; Спасибо за статью. Наконец-то сделал нормальный значок для своего блога
Вячеслав комментирует...: 20 дек. 2008 г., 04:35:00; Спасибо за такой важный совет!!! Я теперь постараюсь по вашей инструкции сделать нормальную иконку.
Анонимный комментирует...: 20 янв. 2009 г., 18:23:00; Photoshop CS2 без плагинов .ico не сохраняет
Pauchok комментирует...: 30 мар. 2009 г., 03:18:00; Отлично, не думал что это так просто. Спасибо!
Soup комментирует...: 25 июл. 2009 г., 22:28:00; Спасибо за помощь! Прикрепил)
MaxKravt комментирует...: 27 сент. 2009 г., 22:32:00; Я пытался для своего ресурса по заработку сделать favicon.png пречисленным выше способом но у меня в opera отображается все равно blogger favicon(
Что посоветуете
Dumper комментирует...: 21 янв. 2010 г., 02:00:00; Между _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 комментирует...: 24 янв. 2010 г., 23:22:00; Очень важная информация!
Я пытался на blogger сделать фавикон и залить через сервис пикаса картинку favicon a, однако это не верный путь. Необходимо заливать favicon через любую другую службу изображений тот же народ допустим. Так как через пикаса идет какой-то редирект. Как только я сделал favicon и залили через народ то в opera и др браузерах все прекрасно отображается.
Примите к сведению и спасибо всем за помощь в создании favicon
Сергей комментирует...: 11 мар. 2010 г., 01:18:00; надо хоть отличатся чем то, а то у всех одно и тоже. Бывает даже бесит. Но я люблю блогспот
Бонг Мастер комментирует...: 21 июл. 2010 г., 18:59:00; я всегдя для создания иконок использую favicon.ru очень удобно, особенно когда нет графического редактора, а и такое бывало )

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

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

Записки дебианщика