Записки ПЧ »Статті» Розробка сайтів »Що таке favicon? Як створити favicon і встановити на сайт?
Про favicon і стандарті зображень ico
В IE в якості favicon використовується зображення в форматі ico розміром 16х16. ico - це стандарт для іконок в Windows, такі ж тільки більшого розміру використовуються на робочому столі, для програм і типів файлів в провіднику і т.п. ico схожий на bmp, тому якщо змінити розширення у bmp картинки на .ico, то браузер зможе використовувати її в якості favicon. Але так робити не варто! Картинки в bmp форматі дуже багато важать і видаватимуть на сервер зайве навантаження.
Як правильно зробити favicon?
Як налаштувати favicon на сайті або блозі?
Щоб favicon почав використовуватися на сторінках сайту потрібно в файл header.php вашого шаблону між тегами
... вставити наступний код:Попередньо, звичайно, треба залити в папку images вашого шаблону файли іконок. Я використовую favicon-16.ico для старих версій IE і favicon-16.png для інших браузерів. А favicon-32.ico - для продукції Apple. Як ви могли помітити більшість версій сучасних браузерів вміє працювати з favicon в різних форматах (png, jpg, bmp, ico, gif тощо), саме тому трохи вище я засумнівався в необхідності перетворення png в ico. При виборі формату файлу іконки потрібно звернути увагу на вагу файлу і його підтримку браузерами та іншими додатками. Зверніть увагу на те, що, наприклад, FireFox вміє відображати анімовані gif як іконок, а IE9 немає.
Зараз докладніше розберемо наведений вище код. rel = «shortcut icon» - атрибут який в тезі . встановлює зв'язки сторінки із зовнішніми файлами і документами. Використовується для вказівки на favicon, файли стилів, потоки rss і т.п. rel = «icon» - це для всіх браузерів крім IE, але ми пишемо rel = «shortcut icon». тоді IE спрацьовує на «shortcut icon». а інші браузери на «icon».
type = "image / png» - тип документа в даному випадку зображення у форматі png. Для ico відповідно або type = «image / x-icon» (вважається застарілим), або type = «image / vnd.microsoft.icon».
На різних сторінках одного сайту можна використовувати різні favicon. Цей ефект добре видно на сайті Google, де кожен сервіс має свій значок. Для реалізації такої можливості необхідно на потрібній сторінці виводити шлях до відповідного файлу іконки.