Що таке фавікон сайту і як його додати на сайт

Favicon — невідʼємна частина будь-якого сайту. WEDEX розповість як створити та встановити фавікон та які особливості роботи із ним.

Що таке favicon?

Favicon або favourite icon (улюблена іконка, картинка) — це невелике зображення розміром 16х16 пікселів, яке використовується у браузерах для ідентифікації сторінки або сайту. Фавікон зазвичай відображається у верхній частині веб-браузера на вкладках, його також можна побачити на панелі закладок, в історії браузера та на пошукових сторінках Google поряд з URL-адресою.

Коротка історія favicon

Перша версія favicon зʼявилася у далекому 1999 році. Тоді компанія Microsoft презентувала іконки веб-ресурсів для свого браузера Internet Explorer 5. Вже тоді favicon мав стандартний розмір 16х16 пікселів у форматі ICO. Для того, щоб використати іконку на своєму сайті, необхідно було додати зображення в кореневий каталог веб-ресерсу, а браузер автоматично відображав його.

З 2005 по 2011 роки відбулося кілька «хвиль» стандартизації іконок, які вносили нові вимоги до цих зображень (детальніше про це нижче). Головною перевагою введення єдиного стандарту до favicon стало коректне відображення іконок у різних браузерах та пристроях. До стандартизації фавікони у деяких браузерах могли відображатися коректно, а у деяких — ні, що сильно впливало на користувацький досвід.

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

Для чого існує favicon?

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

Користувацький досвід відвідувачів сайту

Значок favicon виступає у ролі яскравої візуальної підказки. Це невеличке зображення допоможе набагато швидше відрізнити ваш сайт від будь-якого іншого, швидше знайти серед посилань в історії чи на панелі закладок. Головна задача фавікону — запасти у памʼять користувачу, створити звʼязок між візуальним образом та брендом, спростити пошук веб-ресурсу у мережі.

Брендінг та favicon

Справді цілісний бренд має багато дрібних деталей, які відрізняють його від інших брендів. Якісний фавікон — запорука монолітного дизайну. Іконка веб-ресурсу це той самий випадок, коли доцільна фраза: «Розмір не головне». У дизайнера є всього 256 пікселів, щоб створити працюючу іконку сайту. Фавікон допоможе зробити зовнішній вигляд сайту завершеним.

Довіра користувачів

Favicon це зображення, а отже воно немає ніякого впливу на кібербезпеку. Проте він дає дещо важливіше — відчуття безпеки. Як показує практика, користувачі схильні надавати перевагу сайтам з фавіконом. Це відбувається тому, що це невеличке зображення явно дає зрозуміти, що користувач перебуває на сторінці конкретного бренду.

Повернення користувачів

Favicon є потужним індикатором бренду, який дозволяє краще вирізнятися на тлі інших сайтів. Відображення фавікон, як ми вже зʼясували, не обмежується сторінкою пошуку, а отже і бачити його користувач буде часто. Задача дизайнера або розробника чи власника бізнесу полягає не у тому, щоб зробити якусь яскраву пляму для привернення уваги, а справжній інтернет-маяк, який буде слугувати візуальним індикатором для користувача.

Як створити фавікон?

Існує декілька способів створення favicon:

• замовити значок у дизайнера;
• створити фавікон самостійно;
• створити значок самостійно, але за допомогою онлайн-сервісів;
• використати готові зображення.

Гарною практикою серед UI/UX-дизайнерів є створення іконки веб-ресурсу у рамках розробки дизайну бренду, тому часто вже готові значки можуть бути сховані у файлах проєкту. Якщо їх немає, то доведеться звернутися до професіонала та створити унікальний фавікон.

Можна створити favicon самостійно: для цього необхідні прямі руки, хоча б базові знання Photoshop або інших редакторів та трохи вільного часу. Часто іконка створюється на базі логотипу бренду, тому якщо станом на зараз не вистачає часу та потрібен тимчасовий фавікон, то можна просто зробити маленьку версію основного логотипу сайту.

На допомогу можуть також прийти онлайн-сервіси, на яких можна швидко зробити favicon зі вже готової картинки. Наприклад, на руках вже є логотип компанії та його необхідно швидко обрізати. В такому випадку не знадобляться додаткові редактори.

Ще одним варіантом будуть стоки та сайти з безкоштовними іконками. Унікальність такого favicon буде мінімальна, втім як тимчасове рішення більш ніж нормально.

Вимоги до розміру favicon

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

Головна вимога, щоб фавікон був квадратної форми.

Які типи файлів використовує favicon?

Першим стандартним розширенням для файлів фавікон було .ico, який використовувався з 1999 року. Згодом його на заміну прийшли більш сучасні та гнучкі формати: .png, .jpeg та .svg. Деякі браузері навіть вміють відображати favicon, які створені у форматі GIF, тобто анімовані зображення, але розмір значка перешкоджає перегляду таких favicon. Поговоримо конкретніше про формати фавікон:

• ICO — формат favicon від Microsoft. І хоча деякі вважають його застарілим, він досі активно використовується для іконок сайту.
• PNG — один із найпопулярніших форматів для іконок. Цей простий формат, як правило, забезпечує високу якість favicon та пропонує такі переваги як невеликий розмір та можливості створення іконок з прозорими або напівпрозорими елементами.
• SVG — файли цього формату відомі своєю легкістю. Найбільша перевага SVG полягає у швидкості завантаження високоякісних зображень без втрати швидкості роботи самого сайту. Раніше не всі браузери могли обробляти фавікон у форматі SVG, але сьогодні ситуація змінюється.

Інструменти для створення або генерації favicon

Щоб створити favicon самостійно можна скористатися двома шляхами: desktop-додатки та онлайн-сервіси. Розглянемо обидва варіанта.

Графічні редактори для favicon

Підійдуть будь-які векторні та растрові редактори. Photoshop, GIMP, Figma — всі ці інструменти можна використати для створення favicon. Головне, щоб значок був квадратної форми та відповідав заданому розміру.

Онлайн-сервіси

Зазвичай мають урізаний функціонал графічних редакторів, проте не потребують додаткової інсталяції на ПК та дозволяють зробити favicon прямо с телефона чи будь-якого іншого пристрою. Ось невелика добірка онлайн-генераторів іконок.

RealFaviconGenerator

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

FAVIC-O-MATIC

Простий сервіс із купою налаштувань для створення декількох фавіконів одночасно. Не надає можливість попереднього перегляду, проте відразу збирає всі обрані формати в один архів.

FAVICON.IO

Наявний інструментарій для створення фавікон, а також конвертації PNG до ICO, текстового формату до ICO та навіть емоджи до ICO. Також можна обрати тло та колір майбутнього значка сайту.

Рекомендації зі створення фавікона

Навіть найкращий favicon можна зробити ще краще! Ось деякі поради з цього приводу:

• Простота — через те, що фавікон має невеликий розмір, від дизайну потребується, що називається, «лаконічна простота». Намагайтесь робити ваші значки сайтів чіткими та простими, без перевантаження непотрібними елементами та «прикрасами».
• Ідентичність — favicon повинен розкривати ідентичність та дух вашого бренду, сайту, форуму, лендингу та будь-чого ще. Важливо, щоб значок використовував ту ж кольорову палітру, що і весь інший дизайн сайту.
• Відсутність тексту — за можливістю не використовуйте більше однієї букви у фавікон, адже розмір іконки занадто малий для того, щоб прочитати хоча б щось. Три букви — максимум, який можна спробувати вмістити у фавікон. На практиці на значку частіше знаходиться або логотип, або одна буква.
• Використання логотипу — і хоча використання логотипу це реально працююча стратегія, для того, щоб лого добре читалось на маленькому зображенні необхідно внести деякі зміни. Ймовірніше за все, логотип доведеться спростити та прибрати деякі складні або занадто малі його частини.

Як додати фавікон на сайт?

Якщо ви створювали сайт за допомогою конструктора, то додати favicon можна через адмінку конструктора. Наприклад, на останніх версіях WordPress для цього необхідно перейти адмінки та обрати у правому меню пункт «Settings» або «Налаштування» та підпункт «Site Icon». Туди можна завантажити фавікон.

Якщо сайт написаний самостійно, то favicon можна додати за допомогою нескладної маніпуляції з файлом, який містить налаштування <head>…</head>. Це можуть бути файли index.html, home.html, main.html — тобто файли головної сторінки. В налаштуванні <head> додамо наступну строку:

<link rel=”shortcut icon” href=”/favicon.ico” type=”image/x-icon”>

Щоб фавікон запрацював, потрібно завантажити його до кореневої теки сайту. Шлях буде наступний:

https://example.com/favicon.ico

Назва значку повинна бути favicon.ico.

Висновки

Favicon — невідʼємний атрибут будь-якого сайту. Якого наявність сприймається як належне, але його відсутність одразу кидається в очі. Отже, якісний favicon допоможе сформувати уявлення про ваш сайт та бренд, а тому слід витратити час на його створення та імплементації до загального дизайну веб-ресурсу.

Олександр Романенко

Team Lead/Senior SEO-спеціаліст

Сторінка автора