Генератор 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-теги для включення в ваш сайт.

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

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

На мобільних пристроях, коли відвідувач натискає «Додати на головний екран» у Safari або Chrome, операційна система використовує apple-touch-icon (180×180 для iOS) або іконку з PWA-маніфесту (192×192 для Android) як ярлик застосунку на головному екрані. На комп'ютерах прогресивні вебзастосунки, встановлені через Chrome або Edge, відображаються на панелі завдань і в меню «Пуск» Windows з використанням іконки 512×512 із маніфесту. Пошукові системи, зокрема Google, іноді показують фавікон сайту в результатах пошуку поруч із URL сторінки — тож якісна іконка формує враження про бренд ще до кліку користувача.

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

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

Формати фавіконів: пояснення

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

• favicon.ico — Оригінальний формат фавікону. ICO-файл є контейнером, що може містити кілька розмірів зображення (зазвичай 16×16, 32×32 і 48×48) в одному файлі. Розмістіть його в кореневому каталозі сайту як /favicon.ico. Браузери автоматично звертаються за цим шляхом навіть без тега <link>, забезпечуючи сумісність із старими браузерами та читачами RSS.
• PNG-фавікони (32×32) — Сучасні браузери надають перевагу PNG. PNG розміром 32×32 є стандартним фавіконом загального призначення для вкладок браузера на екранах з високою щільністю пікселів. Оголошується так: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
• apple-touch-icon (180×180) — Пристрої Apple використовують цю іконку, коли відвідувач зберігає ваш сайт на головний екран iOS або iPadOS. Без неї iOS зробить знімок екрана вашої сторінки. Оголошується так: <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. Не використовуйте прозорий фон — Apple накладає іконку на білий квадрат, через що прозорі ділянки виглядають неправильно.
• Іконки PWA-маніфесту (192×192 і 512×512) — Прогресивні вебзастосунки оголошують іконки в JSON-файлі маніфесту. Іконка 192×192 використовується для ярликів на головному екрані Android, а іконка 512×512 — для заставки, що відображається під час завантаження застосунку. Посилання на маніфест: <link rel="manifest" href="/site.webmanifest">
• SVG-фавікон — Сучасні браузери (Chrome 80+, Firefox 41+, Safari 16+) підтримують SVG-фавікон, оголошений так: <link rel="icon" type="image/svg+xml" href="/favicon.svg">. SVG-фавікони не залежать від роздільної здатності та можуть містити всередині медіазапит prefers-color-scheme для автоматичного перемикання між світлою та темною версіями. Розмістіть тег SVG перед PNG-запасним варіантом — браузери з підтримкою використають вектор, а старіші браузери відкотяться до PNG.

Необхідні HTML-теги link

Скопіюйте ці теги в розділ <head> кожної сторінки вашого сайту. Порядок має значення — спочатку SVG, потім PNG, потім ICO. Браузери вибирають перший підтримуваний формат.

Ваш файл site.webmanifest повинен містити щонайменше: name, short_name, масив icons (з записами 192×192 і 512×512), theme_color, background_color і режим display, встановлений як standalone для встановлюваних PWA.

Необхідні розміри 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.

Використовуйте високий контраст

Фавікони відображаються на тлі інтерфейсу браузера, який може варіюватися від світло-сірого до майже чорного залежно від системної теми користувача. Дизайн, що виглядає чітко на білому тлі, може злитися з темною панеллю вкладок. Прагніть до коефіцієнта контрасту не менше 4,5:1 між переднім планом і фоном іконки. Темна іконка на яскравому тлі або світла іконка на темному тлі — обидва варіанти добре працюють.

Проектуйте для розпізнавання силуету

При розмірі 16×16 пікселів ваша іконка містить лише 256 пікселів. Мозок сприймає фавікони більше за формою, ніж за деталями. Виразний силует — окрема літера, геометричний знак, впізнаваний символ — спрацьовує набагато краще, ніж деталізована ілюстрація. Логотипи, що містять повну назву компанії, практично нерозбірливі в розмірі фавікону. Виділіть єдиний найбільш впізнаваний елемент свого бренду та відцентруйте його з достатнім відступом, щоб він не обрізався.

Типові помилки з фавіконами

• Надання лише PNG розміром 16×16 — на дисплеях Retina і з високою щільністю пікселів такий фавікон виглядатиме розмитим. Завжди включайте щонайменше PNG розміром 32×32.
• Відсутність apple-touch-icon — iOS покаже знімок екрана замість іконки, що виглядатиме як нечитабельна мініатюра всієї вашої сторінки.
• Прозорий фон на apple-touch-icon — Apple відображає прозорі ділянки як чорні, що руйнує дизайн. Використовуйте суцільний фон для іконки 180×180.
• Використання складного, деталізованого логотипу — дрібні деталі зникають при розмірі менше 64×64 пікселів. Спростіть дизайн до його основного знака.
• Відсутність інвалідатора кешу після оновлення — браузери агресивно кешують фавікони. Додайте рядок версії до href (?v=2), щоб браузери примусово завантажили новий файл.

Генерація на стороні клієнта та конфіденційність

Цей генератор фавіконів працює повністю у вашому браузері за допомогою HTML Canvas API. Текст, кольори та налаштування радіуса кутів, які ви вводите, ніколи не надсилаються на сервер. Ваш дизайн залишається на вашому пристрої, а згенеровані файли ви завантажуєте безпосередньо на комп'ютер. Це означає, що інструмент працює офлайн, щойно сторінку завантажено, і не потребує облікового запису чи реєстрації.

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

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

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

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

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

Чи все ще потрібен файл favicon.ico?

Так, поки що. Деякі старіші браузери, поштові клієнти, RSS-читачі та вебкравлери досі шукають /favicon.ico у корені вашого домену, не читаючи жодних тегів link у HTML. Зберігання favicon.ico розміром 32×32 у кореневому каталозі займає мізерно мало місця й покриває ці крайні випадки. Сучасні браузери надаватимуть перевагу версіям SVG або PNG, оголошеним у тегах <link>, над ICO-запасним варіантом.

Чи можна використовувати емодзі як фавікон?

Так — за допомогою SVG-фавіконів. Ви можете оголосити вбудований SVG із текстовим елементом, що містить символ емодзі, і сучасні браузери відображатимуть його ідеально в будь-якому розмірі. SVG-підхід також підтримує темний режим: обгорніть різні заливки в медіазапит prefers-color-scheme всередині SVG-файлу. Цей генератор дозволяє ввести будь-яке емодзі або символ у текстове поле й експортувати його як SVG-фавікон, готовий до використання.