Іконки сайту, favicon.ico, тонкощі створення

Створення файлу favicon.ico
Чим створити значок?
Розміщення іконки
Особливості відображення значка сайту різними браузерами
висновки
Які ще бувають трабли?

"Поїхали ..."
Ю. Гагарін

Як ви напевно знаєте, у деяких сайтів в Мережі є маленькі іконки (піктограми), які відображаються браузером десь поруч з ім'ям сайту. Веб-майстри придумують якусь впізнавану і яскраву картинку, яка містить якийсь логотип сайту і прикріплюють її до сайту. Люди швидше дізнаються сайт по картинці, ніж за назвою - так влаштований наш мозок. Ця картиночка додається досить просто і керівництво по її установці знайти, думаю, зовсім не важко. Однак я деякий час назад через різні одіозних особистостей на поточному місці роботи, дуже довго з нею намучився.

Коротка передісторія була така - створений і доданий на сайт значок показувався і в Opera і в FireFox, але вперто не хотів світитися в IE (Internet Explorer), як би я не бився. На то його і називають в народі - Віслюк, IE цей. Тому що тупий.

Створення файлу favicon.ico

Файл у іконки повинно бути favicon.ico і ніяк інакше. Існують ще старі стандарти за якими це ім'я файлу жорстко специфіковане, тому краще не експериментувати. Значок сайту зазвичай має розмір 16 × 16 пікселів і створюється в форматі ICO - стандартному графічному форматі Windows для іконок. Хоча інші браузери вміють відображати і GIF, і JPG, і PNG значки, але краще не експериментувати.

Глибина кольору - краще не перевищувати 256 кольорів, тобто 8 біт. Але можна робити іконку і більше (32 × 32 або 48 × 48 і глибиною кольору в 32 біт, але тоді вона буде займати більше місця і знову ж будуть проблеми зі старими IE).

Як видно - тут суцільний мінімалізм виходить. Компроміс з красивістю. Краще менше, та краще.

Чим створити значок?

Adobe Photoshop не вміє зберігати графічні картинки в форматі ICO, але до нього можна підключити модуль щоб він цей формат ICO розумів.

Для вінди ще є спеціальний редактор іконок, він теж вміє це робити, називається він Icon Collector Graphics Editor виробництва Great Owl Software . Також редактор іконок входить в поставку пакету для розробки сайтів MS Visual Studio.

У стандартному графічному редакторі під Юнікс, в GIMP'е, формат ICO є і прекрасно розуміється у всіх іпостасях - аж до підтримки верств і 32-бітного кольору. Так що в Юнікс теж все нормально.

Якщо у вас всього цього немає, то можна скористатися чудовим web-сервісом http://favicon.ru . На цьому сайті можна перекодувати в справжнісінький ICO файл картинку будь-якого графічного формату.

Розміщення іконки

Іконка розміщується в корені сайту і для того щоб все було правильно, інформацію про її розміщенні потрібно вказати в заголовку <head> HTML сторінки.

Що означають ці два записи? Запис з "shortcut icon" встановлює власне іконку, які будуть показані браузером в адресному рядку.

Запис з "icon" встановлює іконку іншого роду - з такою іконкою буде створена збережена в винде посилання на ваш сайт. По хорошому для цієї мети потрібно зберегти іконку розміром побільше - 32 × 32 пікселя або 48 × 48. Але зійде і така.

Тип "image / x-icon" - це MIME-тип файлу, він означає що це не що інше як іконка формату ICO. Як я вже говорив, як піктограму сайту можна вказувати і наприклад GIF картинку, але не рекомендується. Однак, GIF більш просунутий формат, він має якусь прозорість і можливість створювати анімоване зображення.

Є один спосіб обійти це обмеження.

Браузер завжди бере останній із зазначених значків - за тієї умови, що розуміє тип значка. Таким чином, розуміють GIF візьмуть GIF, інші візьмуть ICO. І користувач з більш "правильним" браузером побачить більш красиву картинку. Але ICO-версія повинна вказуватися завжди, оскільки значки інших MIME-типів не придатні для оформлення ярликів Microsoft Windows (URL-файлів), а це необхідно і на робочому столі, і в інших папках.

Особливості відображення значка сайту різними браузерами

Треба сказати що на використання значка сайту немає будь-якого єдиного прийнятого всіма браузерами стандарту. Тому поведінку різних браузерів при завантаженні іконки буде різним. Але зараз у більшості браузерів з розумінням різних форматів все нормально. Але гірше за все справи йдуть з IE, тому про нього і обговорюємо детально.

Internet Explorer. Ось тут найцікавіша собака і зарилася. Історія появи favicon.ico і почалася з далекого IE версії 5.0, коли цей браузер показував іконку тільки для збережених в Вибраних (Закладках) сайтів. Звідси і назва - favorite icon.

Тому якщо не бачите в IE іконки свого сайту - збережіть його в обрані і перезапустіть віслюка (бо в MS продуктах це завжди потрібно). Якщо IE і після цього не відобразить її, то спробуйте почистити кеш браузера.

Explorer завжди намагається взяти картинку з кореневої директорії сайту і завжди передбачає що вона названа favorite.ico. Навіть якщо іконка спеціально не вказана в документі. Якщо такого файлу на сервері немає або ж іконка описана в HTML документі під іншим ім'ям - IE все одно тупо запросить з сервера /favicon.ico і отримає 404 помилку на свій запит. І більше нічого робити не буде. Просто вважатиме що іконки немає і не покаже її. До речі, ось звідси і йдуть сервера розростаються фалйамі errors.log у апачів записами виду "404 GET favicon.ico". У всьому цьому винні віслюки, це вони даремно жеруть дисковий простір серверів. Щоб уникнути цього створюйте файлик favicon.ico хоча б з нульовим розміром. Показуватися він ніяк не буде, але ви попередите засмічення логів вашого сервера.

Власне, до версії 6.0 так нічого і не змінилося. І, до речі, якщо в якості іконки вказана картинка розміром більше ніж 16 × 16 - віслюк теж її не зрозуміє.

Однак же останній Internet Explorer 7 версії за твердженням Майкрософта показує ці ікони не тільки для обраних сайтів, а для всіх. Алгоритм пошуку іконки в ньому теж трохи змінився. Тепер віслюк дивиться на те, що йому вказали в документі і вважає цей запис першочерговим. При її отсутсвии favicon.ico береться по дефолту, по-старому - з кореня сайту. Фініта ля комедія.

Решта сучасні браузери (Mozilla, Firefox, Opera, Netscape) також підтримують іконки, але на відміну від IE, вони вони завжди керуються посиланням "shortcut icon" і не шукають іконку з іншими шляхами. До того ж, як правило, вони підтримують іконки різних графічних форматів і розмірів (використовуючи в останньому випадку масштабування для досягнення потрібного результату).

MS IE підтримує favicon з версії 5.0
Netscape підтримує favicon з версії 7.x
Mozilla підтримує favicon з версії 0.9.6
Konqueror підтримує favicon
Інші останні версії сучасних браузерів (Firefox, Opera, Safari, iCab, AOL Explorer і т.д.) також підтримують favicon.

висновки

Створюйте favicon.ico розміром рівно 16 × 16 пікселів, розміщуйте її в корені вашого сайту і обов'язково прописуйте шлях до неї в HTML. І буде вам максимальна мультібраузерность.

Які ще бувають трабли?

Якщо іконка не з`явилася там, де їй належить бути, необхідно упевнитися, що ваш сервер передає іконку в браузер і відображає її, а не передає, як файл і пропонує вам його зберегти. Це перевіряється простим шляхом введення в браузер адреси вашого сайту і імені іконки, наприклад http://yoursite.com/favicon.ico , За умови звичайно, що іконка лежить в кореневій директорії.

У другому випадку ваш сервер не налаштований на відображення файлів .ico. Для того щоб виправити цю ситуацію вам необхідно створити в корені сайту файл .htaccess і додати в нього наступний рядок

AddType image / x-icon .ico

Ну або безпосередньо дописати це в головний конфіг апача httpd.conf

kpblca (c) Оригінал статті розташований тут: http://kp-bl-c.livejournal.com/184063.html

Чим створити значок?
Які ще бувають трабли?