Блог Сэра Бездельника

[ ^ — ^ ]

Борьба за favicon

На многих сайтах отображается маленькая такая иконка рядом со строкой адреса, на вкладке окна и при добавлении в «избранное».

Мне тоже периодически хотелось прикрутить нечто подобное к тому или другому своему сайту. Но до сих пор либо это желание было недостаточно сильным, либо среда активно сопротивлялась — в общем не отображался значок и баста. Теоретически всё просто: нарисуй иконку 16х16, сохрани как favicon.ico в корне сайта и будет тебе счастье. Если очень хочется соблюсти все приличия — пропиши ещё пару строк в заголовке. Практика же всегда изобиловала разными неожиданностями.

Среди таких неожиданностей останавливавших меня раньше оказывались отсутствие поддержки Internet Explorer’ом предыдущих версий этой иконки до тех пор, пока сайт не добавлен в избранное, интерпретация хостингом файла иконки как угодно кроме правильного варианта, …

Теперь же аналогичное пожелание возникло у моих заказчиков и проблему стало проще решить, чем обойти стороной. Сайт заказчика обитает на приличном хостинге т.ч. технически favicon поддерживается. Правда описанный выше «теоретический вариант» не прокатил. Пришлось пошарить в Google. В результате непродолжительных поисков на одном из форумов обнаружил содержательное описание, которое и привожу ниже.

У кого-то еще 100-процентно не отображается favicon?

Самое главное заблуждение, на мой взгляд, – это то, что нарисовать можно и в фотошопе, а затем сохранить в .bmp или .gif и вручную переименовать в .ico – НИЧЕГО ПОДОБНОГО. Переименованный GIF однозначно не сработает. GIF-файл (в том числе и анимированный) не имеет никакого отношения к формату .ico и понимается только браузерами Firefox последних версий.
А переименование расширения .bmp может у кого-то когда-нибудь и сработало, но прозрачного фона иконки таким методом добиться точно невозможно.

Вообще, сохранить файл .ico при помощи Adobe Photoshop нельзя. Для этого существуют IconWorkshop или, например, MicroAngelo.

А в остальном, не объясняя почему именно (объяснять можно довольно долго), если у Вас ДО СИХ ПОР не отображается эта иконка, необходимо принять к сведению следующее:

1. Имя favicon.ico не обязательно. НО ОЧЕНЬ И ОЧЕНЬ ЖЕЛАТЕЛЬНО.
2. Основной формат картинки для favicon.ico – 16х16 пикселов, 256 или 16.7 млн. цветов. Но не помешает также знать, что формат ICO может содержать в файле НЕСКОЛЬКО картинок разных размеров и разного качества. Более того, это могут быть абсолютно РАЗНЫЕ картинки. В частности, некоторые посетители сайтов добавляют ярлыки сайтов на рабочий стол. Если Вы хотите, чтобы иконка вашего сайта выглядела прилично и на рабочем столе, стоит включить в нее картинки больших размеров (32 пиксела и, возможно, 48 пикселов). Главное, чтобы она при этом имела разумный «вес».
3. ПРЕДПОЧТИТЕЛЬНОЕ местонахождение файла favicon.ico – корневая папка вашего веб-сайта.
4. Оптимальный код для задействования иконки:
<link rel=»icon» href=»/favicon.ico» type=»image/x-icon»>
<link rel=»shortcut icon» href=»/favicon.ico» type=»image/x-icon»>

5. Браузер Internet Explorer – это единственный браузер на сегодняшний день, который показывает иконку только в том случае, если сайт добавлен в «Избранное».
6. Если браузер Internet Explorer не показывает иконку даже после добавления сайта в «Избранное», в первую очередь действительно рекомендуется почистить кэш. Если и это не помогает, попробуйте просмотреть иконку браузером напрямую:
http://ваш-сайт/favicon.ico
Если она откроется в окне браузера – это есть хорошо.
Но если браузер будет пытаться загрузить иконку как файл (в т.ч. файл неизвестного типа) – это означает, что сервер, на котором находится ваш сайт, не настроен на отображение файлов .ico.
В этом случае, если у вас есть возможность создать или отредактировать файл .htaccess в корневой папке вашего сайта, можно добавить в него строку:

AddType image/x-icon .ico

Если Ваш хостер не предоставляет Вам такую возможность – про favicon.ico, к сожалению, в данной конкретной ситуации придется забыть…

В моём случае дело решилось редактированием htaccess. Да, не забудте очистить кэш браузера, чтобы увидеть только-что прикрученную к сайту иконку.

И на последок — есть специальный сайт для изготовления favicon из любой картинки — favicon.ru.

Реклама

Июль 5, 2008 - Posted by | Найдено в интернете, Работа | ,

1 комментарий »

  1. Интересный материл. Обязательно возьму на заметку!

    комментарий от Алексей | Ноябрь 16, 2011 | Ответить


Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: