Формат фавікона
Фавікон — це маленька іконка, яка з'явилася у браузерах понад два десятки років тому. Вона стала важливим елементом веб-дизайну, надаючи користувачам можливість легко ідентифікувати вкладки та закладки. Веб-майстри та дизайнери все частіше звертають увагу на створення унікального фавікона, який відображав би індивідуальність сайту.
Формат фавікон може варіюватися, але найпоширеніший - це ICO. Однак сучасні браузери підтримують інші формати, такі як PNG, SVG і GIF. Кожен із цих форматів має свої переваги та недоліки, що робить вибір фавікона важливим етапом у розробці сайту.
Правильне визначення розміру та дозволу фавікона також відіграє ключову роль у його сприйнятті користувачами. Класичний розмір фавікона - 16x16 пікселів, але з появою мобільних пристроїв та високих дисплеїв потрібно створювати іконки більшої роздільної здатності. У цій статті ми розглянемо основні формати, поради щодо створення та оптимізації фавіків для різних платформ.
Формат фавікон: все, що потрібно знати для оптимізації вашого сайту
Фавікон – це маленький значок, який представляє ваш сайт у закладках браузерів, на вкладках та інших місцях, де відображається ваша сторінка. Багато користувачів не усвідомлюють, наскільки важливим є цей елемент у формуванні першого враження про ваш ресурс. У цій статті ми докладно розберемо, що таке фавікон, які формати існують, як його оптимально використовувати і як це впливає на SEO.
Зі збільшенням кількості веб-сайтів та інтернет-сервісів, унікальний фавікон стає важливим елементом у маркетинговій стратегії.Він не тільки допомагає ідентифікувати ваш сайт серед інших, але й сприяє підвищенню його видимості у пошукових системах.
Що таке фавікон?
Фавікон (від англійської "favorite icon") – це іконка, пов'язана з веб-сайтом, яка відображається на вкладках браузерів, закладках та історії. Це допомагає користувачам швидко ідентифікувати та знаходити ваш сайт серед безлічі відкритих вкладок або закладок. Хоча фавікон має розмір 16x16 пікселів, його можна створювати і в інших розмірах для різних пристроїв.
Формати фавіконів
Найбільш поширені формати файлу для фавіконів включають:
- ICO: Традиційний формат для фавіконів, який підтримує декілька розмірів та глибин кольору. Через свою універсальність і сумісність із закінченням .ico, цей формат віддають перевагу багатьом веб-розробникам.
- PNG: Дозволяє створювати фавікони з прозорим фоном та високою якістю зображення. PNG не підтримує анімацію, але ідеально підходить для статичних зображень.
- SVG: Векторний формат масштабується без втрати якості. SVG може бути корисним у випадку, якщо вам потрібно забезпечити високу якість відображення на різних пристроях.
- GIF: Незважаючи на те, що GIF найчастіше використовується для анімації, його також можна використовувати як фавікон. Проте варто зазначити, що не всі браузери підтримують анімацію у фавіконах.
Кожен із цих форматів має свої переваги та недоліки, тому вибір буде залежати від ваших конкретних потреб та вимог.
Як створити фавікон?
Створення фавікона не становить особливої складності. Вам знадобляться наступні кроки:
- Дизайн: Використовуйте графічні редактори, такі як Adobe Illustrator, Photoshop або безкоштовні онлайн-платформи як Canva, щоб створити свій фавікон. Не забувайте про простоту та впізнаваність.
- Вибір формату: Визначте формат зображення (ICO, PNG, SVG тощо) залежно від пристрою та призначення.
- Конвертація: Якщо ви створили зображення не у форматі ICO, скористайтесь онлайн-конвертерами для зміни формату файлу.
- Інтеграція: Завантажте фавікон на сервер і додайте відповідний код HTML-розмітку вашого сайту.
Приклад коду для інтеграції фавікона у ваш HTML-код:
Оптимізація фавікона для SEO
Фавікон може вплинути на SEO вашого сайту, хоча і побічно. Ось кілька порад щодо його оптимізації:
- Унікальність: Створіть унікальний і незабутній фавікон, який представлятиме ваш бренд. Це підвищить запам'ятовування та підвищить клікабельність, коли ваш сайт з'являється у пошукових системах.
- Розташування: Обов'язково розміщуйте фавікон у кореневому каталозі вашого сайту, щоб гарантувати його доступність для веб-краулерів.
- Мобільна оптимізація: Перевірте, чи фавікон добре відображається на мобільних пристроях. Використовуйте сучасні формати, такі як SVG або PNG для забезпечення якісного відображення.
Ключові розміри фавіконів
Різні браузери та пристрої можуть вимагати різних розмірів для фавіконів. Рекомендується створювати фавікони у таких розмірах:
| Розмір (пікселі) | Опис |
|---|---|
| 16x16 | Стандартний розмір більшості браузерів на десктопах. |
| 32x32 | Використовується в деяких мобільних та десктопних браузерах. |
| 48x48 | Розмір для великих екранів, наприклад, при додаванні до панелі завдань. |
| 96x96 | Рекомендований розмір для Android та додаткових значків на ПК. |
| 192x192 | Рекомендований для Android, коли додається на домашній екран. |
| 512x512 | Використовується Google Chrome для PWA (прогресивні веб-програми). |
Приклади використання фавіконів на різних платформах
Фавікони використовуються на багатьох платформах. Ось кілька прикладів:
- Браузери: Вкладки браузерів, де відображається ваш сайт на тлі інших.
- Закладки: Фавікони відіграють ключову роль у наданні візуального уявлення про ваші збережені сторінки.
- Мобільні пристрої: Фавікони, додані на домашній екран, стають іконками для швидкого доступу до сайту.
Чому важливий фавікон?
Фавікон — це візуальний елемент, а й маркетинговий інструмент. Правильно оформлений фавікон допоможе зміцнити ваш бренд, створити довірчі стосунки з користувачами та покращити загальний досвід навігації на вашому сайті.
Фавікони також можуть допомогти в залученні більшої кількості користувачів, оскільки вони роблять ваш сайт професійнішим та сучаснішим.
Висновок
Фавікон є важливим аспектом веб-дизайну та SEO. При його створенні та оптимізації враховуйте всі ці фактори. Переконайтеся, що ваш фавікон є унікальним, відповідає вашому бренду та оптимізований для всіх пристроїв. Якщо ви будете дотримуватись цих рекомендацій, це допоможе не тільки виділити ваш сайт серед інших, але й підвищить його відвідуваність та довіру користувачів.
Пам'ятайте, що у світі цифрових технологій успішний інтернет-ресурс починається з дрібниць, а фавікон – одна з таких невеликих, але значних деталей.
Ця стаття охоплює всі основні аспекти формування, використання, оптимізації та значущості фавіконів для веб-сайтів, що може допомогти у покращенні SEO.
Фавікон – це обличчя вашого сайту у морі інтернет-ресурсів.
Невідомий автор
| Параметр | Опис | Приклад значення |
|---|---|---|
| Формат | Тип зображення для фавікона | PNG, ICO, SVG |
| Розмір | Рекомендований розмір зображення | 16x16, 32x32, 48x48 |
| Код у HTML | Спосіб підключення фавікона на сторінці | |
| Кешування | Спосіб збереження фавікона в кеші браузера | Мета-тег або заголовок |
| Підтримка браузерів | Сумісність із різними браузерами | Chrome, Firefox, Safari |
| Використання | Де використовується фавікон | Вкладки браузера, закладки |
Основні проблеми на тему "Формат фавікона"
1. Несумісність форматів Однією з основних проблем із форматом фавікон є несумісність різних форматів зображень. Деякі браузери підтримують лише певні формати, що може призвести до викривлення фавікона на певних пристроях або браузерах. 2. Розміри та роздільна здатність Ще однією проблемою є правильне припасування розмірів і дозволу фавікона під різні пристрої та екрани. Некоректні розміри або роздільна здатність можуть призвести до пікселізації або спотворення зображення, що знизить загальне візуальне враження сайту. 3. Кешування та оновлення Проблемою є кешування фавікона на пристроях користувачів. Зміна фавікона на сайті може не відобразитись у всіх користувачів відразу через кешування старого зображення. Необхідно підходити до процесу оновлення фавікона уважно, щоб усі користувачі бачили актуальне зображення.
Який формат повинен мати фавікон?
Фавікон має бути у форматі .ico для кращої сумісності з різними браузерами.Чи можна використовувати інші формати для фавікон?
Так, крім .ico, фавікон також можна використовувати у форматах .png, .jpg або .gif, проте .ico є найбільш поширеним та підтримуваним форматом.
Які розміри рекомендується використовувати для фавікон?
Рекомендовані розміри для фавікона - 16x16 або 32x32 пікселів для забезпечення оптимального відображення на різних пристроях.
Наводимо приклади за типами сайтів, що продають, яким вимогам вони повинні відповідати і які проблеми відвідувачів повинні вирішувати.
Favicon сьогодні: формати, підтримка, автоматизація
На сьогоднішній день favicon – це не просто значок 16x16 у вкладці браузера. Він є важливою складовою інтерфейсу, а також відіграє важливу роль у прогресивних веб-додатках. Існує чимало способів підключення та використання favicon, про які я розповім у цій статті.
У якому форматі має бути фавікон?
Раніше основним форматом фавікон був формат ICO. Його головна особливість полягала в тому, що файл такого формату міг зберігати кілька варіантів розмірів іконки. Наразі формат ICO вважається застарілим, на зміну йому прийшов формат PNG із новими можливостями щодо взаємодії з іконкою.
Крім PNG підтримується формат SVG. Але в нього, на жаль, низька підтримка зараз. Однак цей формат ідеально підходить для фавіконів, його використання набагато спростило б нам життя. Сподіватимемося, що ситуація скоро зміниться.
Фавікон може бути створений ще в декількох форматах, наприклад, у форматі GIF або JPEG, але проблеми з підтримкою роблять їх використання недоцільним.
HTML5 та атрибут sizes
Атрибут sizes прийшов у наше життя з HTML5. Завдяки йому браузер або пристрій може вибрати потрібний розмір фавікон. Атрибут sizes вказується у форматі [ширина х висота] без зазначення одиниць. Якщо у файлі зберігається кілька іконок, можна задавати їх розміри через пробіл.Ключове слово any вказує на те, що іконка може масштабуватися до будь-якого розміру, наприклад, якщо вона зберігається у векторному форматі SVG.
Чи наставляти ICO на звалище?
Як я вже сказала, формат ICO сьогодні вже можна вважати застарілим, але чи означає це, що його потрібно терміново позбутися? Відповідь, як завжди, неоднозначна. Є випадки, коли формат ICO ще може послужити вам хорошу службу. Наведу кілька прикладів виправданого використання фавікона у форматі ICO у різних операційних системах та поговоримо про альтернативи.
Windows
Почнемо, мабуть, із Windows.
До 11 версії формат PNG в IE не підтримувався, тому для IE10 і молодших версій, як і раніше, необхідно використовувати формат ICO. А ось із IE11 сміливо можна переходити на PNG. Для застарілих браузерів Microsoft рекомендує розміри 16х16, 32х32 та 48х48 для фавіконів формату ICO.
Починаючи з IE9, сайти отримали можливість бути закріпленими у меню та панелі завдань, а з приходом IE11 та Windows 8.1 з'явилася можливість створювати закріплені сайти у вигляді живих плиток. За замовчуванням зображення на плитці буде фавікон, але тільки не для великих і широких плиток, для яких потрібно задавати зображення спеціального розміру. Це можна зробити такими способами: додавши теги метаданих у розмітку веб-сторінки або файл конфігурації браузера.
Спочатку розглянемо перший спосіб.
Визначення фавікона у пристроях Windows за допомогою метаданих у :
Якщо ми хочемо вказати іконки для великих плиток, це можна зробити за допомогою наступних метаданих:
Можна вказати колір фону плитки:
Можна вказати ім'я закріпленого сайту:
Якщо немає цих метаданих, то як ім'я використовується значення в ; сторінки.
Можна вказати текст додаткової підказки, що з'являється при наведенні вказівника миші на ярлик закріпленого сайту в меню "Пуск" Windows або на робочому столі:
Можна навіть визначити адресу документа:
І тоді незалежно від того, яку сторінку користувач перетягнув на панель завдань, закріплений сайт відкриватиме вказану адресу.
Є ще багато інших метаданих, які, наприклад, визначають кольори навігаційних кнопок у браузері або роблять плитки динамічними.
Починаючи з IE11 Windows 8.1 та Edge Windows 10, можна закріпити веб-сайт за допомогою файлу конфігурації браузера. Це зручно: створити один файл browserconfig.xml і підтримувати, і підключати його на кожній сторінці, якщо у нас є кілька сторінок, які будуть використовувати ті самі плитки.
square70x70logo, square150x150logo, wide310x150logo, square310x310logo - Елементи, всередині яких оголошуються зображення для різних розмірів плитки.
Microsoft рекомендує брати більший розмір зображень для підтримки екранів з високою щільністю пікселів. Бажано, щоб розмір вихідного зображення приблизно в 1,8 рази перевищував розмір цільової плитки, щоб його можна було збільшувати і зменшувати. Наприклад, для 70х70 розмір 128х128, що рекомендується, а для широкої плитки 310x150 вихідне зображення має розмір 558x270.
Якщо плитка сайту статична, то перерахованих вище елементів буде достатньо. Якщо ж передбачається динамічна плитка, необхідно додати елемент . Цей елемент може включати до 5 елементів , що містять в атрибуті src шляху до відповідних xml-файлів повідомлень.Також всередині цього тега міститься елемент , значення якого вказує в хвилинах інтервал між зверненнями до сайту за оновленням повідомлень, тобто жива плитка оновлюватиметься кожні, наприклад, 30 хвилин. Так, значення не довільне, а лише 30, 60, 360, 720 чи 1440.
Нарешті, є всередині тега ще елемент , відповідальний спосіб повторення повідомлень (може приймати значення від 0 до 7). Шаблони доступні лише для середніх, широких та великих плиток.
Новий інтерфейс Metro пропонує кілька нових принципів дизайну, наприклад, «білі силуети», які використовуються більшістю встановлених програм.
За допомогою платформи повідомлень Windows сайт може за один раз показувати на плитці до п'яти текстових повідомлень або повідомлень із зображеннями, які циклічно змінюють один одного. Не будемо докладно зупинятися на цих XML-файлах повідомлень. Існує безліч шаблонів живих плиток, один з них:
Те, що написано в лапках в атрибуті template - Назва шаблону. Цей шаблон містить зображення та невеликий текст. Використовується для великих зображень та середніх назв. Насправді, подібних шаблонів дуже багато: і просто з текстом, і з зображенням, і з кількома зображеннями, і з кількома рядками тексту, тощо. Більшість шаблонів зображення або тексту розміщують текст на тій самій плитці, що й зображення. Але шаблони з Peek у назві виконують перемикання між зображенням та текстом на плитці.
Докладніше про шаблони можна дізнатися на офіційному сайті.
Mac OS
У Mac OS особливо не розгуляєшся, на жаль. Якщо зберегти сайт на робочий стіл у Mac OS, значок буде відображатися як скріншот сторінки з html кодом. Просто так сайт додатком у Mac OS не зробити, але й не будемо.
Safari - ось де нам знадобиться формат SVG. Для використання SVG необхідно вказати атрибут rel зі значенням mask-icon всі елементи SVG повинні бути чорного кольору. Але не варто лякатися, колір можна змінити атрибутом color. Ця іконка SVG потрібна для закріплення вкладки в Safari. А колір при наведенні буде таким, яким ми вказали в атрибуті color.
Якщо не вказувати цю іконку, то браузер відображатиме першу букву домену нашого сайту.
Згадала ще один випадок, де нам ще може стати в нагоді формат ICO. Пошуковик Яндекс вставляє фавікон у пошуковій видачі поруч із заголовком сайту. Що, безумовно, збільшить привабливість сніпету і, як наслідок, клікабельність. Яндекс рекомендує використовувати для цього формат ICO.
iOS
Safari в iOS взагалі не відображає favicon у вкладках, але використовує їх для закладок, як і в Mac OS. У iOS користувачі можуть додати сайт на робочий стіл, і він буде виглядати як нативний додаток. Ці посилання відображаються у вигляді піктограм і називаються Web Clips.
Для цього потрібно додати rel="apple-touch-icon" та вказати розмір за допомогою атрибуту sizes. Кожен пристрій потребує свого розміру іконки. Так як iOS пристроїв досить багато, і кожен пристрій має дозвіл екрана, специфікація, розроблена Apple, підтримує можливість вказати кілька тегів з іконками різних розмірів.
Якщо значок не відповідає розміру пристрою, що рекомендується, використовується найближча за розміром іконка бобільшого розміру, ніж рекомендований. Коли користувач заходить на ваш сайт з iOS пристрою, запитуються файл apple-touch-icon-precomposed.png, який має бути оформлений у стилі iOS: закруглені кути, відблиски та тінь. Якщо файл з такою назвою в корені проекту або rel=«apple-touch-icon-precomposed» ні, буде запитано apple-touch-icon.png, якому дозволено бути таким, яким він є, а всі ефекти будуть накладені самим iOS. Відповідно, потрібна іконка під кожний розмір. А от якщо немає і цих файлів, то на робочому столі iPhone або iPad відображатиметься не гарна іконка, а мініатюра сторінки її скріншот.
Ходять чутки що Blackberry буде також використовувати rel=«apple-touch-icon-precomposed»Але можливості перевірити, на жаль, не було.
Докладніше про актуальні розміри для пристроїв iOS можна на офіційному сайті.
Деякі можуть заперечити, що всі 9 зображень не дуже потрібні. Однак принаймні основна Apple Touch Icon повинна бути 180х180. Інші пристрої можуть зменшити зображення. Але деякі інші платформи також використовують Apple Touch Icon, тому краще їх оголосити.
Як дивно це не звучало, пристрої під iOS не єдині, які шукають Apple Touch Icon. Оскільки вони популярніші і зустрічаються частіше за інші PNG іконок високих дозволів, деякі браузери, на кшталт Android Chrome, використовують їх. Таким чином, краще їх оголошувати, це дозволить відвідувачу із сумісним пристроєм або браузером використовувати одну з цих іконок.
В iOS можна вказати заголовок веб-програми. За промовчанням використовується значення тега. Щоб встановити інший заголовок, додайте метатег на веб-сторінку:
До речі, можна навіть встановити стиль рядка стану для веб-програми:
Можна змінити її колір, можна зробити напівпрозорою. Це також вплине на вигляд нашого сайту.
Android
Пристрої на Android чудово розуміють формат PNG, а також підтримують маніфест веб-додатку manifest.json, в якому можна прописати всі параметри того, як поводитиметься сайт, якщо його встановити на домашній екран.Цей маніфест поки що, на жаль, не читають пристрої під IOS. А якщо Android не знайде цей файл, він використовуватиме apple-icon-touch.
Файл маніфесту може містити в собі ряд космічних параметрів, але тут лише ті, які нам необхідні для відображення сайту на домашньому екрані:
< "name": "Rick and Morty", "short_name": "Rick", "icons": [ < "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" >, < "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" >], "theme_color": "#b3adad", "background_color": "#b3adad", "display": "standalone" >
Ключ name визначає підпис у додатку домашньому столі. Якщо цей параметр не вказано, підпис буде взято з в ;
Ключ short_name визначає вкорочений підпис додатку, якщо не вистачає місця для повного імені;
Ключ icons - Визначає масив об'єктів іконок, може приймати три значення: sizes, src, type;
Ключ theme_color визначає колір рядка стану. Починаючи з 39 версії хрому для Android Lollipop з'явилася можливість змінювати колір інтерфейсу браузера та колір вкладки браузера.
Задати колір можна і через додавши наступний мета-тег:
Ключ background_color визначає колір фону для веб-програми на домашньому столі. Цей параметр відповідає за те, який колір матиме фон програми, що він відкривається, тобто. маніфест завантажився, але ще завантажилися стилі;
Ключ display визначає режим відображення веб-програми. Наприклад, значення standalone, яке ми вказали, дозволило відкривати нам сайт як додаток.
У маніфесті є ще багато інших приголомшливих параметрів, які зроблять з веб-сайту цей додаток, але вони вже не належать до нашої теми.
Автоматизація
Насамкінець треба сказати, що все, що ми розглянули в рамках цієї статті, не обов'язково писати руками, не забувайте про автоматизацію. Існують сайти, на яких можна швидко згенерувати всі необхідні нам розміри та формати favicon: realfavicongenerator.net, а при необхідності можна заодно згенерувати код.
Є пакети для збирання і для Gulp, і для Grunt.
Головне пам'ятати, що сьогодні favicon це більше, ніж іконка в адресному рядку і закладці браузера.
Створюємо унікальний Favicon та встановлюємо на сайт
Фавікон (favicon або фавіконка) - це невелике зображення поряд з назвою сторінки в пошуковій видачі Яндекса, а також у вкладці сайту.
Так це виглядає у пошуку Яндекса:
А так у вкладках браузера:
Навіщо потрібний фавікон?
Пошуковикам начхати, є у сайту значок чи ні. На підвищення чи зниження у видачі це не впливає. Але фавікон – символ вашого ресурсу. Він більше потрібний користувачам. Яскрава картинка привертає увагу, допомагає запам'ятати сайт та відрізнити його від інших.
До речі, Яндекс.Вебмайстер попереджає про помилку, якщо сайт не має фавіконки. Також помилка може відобразитись у лог-файлах. Браузери запитують favicon.ico, якщо знаходять потрібний файл, сервер фіксує помилку 404.
Лог-файл — журнал із системною інформацією про роботу сервера та дії користувачів.
Як швидко створити фавікон для сайту
Іконку рекомендується робити в тій же кольоровій гамі, що і сам сайт. Тоді сторінки виглядатимуть гармонійніше. Не забувайте, що іконка має відображати суть вашого ресурсу.
Не малюйте багато деталей. Значок дуже маленький (32х32 пікселя), тому дрібні нюанси будуть зовсім не видно читачам.
Ось вдалі приклади фавіконок. Всі вони є контрастними, використовують логотип або умовний символ, яким позначають тематику ресурсу.
Самостійно створити міні-логотип
Відкриваємо будь-який графічний редактор, наприклад Photoshop і творимо. Якщо на значку буде текст, розмір шрифту слід встановити на 8-10 пікселів. Фотошоп має спеціальний плагін для створення значків — «Favicon.ico».
Корисно! Якщо вам не вдається зберегти файл у форматі .ico. То можна зберегти його в PNG або JPEG і після цього знайти будь-який онлайн-конвертер зображень. У пошуку пишемо «конвертер із PNG в ICO».
Створити значок за допомогою онлайн-сервісу
Заходимо в пошукову систему і пишемо запит «створити Favicon онлайн», вибираємо будь-який з численних сервісів. Нижче представлені одні з найпопулярніших.
Малюємо фавінкон: Favicon.by
Відразу після переходу на цей онлайн-ресурс потрапляємо на сторінку, де вже є заготівля майбутньої іконки в потрібному розмірі.
Ліворуч є палітра кольорів, різні кисті та інші корисності. Малюємо нехитрі символи, які відображають суть нашого проекту, і дивимося трохи нижче, як іконка виглядатиме у вкладці.
Добиваємося відмінного результату та натискаємо «Завантажити». Файл збережеться у потрібному форматі з правильною назвою.
Створення фавікону через завантаження зображення: Realfavicongenerator.net
Ключова відмінність даного сервісу: ви можете створити свою фавіконку, завантаживши картинку, що сподобалася, або ваш логотип.
Беремо готове зображення 260×260 пікселів. Вибираємо потрібний ступінь стиснення та налаштування для iOS, Android та MacOS Safari. В результаті у вас будуть усі типи іконок та код для вставки.
Завантажити готовий файл фавікон
Цей варіант підійде тим, хто не має часу. В цьому випадку йдемо на Яндекс.Малюнки або будь-який інший ресурс з пошуку зображень і пишемо «готовий фавікон».
Тиснемо «Пошук» і вибираємо з тисяч запропонованих варіантів. Щоправда, такий метод краще використовувати лише як тимчасовий.
Якщо інший вебмайстер завантажить таку саму картинку, як і ви, це буде плутати читачів.Краще витратити трохи часу та створити унікальну фавіконку.
Також можна скачати значок на спеціалізованих стоках, наприклад:
Який формат використати?
Бажані формати Favicon: ico, png, svg
ICO
Застарілий формат. Натомість підтримується більшістю браузерів.
Він включає значки різних розмірів. Тому браузери можуть підтягнути іконку нижчої роздільної здатності.
PNG
Підтримується всіма браузерами та платформами.
SVG
Застосовується у Safari MacOS. Файли мало важать, а відображаються добре. Дружно чекаємо, коли всі браузери почнуть підтримувати цей формат.
Допустимі формати: jpeg та gif
Не всі браузери підтримують відображення таких піктограм.
Якщо ваша фавіконка має нестандартні формати png або ico, краще перевірити її через сервіс caniuse.com. Так ви зрозумієте, чи браузери підтримують потрібний вам формат.
Просунута інформація за розмірами фавіконів, яка стане в нагоді не всім
Деякі роблять фавікон у кількох розмірах, щоб він адекватно відображався у десктопних та мобільних браузерах.
Чи не хочете так морочитися? Тоді робіть фавікон 32х32 пікселя. І переходьте до наступного розділу.
Ось зведена таблиця за рекомендованими розмірами. Джерело: ux.pub
Для смартфонів
Для Андроїда та Епла розмір іконки залежить від типу та щільності екрана. Раптом вам це знадобиться в роботі.
Як поставити Favicon самостійно
Стандартно пошукова система Яндекс та інші сервіси шукатимуть вашу фавіконку в корені сайту за адресою site.ru/favicon.ico. Тому наше завдання закачати туди наш значок або вказати інший шлях його розміщення.
Через тему сайту WordPress
Починаючи з версії WordPress 4.3 можна додати фавікон з адмінки WordPress.
Дотримуйтесь такої послідовності:
- Відкрийте адмінку
- Зовнішній вигляд > Налаштувати > Властивості сайту
- Піктограма сайту > Редагувати зображення
- Завантажте фавікон
- Натисніть кнопку Опублікувати.
Як додати фавікон на сайт WordPress вручну
Радимо спочатку протестувати все на локальному веб-сайті розробки.
- Заходимо до файлів теми FTP-клієнт або файловий менеджер.
- Знаходимо папку /wp-content/themes/your-theme.
- Завантажуємо іконку в підпапку, наприклад Assets.
- Запам'ятовуємо шлях до файлу.
У файті function.php і прописуємо шлях до фавікон.
function add_favicon() <
echo ‘’;
>
add_action('wp_head', 'add_favicon');
Рядок після href=«.get_template_directory_uri() повинен вказувати шлях до вашого значка. Переконайтеся, що ви вказали правильне ім'я файлу.
function add_favicon() <
echo ‘’;
>
add_action('wp_head', 'add_favicon');
Як вставити фавікон через кореневий каталог, якщо сайт не використовує CMS
Для встановлення фавікона більш складним шляхом заходимо в кореневий каталог нашого сайту. Наприклад, за допомогою програми FileZilla.
Краще попередньо зберегти цей файл на комп'ютері, якщо ви неправильно зміните вихідний код. Відкриваємо HTML-код і шукаємо рядки, які розміщуються між тегами head.
rel
Якщо ми вказуємо значення «icon», зображення буде відображатися у всіх сучасних браузерах Якщо вказати замість цього «shortcut icon», то значок буде видно тільки в Internet Explorer.
href
Після нього вказується адреса, де іконка розташована, тобто доменне ім'я, коренева папка та назва файлу.Якщо домен написаний кирилицею, то адреса вказується з використанням Punycode — програми для перетворення кирилиць, яка також використовується при створенні мультимовних сайтів.
type
Тут необхідно прописати формат файлу.
Як встановити фавікони для різних пристроїв?
Напишіть посилання на іконки між тегами head. Наприклад:
Для робочого столу (ico)
Декстоп (png)
Apple
Іконки в пристроях Apple закруглюються по кутках. Тому краще використовувати apple-touch-icon-precomposed замість apple-touch-icon.
Safari
Андроїд
Як задати розміри фавіконок?
Можна завантажити іконку в кількох розмірах: 16×16, 32×32 та 48×48. Ось приклад для декстопу:
Як перевірити, чи встановився фавікон?
Просто погуглить ваш ресурс. Або перевірте сайт у сервісі Realfavicongenerator.
А ще можна скористатися таким способом. Тільки замість «mysite.ru» вкажіть назву вашого сайту:
- У Яндексі: http://favicon.yandex.net/favicon/mysite.ru.
- У Гуглі: https://www.google.com/s2/favicons?domain=mysite.ru.
Якщо іконка не відображається, переконайтеся, що:
- посилання на фавікон відкрито для індексації robots.txt і віддає відповідь сервера HTTP 200.
- зображення ico або png знаходиться в корені ресурсу або спеціально прописаний шлях.
- ви зачекали кілька тижнів. Оскільки пошуковим роботам потрібен час, щоб проіндексувати значок сайту.
Підсумуємо
- Фавікон краще робити, ніж робити. Це допоможе людям ідентифікувати ваш сайт.
- Створити фавікон можна у Фотошопі або за допомогою онлайн-сервісів
- Можна створювати іконку відразу в кількох розмірах, щоб вона коректно відображалась на всіх пристроях.
- Найбільш підходящі формати: ico або png.
- Додати фавіконку можна через CMS або через корінь сайту.
А як ви вважаєте, у яких сайтів найвдаліші фавіконки? Діліться у коментарях!
