▼

7/21/2008

Иконка сайта - как создать иконку 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 комментария:

  1. tinman32121 июл. 2008 г., 18:12:00

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

    ОтветитьУдалить
  2. HoverHell21 июл. 2008 г., 19:42:00

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

    ОтветитьУдалить
  3. Эльдар Курбанов21 июл. 2008 г., 23:41:00

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

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

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

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

    ОтветитьУдалить
  4. Анонимный22 июл. 2008 г., 01:29:00

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

    ОтветитьУдалить
  5. virens22 июл. 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 не грузится - отпишитесь.

    ОтветитьУдалить
  6. virens22 июл. 2008 г., 01:34:00

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

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

    ОтветитьУдалить
  7. Анонимный22 июл. 2008 г., 05:47:00

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

    ОтветитьУдалить
  8. Анонимный26 июл. 2008 г., 15:55:00

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

    ОтветитьУдалить
  9. Fatroll30 июл. 2008 г., 03:07:00

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

    ОтветитьУдалить
  10. tinman32130 июл. 2008 г., 03:26:00

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

    ОтветитьУдалить
  11. virens30 июл. 2008 г., 04:53:00

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

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

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

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

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

    ОтветитьУдалить
  12. Анонимный30 июл. 2008 г., 17:17:00

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

    ОтветитьУдалить
  13. Анонимный9 сент. 2008 г., 08:36:00

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

    ОтветитьУдалить
  14. Андрей Бурдаев25 окт. 2008 г., 02:49:00

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

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

    ОтветитьУдалить
  15. Анонимный20 нояб. 2008 г., 08:20:00

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

    ОтветитьУдалить
  16. Вячеслав20 дек. 2008 г., 04:35:00

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

    ОтветитьУдалить
  17. Анонимный20 янв. 2009 г., 18:23:00

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

    ОтветитьУдалить
  18. Pauchok30 мар. 2009 г., 03:18:00

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

    ОтветитьУдалить
  19. Soup25 июл. 2009 г., 22:28:00

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

    ОтветитьУдалить
  20. MaxKravt27 сент. 2009 г., 22:32:00

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

    ОтветитьУдалить
  21. Dumper21 янв. 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">

    ОтветитьУдалить
  22. MaximTr24 янв. 2010 г., 23:22:00

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

    ОтветитьУдалить
  23. Сергей11 мар. 2010 г., 01:18:00

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

    ОтветитьУдалить
  24. Бонг Мастер21 июл. 2010 г., 18:59:00

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

    ОтветитьУдалить