Фавікон (favicon) — невеликий квадратний значок сайту, який допомагає впізнати його серед вкладок, закладок та інших елементів інтерфейсу браузера. Пошукові системи також можуть показувати favicon поруч із результатом пошуку. У більшості сучасних браузерів іконка вже не відображається в адресному рядку в тому вигляді, як це було раніше.
Фавікон не є самостійним фактором ранжування, але це важлива частина візуальної ідентичності сайту: він допомагає швидше впізнати ресурс у вкладках і закладках, а Google може використовувати його в пошуковій видачі поруч із назвою сайту.
Дочитавши статтю до кінця, ви матимете чітке уявлення, що таке фавікон, як його створити, як установити на сайт і які сервіси можна для цього використовувати.
Фавікон під мікроскопом
Наявність цієї іконки помітно спрощує навігацію: серед великої кількості відкритих вкладок або збережених закладок знайомий сайт легше відшукати саме за його значком. Іноді достатньо одного погляду, щоб серед десятків сторінок побачити потрібну.
Старе правило «favicon має бути 16×16 і обов’язково у форматі ICO» сьогодні вже надто вузьке. Для Google іконка має бути квадратною; технічно допускаються й дуже малі розміри, але для нормального відображення краще використовувати зображення, розмір якого кратний 48 пікселям — наприклад 48×48, 96×96 або більший якісний оригінал. Сучасні браузери працюють із PNG, SVG та ICO. На практиці зручно мати якісний квадратний вихідник, а вже з нього підготувати потрібні варіанти для браузерів і пристроїв.
У сучасних браузерах favicon насамперед помітний на вкладках, у закладках, історії та інших елементах інтерфейсу. В адресному рядку більшість браузерів давно відмовилася від старого способу показу favicon, тому орієнтуватися на нього як на головний сценарій уже не варто.
Оновлення 2026: скриншот нижче збережено з початкової версії статті. Він показує, як favicon виглядав у пошуковій видачі Яндекса на момент публікації матеріалу. Інтерфейс і механіка пошукових систем із часом змінюються, тому цей фрагмент варто сприймати як історичну ілюстрацію, а не як актуальну технічну інструкцію.
Сьогодні важливіше враховувати вимоги Google Search: пошуковик може показувати favicon поруч із назвою сайту, якщо іконка доступна для обходу, має стабільну URL-адресу та відповідає вимогам до розміру й формату. Після заміни значка оновлення у видачі може відбутися не відразу — роботу потрібно повторно обійти головну сторінку та сам файл favicon.
Створення фавікона — невеликий, але важливий етап оформлення сайту. До практичних переваг можна віднести:
- впізнаваність бренду;
- акуратніший і завершеніший вигляд сайту;
- зручнішу навігацію між вкладками та закладками;
- економію часу користувача.
Головна користь — упізнаваність. Знайома іконка допомагає швидше знайти потрібну вкладку або закладку й може зробити результат сайту помітнішим у пошуковій видачі. Водночас не варто обіцяти, що favicon сам по собі підвищить позиції, трафік чи конверсію: його завдання значно прозаїчніше — бути зрозумілим, помітним і асоціюватися з вашим проєктом навіть у дуже малому розмірі.
Залишилося розібратися, як створити та встановити фавікон на сайт.
Як створити фавікон
Файл favicon не зобов’язаний лежати строго в корені сайту й не повинен мати лише розмір 16×16 пікселів. Його можна зберігати у зручному каталозі та явно підключити через <link rel="icon"> у секції <head>. Для вихідного зображення краще використовувати квадратний файл більшого розміру, а 16×16 і 32×32 розглядати як розміри для перевірки читабельності, а не як єдиний правильний формат.
Основу можна створити у Photoshop, GIMP, Figma, Illustrator або будь-якому іншому графічному редакторі. ICO сьогодні не є єдиним «правильним» форматом: для сучасних сайтів часто достатньо PNG або SVG, а ICO можна залишити як додатковий варіант сумісності.
Зручно й просто зробити favicon за допомогою спеціальних онлайн-генераторів, які розглянемо нижче.
Ще один варіант — узяти готову іконку з онлайн-каталогу або галереї. Але для комерційного чи брендового сайту обов’язково перевіряйте ліцензію та право використання.
Огляд онлайн-генераторів і колекцій фавіконів
Favicon generator — сервіси, у яких можна створити «міні-логотип» сайту з нуля або перетворити готове зображення на favicon.
Faviсon.cc
Перевірено 19 серпня 2026: сервіс працює, доступні створення favicon з нуля, імпорт зображення та завантаження готового файла. Інтерфейс за роки майже не змінився, тому старі скриншоти нижче все ще добре передають логіку роботи.
Це зручний сервіс, у якому можна зробити власну іконку — буквально намалювати її попіксельно. Для цього переходимо на сайт і в меню ліворуч натискаємо «Create New Favicon».
У центральній частині вікна розташована область, де кожен квадратик — це піксель майбутньої іконки. Колір вибирається в блоці «Color Picker» праворуч, після чого потрібні клітинки зафарбовуються. Щоб прибрати невдале зафарбування, можна увімкнути «transparent» і клацнути по потрібному квадрату — він стане прозорим.
Прапорець біля «move» дозволяє переміщати рисунок по полотну. Результат можна контролювати в блоці «Preview» під піксельною сіткою. Для завантаження готового favicon на комп’ютер використовується кнопка «Download Favicon».
Якщо малювати з нуля не хочеться, можна завантажити готову картинку й використати її як основу. Для цього натискається «Import Image» у лівому меню.
На сторінці імпорту потрібно вибрати файл на комп’ютері. Прямокутне зображення сервіс може стиснути до квадрата через опцію «Shrink to square icon», але майте на увазі: у такому разі пропорції можуть спотворитися.
Якщо важливо зберегти співвідношення сторін, використовуйте «Keep dimensions».
Після налаштувань натискаємо «Upload». Завантажену іконку можна редагувати так само, як створену з нуля, а для збереження результату скористатися кнопкою «Download».
Сервіс також має колекцію favicon, створених іншими користувачами. У меню «Latest Favicons» вони відсортовані за датою, а в «Top Rated Favicons» — за рейтингом.
Щоб завантажити вподобану іконку, відкрийте її сторінку та виберіть «Download Favicon».
Logaster / ZenBusiness
Оновлення 2026: колишній сервіс Logaster у тому вигляді, який описано нижче, більше недоступний. Сторінка перенаправляє на ZenBusiness, де власний favicon-генератор на момент перевірки позначено як Coming Soon. Скриншоти та стару інструкцію збережено, щоб не виривати історичну частину матеріалу з контексту.
Раніше це був сервіс створення логотипів, який паралельно дозволяв підготувати favicon. Малювати іконку вручну або конвертувати логотип окремо не було потрібно.
Для створення фавікона достатньо було ввести назву компанії чи сайту та перейти до наступного кроку.
Сервіс пропонував готові шаблони favicon. Після вибору варіанта можна було перейти до перегляду й завантаження.
Для збереження результату сервіс вимагав створення облікового запису.
FaviconGenerator
Перевірено 19 серпня 2026: генератор працює: можна завантажити PNG, JPG або GIF і отримати favicon.ico та набір іконок. Частина пояснень на самому сайті виглядає застарілою, але основна функція генерації доступна.
Сервіс перетворює завантажене з комп’ютера зображення на набір потрібних іконок.
Послідовність проста: вибираємо файл і натискаємо «Create Favicon».
На завершальному етапі потрібно натиснути «Download the generated favicon» — на комп’ютер буде завантажено архів з іконками різних розмірів.
AntiFavicon
Перевірено 19 серпня 2026: сайт доступний і, як і раніше, позиціонується як простий онлайн-генератор favicon. Інтерфейс старий, але сама ідея сервісу — швидко зробити дворядкову текстову іконку — збереглася.
Сервіс дозволяє створити favicon із коротким написом. Кольори налаштовуються в області «Colors», а текст вводиться у полях «Top text» і «Bottom text».
Для завантаження готового значка використовується посилання «save as favicon file».
Iconj
Оновлення 2026: під час контрольної перевірки сервіс не вдалося стабільно відкрити. Тому інструкцію та скриншоти нижче залишено як частину початкового матеріалу, але розраховувати на IconJ як на основний робочий інструмент зараз не варто.
Раніше IconJ відрізнявся тим, що дозволяв не лише завантажити створену іконку, а й залишити її на сервісі та отримати пряме посилання на файл.
Для створення favicon потрібно було вибрати файл і натиснути «Upload Now».
Після обробки зображення його можна було завантажити за посиланням «Click here to download your Favicon.ico File». Там же сервіс генерував HTML-код для вставлення на сторінку та адресу розміщеної іконки.
В інтернеті можна знайти й багато інших генераторів, які створюють favicon з нуля або конвертують готове зображення. Список таких сервісів швидко змінюється: частина проєктів закривається, переїжджає на нові домени або змінює умови, тому перед використанням краще перевірити актуальну доступність і правила завантаження.
Можна використати й готову іконку з відкритих колекцій, але тут важливо перевірити ліцензію та право комерційного використання. Старий список галерей із початкової версії статті залишено нижче як орієнтир:
- галерея іконок для сайту favicon.ico;
- Iconj;
- Favicon.cc;
- The Favicon Gallery.
Якщо берете готовий знак, оцінюйте не лише його зовнішній вигляд: переконайтеся, що використання дозволене й іконка не нагадує чужий логотип. Для власного бренду надійніше мати простий оригінальний знак.
Як установити фавікон на сайт
Установлення favicon у Joomla та WordPress має свої особливості, а старі інструкції для цих CMS сьогодні потребують уточнень.
Joomla. У сучасних Joomla 4/5/6 спочатку варто перевірити налаштування активного шаблона або його фреймворку. Якщо шаблон дозволяє вибрати favicon у панелі налаштувань, це надійніше за ручну заміну файла: оновлення шаблона не затре вашу іконку.
Старі скриншоти нижче збережено навмисно. Вони показують ручний спосіб через файловий менеджер хостингу, типовий для Joomla 3 і старих шаблонів. На сучасному сайті краще використовувати налаштування шаблона, child template або передбачене шаблоном перевизначення, а не змінювати файли оригінального шаблона без потреби.
Якщо favicon усе ж підключається вручну, файл можна завантажити через ISPmanager, SFTP або інший файловий менеджер. Важливо, щоб шаблон або тег <link rel="icon"> посилався на реальну доступну URL-адресу зображення. У старій інструкції для цього відкривався каталог сайту та папка templates:
Після цього файл завантажувався безпосередньо до каталогу активного шаблона. Такий спосіб і далі може працювати в окремих конфігураціях, але перед заміною файла варто перевірити документацію конкретного шаблона.
WordPress. У сучасних версіях WordPress favicon краще призначати через штатне налаштування Site Icon або відповідне поле теми. Розташування пункту залежить від типу теми та інтерфейсу, але для звичайного сайту ручне редагування header.php уже не є рекомендованим способом.
Скриншот нижче залишено зі старої версії статті. Він корисний як ілюстрація попереднього інтерфейсу теми, але конкретні пункти меню в актуальному WordPress можуть виглядати інакше.
Якщо штатного налаштування справді немає, підключати favicon краще через дочірню тему, передбачений темою hook або інший спосіб, який переживе оновлення. Мінімальна сучасна розмітка виглядає так: <link rel="icon" href="/favicon.png" type="image/png">.
Якщо favicon не відображається, не зациклюйтеся на імені favicon.ico: сучасний файл може називатися інакше. Спочатку відкрийте URL іконки напряму, перевірте тег rel="icon" у вихідному коді, потім очистьте кеш CMS, браузера та CDN. Якщо йдеться про Google Search, оновлення у видачі може зайняти певний час після повторного обходу.
Підсумок
Якщо у проєкту досі немає favicon, його справді варто додати. Хороша іконка не обіцяє автоматичного зростання позицій чи конверсії, зате робить сайт акуратнішим і впізнаванішим у вкладках, закладках і пошуковій видачі. Створити її можна самостійно або за допомогою генератора — головне, щоб знак добре читався у малому розмірі й не втрачав зв’язок із брендом.
