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

Фавікон – маленька іконка на вкладці браузера й у результатах Google. Розбираємо, які файли потрібні сайту у 2026 році, як зробити їх із логотипа і чому іконка може не з’являтися в пошуку.

Редакція BOMBA DESIGN12 листопада 20269 хв читання

Генератор фавікона BOMBA DESIGN: іконки сайту різних розмірів із логотипа — **Фавікон із логотипа:** усі розміри для браузерів, телефонів і пошуку одним архівом.

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

Колись вистачало одного файлу favicon.ico розміром 16 × 16. Тепер пристроїв більше, і кожен просить свій розмір. Вручну це пів години роботи в графічному редакторі, генератором – хвилина.

Головне

Мінімальний набір: favicon.ico, PNG 32 × 32, іконка 180 × 180 для iPhone і 192 × 192 та 512 × 512 для Android.
Google показує фавікон у пошуку, якщо він квадратний і не менший за 48 × 48 px.
Для іконки беруть знак або першу літеру, а не весь логотип із написом.

ДовідкаЯкі розміри фавікона потрібні

Файл	Розмір	Де використовується
favicon.ico	16, 32, 48 px в одному файлі	Вкладки браузерів, старі програми
PNG	32 × 32	Сучасні браузери
apple-touch-icon	180 × 180	Головний екран iPhone та iPad
PNG	192 × 192	Android, ярлик на екрані
PNG	512 × 512	Заставка вебзастосунку на Android
Картинка для посилань	1200 × 630	Прев’ю в месенджерах і соцмережах

Останній рядок – не фавікон, але його зручно робити заразом: це картинка, яку Telegram, Viber чи Facebook показують, коли хтось надсилає посилання на ваш сайт.

ІнструкціяЯк зробити фавікон із логотипа: 4 кроки

Відкрийте генераторПерейдіть у Фавікон для сайту. Реєстрація не потрібна.
Завантажте логотипНайкраще – простий знак без дрібного тексту. Підійде PNG, JPG або SVG.
Оберіть фонПрозорий, білий або фірмовий колір. Усі розміри створюються автоматично.
Завантажте архівУсередині – favicon.ico, PNG-іконки й готовий код для сайту.

ДизайнЩо поставити на фавікон

На вкладці іконка займає 16 пікселів. У такому розмірі напис із п’яти літер перетворюється на сіру смужку. Працюють три варіанти.

Знак із логотипа. Якщо в логотипі є окремий символ, беріть його без напису.

Перша літера назви. Жирна літера на фірмовому фоні читається навіть у найменшому розмірі.

Спрощена версія. Складний знак із тонкими лініями варто спростити: прибрати дрібні деталі, потовщити лінії.

Прозорий фон виглядає охайно, але перевірте іконку в темній темі браузера: темний знак на темній вкладці зникає. Якщо так, оберіть білу або фірмову підкладку.

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

WordPress. «Вигляд» → «Налаштувати» → «Ідентичність сайту» → «Іконка сайту». Завантажте PNG 512 × 512 – решту розмірів система зробить сама.

Конструктори сайтів. У налаштуваннях сайту зазвичай є розділ «Фавікон» або «Іконка сайту» з полем для завантаження файлу.

Власний сайт. Покладіть файли з архіву в кореневу папку сайту і вставте готовий код у розділ head кожної сторінки.

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

ПошукЧому фавікон не показується в Google

Іконка не квадратна або замала. Google приймає квадратні іконки зі стороною, кратною 48 px: 48, 96, 144 і більше.

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

Файл закрито від робота. Перевірте, що іконка відкривається за прямою адресою і не заборонена у robots.txt.

Іконку вказано лише на окремих сторінках. Google бере фавікон із головної сторінки сайту.

ДеталіТемна тема, SVG і кольори панелі

Темна тема. Дедалі більше людей користуються темним оформленням браузера. Чорний знак на прозорому фоні там зникає. Найпростіше рішення – кольорова або біла підкладка із заокругленими кутами.

SVG-фавікон. Сучасні браузери розуміють векторну іконку: вона чітка в будь-якому розмірі. Але Safari та старі браузери її не підтримують повністю, тому SVG додають разом із PNG та ICO, а не замість них.

Колір панелі на Android. У коді сайту можна вказати фірмовий колір – і верхня панель браузера Chrome на телефоні зафарбується ним. Дрібниця, яка робить сайт схожим на застосунок.

Чек-листПеревірка після встановлення

Вкладка браузераВідкрийте сайт у Chrome, Safari та Firefox: іконка є і вона чітка.
Темна темаПеремкніть оформлення браузера на темне й подивіться, чи видно знак.
Закладка на телефоніДодайте сайт на головний екран iPhone та Android: має з’явитися ваша іконка, а не скриншот сторінки.
Пряма адресаВідкрийте вашсайт/favicon.ico – файл має завантажитися.
Прев’ю посиланняНадішліть собі посилання на сайт у Telegram: з’явилася картинка й заголовок.

ЧесноСервіс зменшує логотип. Знак для маленьких розмірів малює дизайнер

Генератор робить усі потрібні файли з того логотипа, який ви завантажили. Якщо логотип – довгий напис без знака, у 16 пікселях він однаково буде нерозбірливим: програма не придумає для нього символ.

Адаптивну версію логотипа – окремий знак, який читається і на вкладці, і в аватарці, – ми розробляємо разом із логотипом: розробка логотипа.

Подивіться на іконку в реальному розмірі серед інших вкладок. Якщо ваш сайт не впізнати за секунду – знак треба спрощувати.