Що таке фавіконки і для чого вона потрібна
План створення і розвитку будь-якого сайту, як інформаційного, так і комерційного, обов'язково повинен включати заходи щодо створення власного неповторного вигляду ресурсу. Важливо розробити елементи, які роблять ваш сайт впізнаваним. Одним з таких факторів є крихітна картинка - фавіконки.
1. Де використовуються фавіконки
Термін favicon - це скорочення англійського fav ourite icon. що означає "значок для обраного". Це картинка-піктограма - значок сайту (або сторінки).
Фавіконки можна бачити в наступних місцях.
1. Як говорить сама назва терміна, значок фавіконки відображається в закладках браузерів поруч з назвою сайту.
Приклад панелі закладок в браузері Mozilla Firefox
Якщо в панелі закладок користувача велика кількість посилань, то орієнтуватися між ними найпростіше по їх піктограм, а не за текстами цих посилань: картинку наш мозок зчитує швидше, ніж текст. Тому ті сайти, які не мають фавіконки, в цьому плані програють: їх важче знайти в списку серед таких же безликих сайтів.
2. фавіконки відображається на вкладках браузерів зліва від заголовка відкритої сторінки. Застосування фавіконки в цьому місці складно переоцінити: якщо в браузері відкрито багато вкладок, то їх заголовки стають не видно, і швидше за все вкладка з потрібною сторінкою знаходиться в тому випадку, якщо у неї є своє "обличчя", тобто фавіконки. Але навіть якщо частина заголовків видно, ми з вами все одно вважаємо за краще текстової інформації графічну, над якою не потрібно замислюватися.
Картотека в браузері Google Chrome
3. Пошукова система Яндекс показує фавіконки сайтів в результатах пошуку, що вигідно відрізняє її від інших пошукачів, які такої практики не мають. Це зручно для користувача і вигідно сайтам, які виводяться в результатах пошуку: по-перше, інформація з картинкою привертає увагу більше, ніж без неї, а по-друге, вже при першому знайомстві з сайтом в пошуковику у відвідувача закарбовується його "портрет" - фавіконки.
Для індексації фавіконок сайтів у Яндекса навіть є спеціальний робот:
Тепер, коли ви, сподіваюся, зрозуміли важливість цього невеликого елемента в оформленні сайту, перейдемо до технічної частини: як зробити фавіконки.
2. Вибір картинки-піктограми для фавіконки
Спочатку необхідно визначитися з тим, яка картинка буде красуватися в браузерах ваших відвідувачів в якості значка сайту. Це дуже важливий момент. Підходити до нього як-небудь і робити фавіконки нашвидку, за принципом "аби було" абсолютно неприпустимо! З одного боку, фавіконки повинна чітко і недвозначно відображати суть сайту. З іншого боку, вона повинна бути лаконічною. Сайти компаній з впізнаваним брендом в мінімалістичному стилі просто використовують як фавіконки свій логотип:
Але, з іншого боку, якщо, скажімо, фавіконки сайту, присвяченого качкодзьоба, буде цілий звір, та ще без ознак стилізації, та ще й з фоном, мало хто розбере, що це таке. Розмір фавіконок - всього 16х16 пікселів. і в ці 256 точки потрібно вмістити максимум інформації, але виглядати це має стильно і красиво. Про нестачі художніх здібностей краще довірити цю задачу фахівцям - художникам, дизайнерам.
3. Формат фавіконки
Сучасні браузери "навчилися" розпізнавати фавіконки не тільки в форматі ico, але і jpg, gif (статичні і анімовані), png. Тільки Internet Explorer досі принципово не бажає підтримувати jpg, а також анімовані гифки. Зате, з іншого боку, в останніх версіях браузера Mozilla Firefox підтримується анімація фавіконок в форматі gif.
Майте на увазі, що формат jpg не підтримує прозорість. Так що, якщо вам, наприклад, потрібна картинка без фону, краще не використовувати в якості фавіконки jpg.
Не забувайте, що браузери самостійно не знайдуть фавіконки іншого формату, ніж ico, їм потрібно буде вказати на місцезнаходження такої фавіконки спеціально.
4. Розміщення фавіконки на сайті
Створивши фавіконки, закачайте її в кореневу директорію сайту. Якщо ви все зробили за стандартом, інших дій не буде потрібно. Але якщо вам необхідно покласти фавіконки не в кореневу, а в іншу директорію або ваша фавіконки іншого формату, ніж ico, потрібно буде вказати браузерам її місце розташування. Робиться це так. В межах заголовка сторінки
потрібно додати наступні метатеги:
Другий рядок потрібна для його величності браузера Internet Explorer, а всі інші браузери зрозуміють перший рядок. До речі, звідси випливає висновок, що ви можете зробити іконку в форматі ico для Internet Explorer, а для інших браузерів - в будь-якому іншому з підтримуваних форматів, і в першому рядку вказати їм, що у вас на сайті і таке є:
Якщо ви використовуєте нестандартний шлях або формат картинки, потрібно буде внести відповідні зміни в код цих рядків.
Якщо вам хочеться використовувати для певних сторінок інші фавіконки, це теж можна зробити. Створіть потрібні картинки, залийте їх на сайт, і в тезі у вибраних сторінок пропишіть шлях до потрібної фавіконки.
Кілька слів про мобільних іконках
У мобільних пристроях теж використовуються іконки сайтів. З тих же причин, які були озвучені вище, такі іконки краще теж намалювати, інакше замість індивідуального обличчя сайту в айфоне або Айпад буде красуватися скріншот сайту, а це не дуже красиво. Другий мінус відсутності значка для мобільних пристроїв - це заповнення логів сайту помилками приблизно такого вигляду:
File does not exist. /www/apple-touch-icon-precomposed.png
File does not exist. /www/apple-touch-icon.png
Це відбувається тому, що мобільні девайси з операційною системою iOS при заході на сайт в першу чергу шукають такі іконки. І з кожним таким відвідувачем ми маємо з логах новий рядок із зазначенням помилки на неіснуючу картинку. Додаткове навантаження на сервер, нехай навіть невелика, річ не корисно, тому краще від неї позбутися.
Як ви бачите в прикладі, мова йде про двох файлах: apple-touch-icon.png і apple-touch-icon-precomposed.png. Перша має на увазі, що до картинки будуть застосовані стандартні ефекти іконок Apple - обрізка кутів, тінь і відблиски. Якщо ви не хочете, щоб до вашої зображенні застосовувалися такі ефекти, створіть картинку з назвою apple-touch-icon-precomposed.png.
Значок apple-touch-icon повинен мати формат png, а ось з розміром складніше, ніж з фавіконки. Справа в тому, що "яблучна" продукція з різним дозволом використовує значки різних розмірів:
- iPhone: 60 x 60 px;
- iPad: 76 x 76 px;
- IPhone Retina: 120 x 120 px;
- iPad Retina: 152 x 152 px.
Найкраще зробити іконки всіх можливих розмірів. Додайте до них ще одну, розміром 196х196 - для пристроїв з операційною системою Android.
Для створення набору значків "оптом" зручно користуватися послугами онлайн-сервісів, які згенерують вам іконки всіх потрібних розмірів, які ви побажаєте.
Завантажте отримані значки в кореневу директорію сайту і пропишіть шляху в
І тепер ваш сайт буде мати своє "яблучне" особа, а логи помилок сервера стануть набагато менше.