Favicon для Blogger

27.06.11 NMitra

Транслитерация в Blogspot: не нужна - отключить

Favicon - это небольшая картинка, как правило, размером 16×16 пикселей, которая отображается во вкладках и закладках браузера. Благодаря зрительному восприятию человек легче ориентируется в пространстве и лучше запоминает ресурс.

Яндекс в результатах выдачи также показывает фавикон напротив заголовка страницы (рекомендации для индексирования [yandex.ru]).

Код фавикона

Формат	Код
.ico	<link href='http://сайт.ru/favicon.ico' rel='icon' type='image/x-icon'/>
.gif	<link href='http://сайт.ru/favicon.gif' rel='icon' type='image/gif'/>
.jpeg	<link href='http://сайт.ru/favicon.jpeg' rel='icon' type='image/jpeg'/>
.png	<link href='http://сайт.ru/favicon.png' rel='icon' type='image/png'/>
.bmp	<link href='http://сайт.ru/favicon.bmp' rel='icon' type='image/bmp'/>
.svg	<link rel="mask-icon" href="http://сайт.ru/favicon.svg" color="#990000">

Формат изображения-favicon может быть любым, но IE поддерживает только .ico [wikipedia.org].

Favicon для Blogspot

Blogger уже добавил свой значок . В шаблоне он вместе с другими тегами link содержится в

<b:include data='blog' name='all-head-content'/>

Для смены иконки, например, на , нужно перейти на вкладку Дизайн, где можно загрузить со своего компьютера картинку, которая переведётся в формат ICO. Она будет отображаться не сразу, а спустя некоторое время. Загрузка фавикона в Blogger

в f t

наверх ↑

62 комментария:

Хозяин Лягушатника: где-то читал, что нужно добавлять непосредственно перед:
/head
NMitra: Так пишут, чтобы не вдаваться в подробности исходной причины или путать неопытного читателя. Как видите я разместила код за много раньше /head и всё работает.

Хотя это утверждение не противоречит верному.
a.tkachuk: Наташа, почему ваш фавикон (как и мой :)))) не отображается в Опере? В ИЕ8 отображается, а в Опере нет. В чем дело?

P.S. Об этом можно было бы не думать, если бы до четверти читателей не смотрели сайт в Опере (я про статистику своего блога, но думаю у вас похожие цифры).
NMitra: А теперь?

У себя сделайте так:

<link href='http://www.iconj.com/ico/2/x/2x9onomw8a.ico' rel='shortcut icon' type='image/x-icon' />
<link href='http://www.iconj.com/ico/2/x/2x9onomw8a.ico' rel='icon' type='image/x-icon' />
Uncle_Sam: Спасибо, работает. На Дропбокс кстати нормально размещать.
Koptelovy: Спасибо,но у меня почему-то не выходит,шаблон не сохраняется,пишет: Не удалось проанализировать ваш шаблон, так как он неправильно сформирован. Убедитесь, что все элементы XML правильно закрыты.
Сообщение об ошибке в XML: The reference to entity "d" must end with the ';' delimiter.
Сейчас стоит код но в IE не работает.С чем это может быть связано,что не так делаю?
http://www.koptelovy.ru/
Яна: я беру готовый флавикон с сайта, вставляю туда куда вы указали в своем шаблоне и сохраняю. правильно?
У меня не получается, что то делаю не так
NMitra: Напишите, пожалуйста, адрес, который вы добавляете. Если http://img-fotki.yandex.ru/get/4701/ale2758123.5/0_4d56a_21960b66_XS.jpg, то обратите внимание на расширение jpg. Его IE не принимает. Нужно ico. Для его получения можете воспользоваться сервисом выше, либо программой только преобразующей в данный формат http://www.graphicsguru.com/favicon.php.
NMitra: Ян, IE не воспринимает вариант, предложенный сервисом. Нужно сохранять картинку на Google сайты/Яндекс.Народ.

Хотя в Мозиле всё в норме.
Koptelovy: https://sites.google.com/site/koptelovy/home/fajly/favicon.ico?attredirects=0&d=1 вставляю эту картинку,шаблон при этом не сохраняется,а эта http://img-fotki.yandex.ru/get/4701/ale2758123.5/0_4d56a_21960b66_XS.jpg сохраняется,но не работает в IE,может дело в адресе картинки?
NMitra: Посмотрите статью http://shpargalkablog.ru/2011/03/kuda-zagruzit-faily.html.

Нужно дать возможность любому просматривать ваши файлы:

"Дополнительные действия"-"Действия на сайте: Управление сайтом"-"Настройки сайта: Общие"-"Настройки доступа: Изменить список доступа к этому сайту"-"Разрешения: Изменить: Общедоступно в Интернете"

Но при этом в настройках должно быть указано "Только соавторы".

Затем на файле нажмите "Просмотр" (см. скриншот) и из строки браузера скопируйте адрес.

В нём символ & замените на &.

И полученный URL добавляйте в шаблон.
Koptelovy: Спасибо за помощь!Очень много полезной информации пишете!
Вставить иконку получилось,прописал код так же для IE ,но он её всё равно не отображает,ну да ладно!Сейчас посмотрел Ваш блог в IE тоже не отображает иконку.
NMitra: В IE иконка появляется. Но поскольку загрузка страницы несколько дольше происходит, то и иконка появляется несколько позже. Мы ведь фактически не убирали вариант Blogger, а положили свой после него. Вот и загрузка происходит соответствующим образом.
Светлана Ковалева: И так, и сяк пробовала, всё равно иконка в IE не отображается.
NMitra: Это связано с тем, что иконка оформлена в виде анимационной картинки. Она двигается. Пропишите специально для IE статичный вариант.
Светлана Ковалева: Спасибо, всё получилось!
a.tkachuk: Сегодня вновь вспомнил про фавикон и Оперу, и вот что интересно. Ни вы вашем блоге, ни в моем фавиконы в Опере не отображаются, хотя в ИЕ проблем нет.

С чем это может быть связано, и как сделать так, чтобы и в Опере все отображалось?
NMitra: А что показывает? Favicon Blogger-а?
NMitra: Любопытно, что у меня перестала отображаться картинка в статье.

По-поводу Оперы: http://mastertalk.ru/lofiversion/index.php/t52508.html
Поскольку у меня не загружен данный браузер, проверить это утверждение не могу.
a.tkachuk: Да, именно так: фафиковн Блоггера показывает.

Почитал мастертолк. Эта папка у меня лежит в винде по адресу
C:\Documents and Settings\a.tkachuk\Local Settings\Application Data\Opera\Opera\profile\images

Удалил все фавиконы блоггера и свой фавикон. Запустил Опер - и опять тоже самое: сначала на первые секунды появилсмя мой фавикон, а потом опять блоггера. А в той папке появились два фавикона - мой (под названием http%3A%2F%2Fwww.iconj.com%2Fico%2F2%2Fx%2F2x9onomw8a) и блоггера (под названием http%3A%2F%2Fwww.blogger.com%2Ffavicon).
NMitra: А если так попробовать:

<link href='адрес_изо' rel='shortcut icon' type='/icon/ico' />
<link href='адрес_изо' rel='shortcut icon'/>
<link href='адрес_изо' rel='icon'/>
a.tkachuk: Попробовал. В ИЕ работает, в Опере опять не отображается.
NMitra: М-да. А как дела обстоят на этих блогах:

http://blogger4you.blogspot.com/
http://blogohelp.blogspot.com/

Мне нужна какая-нибудь зацепка, закономерность.
a.tkachuk: Странно, на этих двух блогах работает. И вот еще на этом работает: http://www.unsam.ru/

А на вашем и на моем почему-то неработает, отображает в Опере фавикон Блоггера.
a.tkachuk: Кстати!

Зато на http://blogohelp.blogspot.com/ и на http://www.unsam.ru/ фавикон не отображается в ИЕ!!! Просто рисует фавикон ИЕ!!

А http://blogger4you.blogspot.com и в Опере, и в ИЕ нормально.
NMitra: У меня складывается впечатление, что есть зависимость от URL иконки или от качества самой картинки. Пробуем так. Добавляем к нашей конструкции следующий код:

<link rel="icon" type="image/png" href="http://example.com/image.png" />

http://example.com/image.png - адрес картинки в формате PNG. (см. http://en.wikipedia.org/wiki/Favicon)
NMitra: Очень занимательно: изо в сообщении и фавикон с одинаковым URL не хотят располагаться на одной странице. Посмотри, плиз, ещё раз на мой блог в Опере. Возможно это было причиной.
a.tkachuk: Нет, Наташа, твой блог в Опере по-прежнему идет с фавиконом Блоггера. Очень интересно.

В ближайшее время напишу письмо в службу поддержки Blogger с описанием этой проблемы. Их ответ обязательно запощу здесь.
NMitra: А теперь))). Думаю, теперь все должно получиться.
NMitra: Я продублировала картинку в формате gif и включила её после ранее размещённых link.

Не нужно использовать "Сайты Google" - там идёт переадресация.
a.tkachuk: Круто, это просто отличная работа!!!! Заработало! Теперь видно и в Опере!!!

В чем секрет??? Ждем подробную инструкцию, а то лично я, например, не очень понял :)

P.S. Хорошо, что не успел написать в службу поддержки, а то даже не представляю как бы они ответили, что "не надо использовать сайты Google" )))
NMitra: У меня получилось:

<link href='адрес' rel='shortcut icon' type='image/x-icon'/>
<link href='адрес' rel='icon' type='image/x-icon'/><link href='адрес.gif' rel='icon' type='image/gif'/>

Хотя можно взять адрес из Яндекс.Народ и тогда не нужно третьей строки. Но там надо периодически продлевать файлы.
Евгения: Залила на народ и теперь отображается иконка народа... (в мозиле).
В опере по-прежнему блоггерский фавикон..
Евгения: Всё получилось при загрузке на дропбокс. Спасибо.
NMitra: И это хорошо!
Mich: Только сейчас заметил, что в IE9 у Шпаргалки нет фавикона, а значок IE ((
У http://blogohelp.blogspot.com/, http://blogger4you.blogspot.com/ и http://www.unsam.ru/ иконки в нём отображаются. А у моего блога тупо "В". Уже завтра полезу исправлять.. Отпишусь.
NMitra: У меня в IE-8 всё показывает, специально зашла посмотреть. Девятку не буду грузить, скоро 10 будет.
Mich: Ура! Поборол IE9! :) Оказывается он "не любит" sites.google.com. Положил фавикон на http://www.iconj.com/ (преобразовывает в ico-формат и бесплатно хранит без продлевания) и он отобразился в IE9! А на Яндекс.Народе не получилось - закрыто автоматическое обращение к адресу иконки (нужно заполнять каптчу). И что интересно, что и в других браузерах мой фавикон стал отображаться ярче и чётче, чем когда он храненился на Picasa. Можете сравнить http://test-dohodi.blogspot.com/ и http://peoplestring-test.blogspot.com/. На втором я пока ещё оставил фавикон на Picasa.
NMitra: Согласна, отображается чётче
NMitra: Спасибо за указанный сервис
Mich: Это не мне.. Я его увидел в комментах выше: "А теперь?

У себя сделайте так:

<link href='http://www.iconj.com/ico/2/.." :))
NMitra: Понятно))
zlodiy: Очень познавательно. Автор молодчага!
NMitra: Благодарю!
Al: мне нравится как у этого блога: в избранном одна, в открытом другая
VitaBloem: Объясните, пожалуйста, как можно удалить фон в иконке? Для хрома икона с расширением .png все работает, а для эксплоура с расширением .ico белый фон не удаляется:(
VitaBloem: Ура! Заработало!) Поспешила написать Вам сюда...
Только вот вопрос: я почему-то не вижу favicon в Google Reader напротив моей подписки. Не подскажите в чем может быть проблема?
NMitra: Для того, чтобы иконка показалась в Google Reader, нужно, чтобы Гугл её проиндексировал. Проверить это можно, написав в адресную строку

http://www.google.com/s2/favicons?domain=shpargalkablog.ru

Для Яндекса - http://favicon.yandex.net/favicon/shpargalkablog.ru

У других пользователей Blogger, которые не добавляли лишние элементы в шаблон, тоже не отображается. В поиске картинка не видна, поэтому решила подождать.

Для того, чтобы картинка была показана, нужно её загружать на сторонние сервисы.
VitaBloem: Проверила http://www.google.com/s2/favicons?domain=vitabloem.blogspot.com - есть. Только вот все также не видно в ридере. Файл храниться на google-сайте. Наверное нужно подождать...
NMitra: Верно, либо подождать, когда сведения обновляться, либо заново переподписаться.
yurii: Наталья !
Самостоятельно создал на Favicon.сс изображение 16х16
В Вашем Посте описана технология замены с применением старого интерфейса. Я на новом. Вот что получилось:
http://www.picatom.com/25/favicon_new1-1.html

Это нормально ? Или, как Вы пишете "она будет отображаться не сразу, а спустя некоторое время" ???
yurii: Я заменил значок, как описано в Посте.
Необходимое условие, но недостаточное ?
Нужно еще "затолкать" строку ?

< link href='http://мой_блог.блогспот/мой_фавикон.ico' rel='shortcut icon' type='image/x-icon'/>
но после после < b:include data='blog' name='all-head-content'/> ???
yurii: но я не совсем разобрался в строке :
< link href='http:// мой_блог.блогспот.ком / мой_фавикон.ico' rel='shortcut icon' type='image/x-icon'/> ???
yurii: значит ли это, что файл: мой_фавикон.ико нужно залить на какой то интернет ресурс ? А стало быть, моя картинка на скрине просто фикция ?

Можете растолковать какие коды нужно вставить и что в них нужно исправить ?
Извините за щепетильность в вопросе
NMitra: Тема не актуальна, последняя версия IE поддерживает и стандартный вариант, статью подправлю.
yurii: Ответ не ясен. Что нужно делать, а чего нет ?
Яснее можно, пожалуйста
NMitra: Нужно: загрузить изображение на вкладке "Дизайн".

Остальное у меня пока под вопросом, нужна проверка временем. У себя дополнительный код убрала, кэш почистила, тем не менее в IE фавикон присутствует.

На тестовом блоге фавикон загрузила "с нуля", но его не видно.
yurii: т.е прописывать коды, как описано в посте не нужно ?
Достаточно только загрузить картинку?
NMitra: Верно, только сейчас увидела на тестовом блоге фавиконку.
yurii: У меня тоже фавиконка быстро отобразилась. Спасибо !
Елена Гончар: Фух, весь вечер промучалась с фавиконом. Не отображается и все тут! А оказалось, что Влоггер его только через сутки обновляет. На следующий день все показывается :)
NMitra: :)) Та же история была в своё время