Генератор Favicon

Що таке генератор favicon?

Favicon — маленька іконка, що відображається у вкладках браузера, закладках, результатах пошуку та ярликах програм для сайту. Зазвичай 16×16, 32×32 або 48×48 пікселів, favicon допомагають користувачам ідентифікувати ваш сайт серед багатьох відкритих вкладок. Цей інструмент генерує favicon у всіх необхідних розмірах та форматах з одного вихідного зображення.

Сучасні сайти потребують кількох розмірів favicon: 16×16 та 32×32 для вкладок браузера, 180×180 для Apple Touch Icon, 192×192 та 512×512 для ярликів на головному екрані Android та іноді SVG для масштабованого відображення. Цей інструмент генерує всі необхідні розміри з одного завантаження, плюс необхідні HTML link-теги для включення в ваш сайт.

Як користуватися цим інструментом

Завантажте квадратне зображення (в ідеалі щонайменше 512×512 пікселів). Інструмент генерує всі стандартні розміри та формати favicon. Переглядайте, як виглядає кожен розмір. Завантажте повний пакет favicon, включаючи ICO-файл, PNG-версії та HTML мета-теги для вставлення в секцію head вашого сайту.

Необхідні розміри favicon

• 16×16 — іконка вкладки браузера (класичний розмір favicon).
• 32×32 — ярлик на панелі завдань, вкладки браузера з високою щільністю пікселів.
• 180×180 — Apple Touch Icon для головного екрану iOS.
• 192×192 та 512×512 — головний екран Android та заставка (маніфест PWA).

Поради щодо дизайну favicon

Favicon повинні бути розпізнаваними при крихітних розмірах. Використовуйте жирні форми, просту геометрію та високий контраст. Текст рідко працює нижче 32×32. Окрема літера або абстрактний символ вашого бренду є найефективнішим. Тестуйте ваш favicon при фактичному розмірі відображення (16×16) — деталі, що чудово виглядають при 512×512, стають невидимими плямами при розмірі favicon. Використовуйте прозорий фон для PNG-favicon.

Часті запитання

У чому різниця між favicon.ico та PNG favicon?

Формат ICO може містити кілька розмірів в одному файлі та підтримується всіма браузерами, включаючи дуже старі. PNG favicon простіші (один розмір на файл) та використовуються сучасними браузерами. Більшість сайтів тепер включають обидва: ICO-файл для максимальної сумісності та PNG/SVG для сучасних браузерів. HTML link-теги вказують браузеру, який з них використовувати.

Чому мій favicon не з'являється?

Поширені причини: браузер кешував старий favicon (спробуйте очистити кеш або завантажити в приватному вікні), шлях до файлу в HTML link-тезі неправильний, формат файлу неправильний або favicon не знаходиться в кореневому каталозі. Браузери агресивно кешують favicon — оновлений favicon може з'явитися лише через кілька днів. Додавання рядка запиту (favicon.ico?v=2) може примусити оновлення.