Показаны сообщения с ярлыком Favicon. Показать все сообщения
Показаны сообщения с ярлыком Favicon. Показать все сообщения

26.7.11

Blogger: теперь у вас официально могут быть свои favicon-ки.

40 comments

Мои друзья, недавно случилось НЕВЕРОЯТНОЕ!

Blogger официально разрешил нам использовать персонализированные фавиконки (favicon). Теперь он будет хранить вашу личную фавиконку по адресу http://адрес вашего блога/favicon.ico (для этого блога это http://blogger4you.blogspot.com/favicon.ico) а заменить оранжевую букву В в адресной строке на свою малюсенькую картиночку стало делом пары кликов.

Расскажу немного подробнее, потому что здесь не обошлось без тонкостей. Оказывается, то что Blogger собирается хранить вашу favicon в виде файла favicon.ico абсолютно ничего не значит! Но об этом немного далее...

А пока чтобы загрузить фавиконку в Blogger вам надо зайти в Дизайн и в блоке с надписью Значок кликнуть по ссылке Изменить (См. рисунки)



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

А вот тут начинаются чудеса. Не знаю "баг это или фича" (ошибка это или специальная возможность), но картинку сгенеренную мною специально как favicon.ico (по правилам - файл с фавиконкой должен иметь именно такой тип .ico и лучше иметь даже именно такое имя favicon) Blogger в качестве favicon загружать не захотел попросту сказал "Недопустимый тип файла". Картинки с расширениями jpeg, gif, png принимал в качестве иконок безропотно, вот только однажды пожаловался, на то что я попыталась загрузить в качестве favicon неквадратную картинку и её естественно не загрузил.

Установить на Blogger свою favicon действительно очень просто!

Иногда после установки favicon читатели спрашивают: "Я загрузил(а) новый "значок" в Blogger, вижу его у себя на Панели инструментов, а при просмотре блога он у меня не появляется. Что я сделал(а) не так?"

Отвечаем: "Вы все сделали так! (Если бы что-то было не так - Blogger бы сказал вам об этом и не загрузил бы не понравившуюся ему картинку.) Что делать?
1. Помните, что скорость света конечна, а Blogger'у еще надо преобразовать вашу картинку в полноценный favicon.ico файл.
2. Иногда ваш браузер не обновляет favicon, а берет её из своего кэша. Бороться с этим просто: сходите по адресу http://адрес вашего блога/favicon.ico и убедитесь, что по этому адресу уже зегружен ваш новый "значок", а потом загляните к себе в блог - и о, Чудо! ваша favicon сияет во всей своей красе :))) "

Об установке псевдо-favicon я в этом блоге уже написала немало и если вы уже воспользовались одним из предложенных ранее способов стоит ли все переделывать? Да, обязательно стоит! Потому что favicon от Blogger'а станет официальным лицом вашего сайта (блога), она попадет как в выдачу поисковиков, так и в списки любимых блогов, в виджеты фидбернер и т.д. Чем наша пседо-favicon похвастаться увы не могла...

Всем красивых креативных фавиконок в блоге
и хорошей погоды в реале ;).
Ваша Света
Blogger: кошка. Комментарии и вопросы более чем приветствуются, нужна помощь - поможем!
Читать дальше...

4.11.08

Blogger: Если вы "потеряли" Favicon!

24 comments

Медведь опять в строю!
Всем доброго времени суток! Кто уже давно читает этот блог знают, что символом этого и всех наших с Кайлом блогов является этот танцующий мишка. Он у нас на каждой странички нашего блога пляшет слева на командной строке. [Такая картинка отображающаяся на командной строке и в закладках называется Favicon].

Подробно о Favicon я уже писала и рассказывала как установить их в своем блоге:
1) Favicon для Блоггера!
2) Favicon для Internet Explorer!

И теперь представьте мое расстройство, когда буквально на днях вместо пляшущего на командной строке медведя я обнаружила оранжевую В. Поймите меня правильно, я ничего не имею против символа Blogger'а, я горжусь, что сайт ведется на Blogger'e и даже поставила у себя баннер "I POWER BLOGGER", но favicon на сайте - это то что я всегда хотела иметь! И чему уже научила своих читателей, а тут...

Так что сегодня я провела некоторое исследование в интернете пытаясь понять все ли блоги, ведущиеся на Blogger'e "потеряли" свои favicon и как с этим бороться.

Все так: вокруг уже много блоггеров, жалующихся на эту проблему, а она похоже возникла только на прошлой неделе! И уже найдено решение (Fix for "missing" favicon):

Просто переместите код, описывающий вашу favicon в конец заголовочной секции, т.е. непосредственно перед </head>

У меня это получилось так:

</b:skin>

<link href='http://junglebook2007.narod.ru/baer11.ico' rel='shortcut icon' type='image/x-icon'/>

<link href='http://i201.photobucket.com/albums/aa306/kylekeeton/baer-0008.gif' rel='icon' type='image/gif'/>

</head>

<body>
Надеюсь кому-нибудь это поможет!
Будут вопросы спрашивайте!

А пока всем удачи!
Света

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

6.9.08

Favicon для Internet Explorer!

16 comments


Картинка взята из
этой забавной статьи!
Нет в Мире Совершенства
(но мы можем к нему стремиться)!

Эта небольшая статья статья обязана своим написанием наблюдательности Челиты (Былое и думы) и Несовершенству Мира. Ну, о несовершенстве мира мы поговорим в другой раз и даже войну браузеров будем обсуждать не сегодня. А сегодня лишь примем как данность, что некоторые вещи в интернете не будут работать сразу во всех браузерах. Так в комментарии к предыдущей статье, где я рассказывала о том как сделать Favicon для Blogger'a, Челита удивленно заметила, что она не видит никакого "пляшущего мишки" в командной строке браузера. И тут я поняла, что столкнулась вот с этим самым Несовершенством Мира! Да я читала, что для "старых" браузерах типа Internet Explorer надо писать отдельный код, но, признаться честно, я не очень в это поверила, статья, которую я читала была написана давно и я наивно полагала, что в 2008-то году все уже будет работать для любого браузера... Ну, хорошо, о моей наивности мы поговорим в другой раз, а пока ситуацию нужно срочно исправлять, а то расхвасталась я в прошлой статье какой у меня теперь симпатичный мишка сидит в командной строке и у вас будет сидеть если вы добавите эту страничку себе в закладки....

Короче, исправляем ситуацию.

Сначала немного теории:

1) Favicon для Internet Explorer может быть маленькая картинка только в формате .ico
надо же я никогда и не слышала об этом формате прежде! [Спасибо Челита ;)]
2) Favicon для Internet Explorer не будет анимированным (т.е. мой мишка плясать, увы, не будет, но впрочем будет вполне узнаваем!)
3) У вас в блоге может несколько описаний для Favicon сначала описываем Favicon для Internet Explorer, затем для других браузеров можем поставить анимированную картинку в качестве Favicon.

Итак, теперь к делу.

1. Будем исходить из того что на предыдущем шаге мы уже поставили Favicon на наш блог. И это скорее всего была картинка в формате png jpg или gif. Теперь у нас есть 2 пути - Первый воспользоваться продвинутым редактором картинок и попросить его сохранить нашу картинку в формате .ico А если у вас нету такого "продвинутого" редактора, то можно пойти по второму пути - этот путь ведет нас на сайт http://www.genfavicon.com/ где мы можем из нашего рисунка сгенерить Favicon в том самом ico формате.

Сайт к сожалению на английском, так что я быстренько объясню вам последовательность действий:
1) В оранжевом квадратике выбираем картинку из интернета [первое поле ввода] или cо своего компьютера нажимаем [browse] чтобы выбрать картинку. Теперь нажимаем [Upload].

2) Теперь мы видим нашу картинку в правом окошке и серую активную область наложенную на неё. Как работать с "активной областью" мы обсуждали в статье где мы меняли размер картинки т.е. теперь мы можем мышкой перемещить и сжимать-растягивать эту область и когда серая область будет прикрывать ту часть картинки, которую мы хотим видеть на нашей Favicon мы нажимаем кнопку в зеленом квадратике [Capture & Preview]

3) Теперь в синем квадратике мы видим нашу иконку и если она нам нравится мы нажимаем [Download Favicon] и видим пустую станичку только с нашей картинкой кликаем правой кнопкой мыши (у меня там безымяный палец) и выбираем сохранить рисунок.

2. Теперь у на на компьютере есть маленькая картинка с расширением ico только вот не совсем понятно куда его поместить, потому что мой горячо любимый Photobucket файлы с таким расширением сохранять не захотел, Blogger и Picasa (где собственно хранятся все картинки нашего блога, которые мы загружаем в блог напрямую с домашнего компьютера) тоже не хотят размещать картинок с расширение .ico Я нашла способ хранить ico файл на Народе завела там аккаунт и закачала туда файл. [Если понадобится инструкция как это сделать - спрашивайте, я напишу. Или пришлите мне вашу иконку, а я ее на Народ помещу.]

3. И наконец самое последние добавляем новую строчку в наш HTML код нашего Дизайна. Как и в прошлый раз выполняем последоватнльность действий: На "Панеле инструментов"(Dashboard) мы выбираем "Дизайн"(Layout) и в Дизайне кликаем на Изменить HTML. В открывшимся окошке находим строчку:

</head>

Теперь перед ней и перед нашей строчкой, где мы уже прописывали Favicon вставляем строчку вида:

<link href='адрес куда нам удалось поместить нашу ico-картинку' rel='shortcut icon' type='image/x-icon'/>

у меня это получилось так:

<link href='http://junglebook2007.narod.ru/baer11.ico' rel='shortcut' type='image/x-icon'/>

Т.е. все вместе:
<link href='http://junglebook2007.narod.ru/baer11.ico' rel='shortcut' type='image/x-icon'/> - Favicon для Internet Explorer

<link href='http://i201.photobucket.com/albums/aa306/kylekeeton/baer-0008.gif' rel='icon' type='image/gif'/> - Анимированная Favicon для современных браузеров

</head> - Конец заголовочной части блога

Ну, вот и всё! Если делать что-то специальное для Internet Explorer вам показалось слишком утомительно - не расстраивайтесь это может немного подождать по нашей статистике всего 25% наших читателей используют Internet Explorer. Мы вот тоже только вчера сделали Favicon для Internet Explorer.

Всем удачи во всех ваших делах,
Света
PS Для людей сносно владеющих английским языком очень рекомендую этот сайт: http://www.iconj.com/ - на нем вы можете подобрать или создать себе favicon, а так же он будет для вас её (favicon) бесплатно хранить.

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

5.9.08

Favicon для Блоггера!

56 comments

Самая маленькая картинка в вашем блоге!

Доброго времени суток!

Сегодня я бы хотела начать с вопроса на внимательность - что изменилось в этом блоге? Ну, трудно, наверно сказать - вот новая статья, которую я только что написала (вру, наверно, я-то эту статью только пишу... правда, когда вы её увидите эти слова пожалуй станут правдой - Вот как оказывается все сложно в нашей жизни!) Ну, мы, пожалуй продолжим: Как мы только что выяснили спрашивать вас, что изменилось на блоге - довольно жестоко. Тогда я вам просто подскажу: посмотрите, пожалуйста, на верх странички... и даже еще выше - взгляните на адресную строчку, где вы видите URL этого блога: http://blogger4you.blogspot.com и слева от этого адреса вы обнаружите того же самого пляшущего мишку, которого вы видите в этой статье. Такая картинка в адресной строчке и в закладках вашего браузера называется Favicon (от английского FAVorites ICON — «значок для избранного»). Прочитать больше о Favicon мы можем в Википедии.

Сегодня я расскажу как установить такую картинку у себя в блоге. Прежде всего, что это может быть за картинка - конечно, очень маленькая - должна поместится в крошечном квадратике на командной строке и, наверное, запоминающаяся - как некоторый фирменный стиль, а то чего бы мы тратили столько сил на это. Теперь по шагам:

1) Рисуем или находим в интернете, картинку, которую мы хотим сделать символом нашего сайта (своего мишку мы честно где-то нашли - уже не помню где), картинка может быть с любым расширением: png, gif, jpg и т.д.

2) Сохраняем нашу картинку на Photobucket или еще где-нибудь (о Photobucket я подробно писала здесь).

3) Теперь мы делаем новый шаг в освоении Blogger'а. На "Панеле инструментов"(Dashboard) мы выбираем "Дизайн"(Layout) и в Дизайне кликаем на Изменить HTML, я на картинке обвела карандашом, где эти заветные слова искать:
И видим мы там опять какой-то зловещий текст:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

<head>



Зловещий текст нас к счастью совсем не интересует, во всем этом зловещем тексте нам надо только найти строчку со словом </head> [Что значит конец описания заголовка нашей страницы], для чего мы используем сочетание клавиш CtrlF и сразу перед этой строчкой на надо вставить следующую строку:

<link href='адрес вашей картинки' rel='icon' type='image/тип вашей картинки'/>


Вместо слов адрес вашей картинки вставьте настоящий адрес вашей картинки, скопируйте его из "direct link", если вы положили фотографию на Photobucket он будет что-нибудь типа http://i201.photobucket.com/albums/aa/myfavicon.jpg

А вместо слов тип вашей картинки вставьте три последние буквы имен вашей картинки, которые находятся в имени после точки и называются расширением. Это может быть png gif jpg и может быть что-то еще...

В нашем случае эта строчка выглядела таким образом:

<link href='http://i201.photobucket.com/albums/aa306/kylekeeton/baer-0008.gif' rel='icon' type='image/gif'/>

После всех этих манипуляций нажимаем кнопочку ПРОСМОТР и если нам все нравится нажимаем кнопочку СОХРАНИТЬ ШАБЛОН, а если нравится, но не очень можно что-нибудь поменять (картинку, например) или закончить работу совсем радикальным образом нажав кнопку УБРАТЬ ИЗМЕНЕНИЯ.

Надеюсь у всех все получится: будут вопросы - спрашивайте. А я пока буду думать может мне в качестве иконки вот эту мою кошечку поставить - она тоже выглядит симпатично! Что скажете?

Всем счастливо!
Света
PS К сожалению, Челита оказалась права: в отличии от всех других браузеров Internet Explorer не увидел нашу Favicon - читайте продолжение этой статьи Favicon для Internet Explorer! (Если на вашем Blogger блоге была Favicon, но куда-то пропала читайте статью: Blogger: Если вы "потеряли" Favicon! )

Комментарии и вопросы более чем приветствуются,
нужна помощь - поможем! Читать дальше...

Популярные сообщения