Фавікон для сайту: що це і як його зробити

22:20, 23.12.2024

Favicon (скорочення від англійської Favorites icon, або «знак для обраного») – це значок сайту, який відображається на вкладці браузера та в пошуковій видачі. Простими словами фавікон – це невеликий значок веб-сайту, який допомагає користувачу орієнтуватися в інтерфейсі і швидко шукати потрібні веб-сайти. Фавікон давно став одним із елементів айдентики бренду разом зі шрифтами, кольорами та логотипом.

Щоб зробити хороший фавікон для сайту:

  1. Виберіть зображення зменшеного логотипу або його елемента.
  2. За потреби приберіть із зображення зайві дрібні деталі.
  3. Перевірте кольорову гаму картинки, щоб вона збігалася із візуальним стилем бренду.
  4. Кадруйте картинку до квадратної форми.
  5. Зверніться до одного з генераторів і отримайте готовий набір у різних розмірах.

Де відображається фавікон

Фавікон можна побачити і в пошуковій видачі, і в браузерах. Ось де він відображається:

  • На відкритих вкладках будь-якого браузера.
  • В закладках браузера, поруч із коротким описом сайту.
  • Як ярлик на смартфоні.
  • У розділі "Історії" у браузері.
  • У мобільній видачі пошукової системи Google. У десктопній версії він не відображаються, незважаючи на те, що з 2020 року Google тестує цю функцію.

фавикон для сайту

Навіщо потрібен favicon

Немає достовірної інформації про те, що фавікон впливає на ранжування сайтів, тому його наявність не є обов'язковою вимогою. Але побічно, через поведінкові чинники, може позитивно позначатися просуванні ресурсу.

Проста логіка: якщо сайт легко знайти у видачі, в історії, у відкритих вкладках, – більша ймовірність, що користувач повертатиметься на сайт і це відстежать пошукові системи.

Є, як мінімум, 4 плюси використання фавіконів:

  1. Сайт стає помітнішим та індивідуальним у пошуковій видачі. Це може збільшувати його клікабельність.
  2. Сайт краще запам'ятовується. Як і будь-які інші елементи айдентики сайту, працює на його запам'ятовування, особливо якщо підібрано грамотно.
  3. Ресурс легше знайти в закладках, у вибраному, в історії, у вкладках браузера.
  4. Сайт викликає довіру. Це частина враження, яке майданчик справляє на користувача. Його наявність говорить про те, що розробники думали про зручність користувачів.

Розмір фавікона: які зображення підбирати

При створенні враховують розміри картинки (на маленьких екранах це може бути всього 16х16 пікселів), читання з урахуванням мінімального розміру та візуальний стиль бренду.

Щоб фавікон виглядав сучасно, релевантно сайту та легко для сприйняття, картинку важливо підібрати.
Як варіант, можна підбирати картинку на тему сайту: наприклад, собаку при продажу зоотоварів або зелений паросток як фавікон для сайту садово-городньої тематики.

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

Градієнт, пастельні тони притягують погляд менш активно, ніж яскрава картинка у контрастних кольорах. Яскравий фавікон дає більше шансів на клік у пошуковій видачі; його легко знайти і серед відкритих вкладок браузера. Фавікони відображаються дуже мініатюрно, і картинка з великою кількістю дрібних деталей, з кольоровим хаосом або тим більше з текстом не буде сприйматися користувачами. Мінімум деталей, 2-3 кольори допоможуть зробити його зрозумілим та помітним.

Фавікон має бути унікальним – повторювані зображення можуть призвести до плутанини і точно не принесуть користі сайту. Без анімації – її не підтримують пошукові системи. Підходять лише квадратні зображення. Сервіси-генератори не ухвалять інших варіантів. А якщо робити самостійно, прямокутні зображення або доведеться обрізати, або пропорції картинки порушаться.

Вимоги Google

Незважаючи на те, що в десктопній версії пошукової видачі фавікони не відображаються, у всіх інших локаціях їх буде видно. Вимоги Google такі:

  • Можливі розміри: будь-які кратні 48 пікселів. 48х48, 96х96, 144х144 пікселів. Завантажувати картинку розміром 16х16 пікселів можна, але робити це Google не рекомендує.
  • Можливі формати зображення: SVG, ICO, GIF (без анімації), JPEG, PNG.

Google рекомендує вибирати іконки, що збігаються з іншими варіантами графічного представлення бренду. Більше інформації у довідці Google.

Як зробити фавікон для сайту самостійно

У мережі чимало генераторів. Вони допомагають швидко отримати не один фавікон, а картинки у різних форматах та розмірах для використання у різних пошукових системах та браузерах. При встановленні на сайт у кореневому каталозі створюють файл favicon.ico – своєрідний контейнер для кількох картинок різних розмірів. Такий набір забезпечить оптимальний вигляд на різних платформах. Перевірити, як пошукові роботи бачать фавікон сайту, можна за допомогою URL та спеціальної команди. Щоб перевірити видимість У Google використовуйте адресу: https://www.google.com/s2/favicons?domain=ім'я_домену.

Джерело: SmartPhone.ua


Обговорення новини

Коментариев пока никто не оставил. Станьте первым!
:)8-):cry:=-):-D:angry::-[:(:devil:,)
укажите цифры с картинки
 

Попередні новини


купить телефон в Одесі, Україна