Призначення та можливості інструменту
Генератор фавіконів — це практичний інструмент, який дозволяє перетворити одне вихідне зображення на повний пакет іконок, необхідних для сучасного вебсайту. Замість ручного створення десятків файлів різних форматів, ви завантажуєте один файл PNG, JPG або SVG розміром до 50 МБ.
Інструмент автоматично генерує іконки для вкладок браузера, пристроїв Apple (Apple touch icons), а також для прогресивних вебдодатків (PWA). Результат роботи пакується в один ZIP-архів, готовий до завантаження, а користувачеві надається точний HTML-код для інтеграції файлів у код вебсторінок.
Вхідні параметри та вимоги до зображень
Для отримання якісного результату важливо дотримуватися технічних вимог до вихідного файлу:
- Формати: Підтримуються лише зображення форматів PNG, JPG та SVG.
- Розмір файлу: Максимальний обсяг завантажуваного файлу становить 50 МБ.
- Рекомендовані розміри: Для растрових форматів (PNG або JPG) рекомендовано використовувати зображення розміром щонайменше 512 × 512 пікселів. Якщо вихідне зображення занадто мале, інструмент покаже попередження: «Малий розмір джерела (
{w}×{h}px): великі іконки можуть виглядати розмитими. Найкращий результат дає розмір 512 × 512 або більше, або формат SVG.».
Обробка неквадратних зображень
Оскільки всі іконки для вебсайтів мають бути строго квадратними, інструмент пропонує два режими пристосування неквадратного джерела:
- Вписати (з полями): Усе зображення залишається вихідним і видимим, воно центрується з додаванням полів навколо. Це налаштування діє за замовчуванням.
- Заповнить (обрізати): Зображення повністю заповнює квадрат, а краї, що виступають, обрізаються.
Налаштування фону
- Прозорий: За замовчуванням інструмент зберігає прозорість вихідного файлу. Це оптимальне рішення для відображення у вкладках браузера.
- Колір: Користувач може самостійно вибрати колір фону. Використання суцільного кольору є безпечнішим для іконок головного екрана iPhone та iPad, оскільки операційна система iOS зафарбовує прозорі області чорним кольором.
Склад згенерованого пакета іконок
Після завершення обробки користувач отримує ZIP-архів, який містить такі компоненти:
- favicon.ico: Класичний файл іконки, що містить у собі три копії зображення з роздільною здатністю 16, 32 та 48 пікселів.
- PNG-іконки: Набір окремих файлів у форматах 16, 32, 180, 192 та 512 пікселів. Вони використовуються для сучасних браузерів, пристроїв Apple та платформи Android.
- site.webmanifest: Невеликий текстовий файл, який містить список великих іконок і вказує пристроям шлях до них.
- Векторний файл: Якщо вихідним файлом був SVG, сам векторний файл також додається до пакета, забезпечуючи ідеальну чіткість за будь-якого розміру.
Інтеграція та встановлення на сайт
Щоб підключити згенеровані іконки до вашого вебсайту, виконайте такі кроки:
- Завантажте отриманий ZIP-архів та розпакуйте його вміст.
- Помістіть файли в кореневу папку вашого сайту, щоб вони були доступні за прямими адресами (наприклад,
/favicon.ico). - Скопіюйте згенерований HTML-код за допомогою кнопки «Копіювати код».
- Вставте ці рядки всередину тегу
<head>на кожній сторінці вашого сайту.
Браузери та мобільні операційні системи автоматично звертатимуться до кореневої папки або зчитуватимуть метатеги, щоб вибрати файл потрібного розміру для конкретного екрана.
Конфіденційність та обробка даних
Генератор працює локально. Ваше зображення перетворюється на іконки безпосередньо у вашому браузері. Нічого не завантажується на BroBroGo, що гарантує збереження ваших вихідних графічних матеріалів на вашому пристрої.
Можливі помилки та їх усунення
Під час роботи з інструментом можуть виникати такі помилки, пов'язані з некоректністю вхідних даних:
- Не вдалося відкрити цей файл як зображення. Можливо, він пошкоджений, порожній або не є зображенням. — виникає, якщо файл має неправильну структуру або пошкоджений.
- Не вдалося прочитати цей SVG. Перевірте, чи є файл коректним документом SVG. — вказує на помилки у розмітці векторного файлу.
- Підтримуються лише зображення форматів PNG, JPG та SVG. — з'являється при спробі завантажити файли інших форматів (наприклад, WebP, GIF або PDF).
- Цей файл перевищує 50 МБ. Використовуйте менше вихідне зображення. — ліміт розміру перевищено, необхідно попередньо стиснути файл.
- Спочатку виберіть зображення PNG, JPG або SVG. — виникає, якщо користувач намагається запустити генерацію без завантаженого файлу.
- Помилка генерації. Спробуйте інше зображення. — загальна помилка збою процесу обробки.
Поширені запитання
Які файли входять до пакета іконок? Файл favicon.ico, що містить версії на 16, 32 та 48 пікселів, іконки PNG розміром 16, 32, 180, 192 та 512 пікселів, а також файл site.webmanifest, який містить список великих іконок. Якщо ви починаєте з SVG, сам векторний файл також буде включено. Весь набір міститься в одному ZIP-архіві.
Якого розміру має бути вихідне зображення? Формат SVG є ідеальним — кожна іконка малюється з вектора, тому навіть розмір 16 пікселів залишається чітким. Для PNG або JPG починайте щонайменше з 512 × 512; менші зображення будуть масштабуватися в бік збільшення і можуть виглядати розмитими.
Фон має бути прозорим чи кольоровим? Для вкладок браузера чудово підходить прозорий фон. Проте на головних екранах iPhone та iPad прозорі області зафарбовуються чорним — якщо користувачі можуть додавати ваш сайт на головний екран, краще вибрати колір фону.
Що відбувається із зображенням, яке не є квадратним? Іконки завжди квадратні, але ваше зображення ніколи не деформується. За замовчуванням воно центрується з полями навколо; перемкніться на режим «Заповнити (обрізати)», щоб натомість зрізати зайві краї.
Куди саме на сайті потрібно завантажувати файли? Завантажте їх у кореневу папку вашого сайту, щоб файл favicon.ico був доступний за адресою /favicon.ico, а потім вставте згенеровані рядки в тег ваших сторінок. Браузери самі виберуть потрібний розмір.