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) бесплатно хранить.

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

16 комментариев:

  1. Кстати в Google Chrome gif-иконка тоже не двигается :( А ведь XXI век на дворе!

    ОтветитьУдалить
  2. Спасибо, Александр!

    Совсем как-то вылетело из головы, что теперь еще и о Google Chrome надо беспокоиться... :(

    ОтветитьУдалить
  3. Т.е. считаете, что и для Chrome можно что-то сделать?

    ОтветитьУдалить
  4. Увы, Александр!

    "Беспокоиться о Google Chrome" я имела ввиду "войну браузеров". А про анимированную иконку... это похоже им придется беспокоиться, если посчитают нужным.

    На всё мое взывание к поисковикам я нашла только такую статью: Some Google Chrome shortcomings.

    И чего-то уже начинает казаться, что это не все браузеры отсталые, а FIrefox опередил свое время - Браузер 22 века! ;)

    Удачи!
    Света

    ОтветитьУдалить
  5. Я тоже так думал (про опережение своего времени). Как вдруг у меня в FF пропали все пароли и сама способность их сохранять :(
    Но с помощью магического слова "Ахалайма-халайма-халай" и плясок с бубном мне удалось вернуть эту способность,но увы не пароли :(

    ОтветитьУдалить
  6. Ой, Александр, а у меня они (пароли) пропадают в Firefox'e весьма регулярно... что я даже считала это почти не багом, а фичей ;)

    Света

    ОтветитьУдалить
  7. Выяснилось, что проблема кроется в несовместимости некоторых дополнений со свежими версиями FF

    ОтветитьУдалить
  8. Классно, что я встретилась с Вашим блогом. Вы так здорово всё объясняете, что понятно любым чайникам. Какие-то "премудрости" у меня на блоге уже освоены, но у Вас так много всего нужного, что буду постепенно изучать. Сегодня поставила фавикончик, именно на IE8 (пользуюсь и другими браузерами, но и им тоже). Кстати, на Опере и FF он тут же отразился тоже (видимо, всилу его простоты и ненакрученности). Дальше можно поэкспериментировать.
    Огромное спасибо!

    ОтветитьУдалить
  9. Верочка, спасибо большое за добрые и теплые слова!

    Приходите еще и удачи вам во всем!
    Света

    ОтветитьУдалить
  10. здравствуйте,
    примите огромную благодарность за помощь, делаю свой блог/пока только в тестовом режиме/ и постоянно обращаюсь к Вам за помощью.
    Но в эту главу хочу вставить свои 5 копеек.
    Мне не удалось разместить картинку на народе . файл залила а дальше что не знаю, ибо ссылка на него ведёт не на саму картинку, а на скачку файла./или я не права?/ но суть не в том,оказывается , если воспользоваться http://www.genfavicon.com/ для редакции, то можно не сохранять картинку к себе на компьютер, а воспользоваться их ссылкой на неё.Что я и сделала.Вот правда не знаю, как долго будет храниться моя картинка у них, но время покажет, а я пока может получу лт вас консультацию, как заливать, /а главное как потом пользоваться ими/картинки на народ, если они не в традиционном формате.

    ОтветитьУдалить
  11. И я сделал, только Интернет Екс. у меня нет, я пользую Мозилло, оперой и хромом.
    У кого есть ИЕ посмотририте пожалуйста виден ли у меня фавикон
    http://windowinukraine.blogspot.com/

    ОтветитьУдалить
  12. Кстати в Google Chrome gif-иконка тоже не двигается :( А ведь XXI век на дворе!
    ___
    В Опере тоже!

    ОтветитьУдалить
  13. И чего-то уже начинает казаться, что это не все браузеры отсталые, а FIrefox опередил свое время - Браузер 22 века!
    __
    Согласен!Даже текстовій редактор есть
    П.С. Света, вам нужно создать форум и присоединить к блогу, так общаться и спрашивать удобней.
    http://www.forum2x2.ru

    ОтветитьУдалить
  14. Ой, Александр, а у меня они (пароли) пропадают в Firefox'e весьма регулярно... что я даже считала это почти не багом, а фичей ;)
    __
    У меня тоже пропадают, в Опере все продуманей, там можно для одного сайта паролей несколько хранить.

    ОтветитьУдалить
  15. В исходном коде, На этой странице у Вас подругому! Почему?

    ОтветитьУдалить
  16. Отличный вопрос, Андрей!

    Все дел о в том, что это не последний пост на тему favicon (см. соответствующую рубрику).

    Окончательный пост по этой теме здесь: http://blogger4you.blogspot.com/2008/11/blogger-favicon.html

    Еще раз спасибо, за вопрос..
    Надо будет где-нибудь в посте поставить ссылку на этот окончательный вариант.

    Света

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

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