Як створити favicon з одного зображення

Навіщо сайту кілька іконок

Favicon — це значок у вкладці браузера. Телефон, Windows і macOS просять той самий знак більшим: Apple Touch Icon, іконки Android Chrome і файл favicon.ico. Збирати кожен розмір вручну довго, а пропущений розмір дає розмиту вкладку або порожній значок на домашньому екрані.

Favicon Generator збирає набір з одного зображення просто в браузері. Файл нікуди не надсилається. На виході ZIP, manifest.json для PWA, тестова сторінка і теги <link> для <head>.

Крок за кроком

1. Відкрийте Favicon Generator. Візьміть квадратне зображення, краще PNG. Широкий логотип розтягнеться в квадрат, тож спочатку обріжте його. Сторони 512 пікселів достатньо, 1024 краще: в архіві є іконка macOS 1024×1024.
2. Перетягніть файл у зону завантаження або натисніть «Вибрати файл». Зверху з’явиться прев’ю й ім’я файлу, нижче — поле «Шлях до іконок». Типово там /img. Змініть шлях, якщо іконки лежатимуть в іншій теці, наприклад /assets/icons.

   

3. Натисніть «Генерувати іконки». Браузер скачає favicons.zip. На сторінці з’явиться зелена позначка про завантаження і блок «HTML теги для вставки» з посиланнями на ваш шлях.

   

4. Розпакуйте архів у теку, яку вказали. Усередині PNG для вебу, iOS, Android і macOS, файл favicon.ico, manifest.json, test.html і html-tags.txt.
5. Вставте теги в <head> сторінок. Відкрийте test.html з тієї самої теки й перевірте, що файли відкриваються.

Поради

• Шлях має збігтися з текою. Якщо в полі /img, теги просять /img/favicon-32x32.png. Покладіть файли саме туди, інакше вкладка лишиться порожньою.
• Починайте з квадрата. Інструмент вписує все зображення в кожен квадратний розмір. Горизонтальний логотип стиснеться.
• Беріть великий оригінал. Дрібні розміри зменшуються з вашого файлу. Крихітна картинка не стане різкою іконкою 512×512.
• Кладіть маніфест поруч з іконками. manifest.json посилається на android-chrome-192x192.png і android-chrome-512x512.png за тим самим шляхом.
• Обробка йде в браузері. Картинка зменшується локально, потім завантажується ZIP. Обліковий запис і відправка на сервер не потрібні.

Поширені запитання

Логотип іде на сервер?

Ні. Генератор працює в браузері. Зображення не залишає комп’ютер.

Які розміри в архіві?

PNG для вебу від 16×16 до 512×512, Apple Touch Icon від 60×60 до 180×180, іконки Android Chrome 192×192 і 512×512, PNG для macOS до 1024×1024 і файл favicon.ico.

Куди вставляти HTML-теги?

У <head> кожної сторінки. Кнопка «Копіювати» кладе весь блок у буфер. Той самий текст лежить в архіві як html-tags.txt.

Що робити, якщо тека змінилася?

Впишіть нову теку в «Шлях до іконок». Якщо теги вже показано, вони перепишуться. Натисніть «Генерувати іконки» ще раз, щоб html-tags.txt у новому ZIP збігся зі шляхом.

Інші інструменти

• Favicon Generator: інструмент із цього гайда.
• SVG у CSS: вставити SVG-іконку прямо в таблицю стилів.
• Конвертер одиниць CSS: перевести розміри з px у rem.
• Веб-інструменти: решта сервісів категорії.

Спробувати

Відкрийте Favicon Generator, покладіть квадратний логотип і натисніть «Генерувати іконки».