Що потрібно знати перед тим, як додати фавікон на сайт
В даний час без фавікона не обходиться жоден сайт. Стандартні іконки закладені при створенні майданчика. Тільки вони не завжди влаштовують користувача. Проблема в тому, що не кожен власник ресурсу знає, як додати фавікон. Дія це не таке складне. Зате результат дозволить пізнати сайт серед кількох інших у видачі. Адже ключові слова можуть бути схожими, а фавікон не підведе. Саме його додавання найчастіше пояснює рішення відвідувача зайти на ресурс.
Фавікон для сайту
Перед тим як помістити фавікон на сайт, його потрібно створити. Для цього можна вибрати один із запропонованих варіантів:
- Замовити макет у дизайнера.
- Створити самостійно на онлайн-сервісах в Інтернеті.
- Створити самому в фотошопі.
Стандартне зображення зберігається з розширенням ICO. Розмір його бажано вибрати 16х16 пікселів. Бувають розміри і більше. Вони потрібні при збереженні користувачем сторінки на робочому столі.
Далі розміщуємо картинку в корені сайту. Для цього вписуємо рядок https://site.ru/favicon.ico, де замість:
- site.ru прописуємо назву власного ресурсу;
- favicon.ico вписуємо назву файлу з фавікона.
Для правильного відображення в пошуковій системі необхідно вписати зображення в код. Для завантаження варто скористатися тегом
. У нього вставляється рядок . Є ще один варіант - .
Після цього розроблений логотип буде встановлений. Побачити його можна як на сайті, так і в запросной видачі. Варто іконка перед адресою ресурсу.
Фавікон і браузери
Перед тим як додати фавікон, варто визначитися з його розширенням. Воно може бути:
- ICO.
- SVG.
- PNG.
- APNG.
- GIF.
- JPEG.
Але різними браузерами підтримуються різні розширення. Який браузер лояльний до якого формату фавікона, покаже таблиця нижче.
Тип браузера | ICO | SVG | PNG | APNG | GIF | GIF анімований | JPEG |
Internet Explorer | 2 | 3 | 1 | 1 | 1 | 1 | 1 |
Google Chrome | 3 | 3 | 2 | 1 | 2 | 1 | 2 |
Firefox | 2 | 1 | 2 | 2 | 2 | 3 | 3 |
Opera | 2 | 2 | 2 | 2 | 2 | 2 | 2 |
Safari | 3 | 1 | 2 | 1 | 2 | 1 | 2 |
1 - не підтримує;
2 - може не підтримувати деякі версії;
3 - підтримує всі версії.
Тому багато хто все ж вважають за краще стандартний формат. Додавши такий фавікон, можна буде не хвилюватися про тип браузера клієнта. Якщо не враховувати вікові, професійні та інші переваги аудиторії перед тим, як додати фавікон, можна залишитися без логотипу.
Якщо хочеться додати кілька фавікона
Іноді є бажання або необхідність додати невелику зображення для кожної сторінки або ж зробити різні формати для перегляду на різних браузерах. В такому випадку до питання, як додати фавікон стандартно, потрібно додати ще пару штрихів.
Вписання вставки фавікона в корінь сайту дуже просте. Але цього недостатньо для створення декількох розширень. Для цього потрібно в HTML-код вставити , попередньо обрамити рядок
.Створюючи таку конструкцію, слід пам`ятати, що для Internet Explorer слова icon недостатньо. Необхідно перед ним вписати shortcut. В такому випадку стандартний браузер буде реагувати на словосполучення, а решта - тільки на останнє слово.
На форумах існує багато питань, як додати фавікон в "Яндекс". Якщо зображення додано в корінь сайту, то реєстрація не потрібна. Роботи знайдуть його за замовчуванням.
Додав і втратив
Буває, що всі дії зроблені вірно, а при перевірці в пошукових системах картинки немає. Адже головне не те, скільки додати, а як додати фавікон. В "Яндекс. директ" при правильному додаванні модерація зображення займе від 2 до 4 тижнів. У цей час сайт буде відображатися без фавікона. Варто також згадати, що при низькому положенні сайту у видачі іконка може не відбиватися зовсім.
Якщо час минув, а значка немає, можливо, розширення не відповідає браузеру. Перевірити наявність фавікона можна:
- для "Яндекс" - Http://favicon.yandex.net/favicon/адрес_сайта;
- для "Гугл" - Http://google.com/s2/favicons?domain=адес_сайта.
Після впізнання системою фавікон стане невід`ємною частиною сайту і іміджу компанії. Тому поставитися до його додаванню варто відповідально. Правильно обрана і грамотно додана іконка стане дороговказом для клієнтів. А це означає збільшення конверсії і, відповідно, більший прибуток.
