Розробка favicon та touch-іконок
Часто сайт чудово виглядає на десктопі, але на мобільних пристроях іконка в закладках або на робочому столі виявляється розмитою або обрізається. Усе тому, що для кожної платформи потрібен свій розмір і формат. Нерідко розробники забувають про іконки для PWA, і застосунок не проходить перевірку Lighthouse. Або використовують один favicon.ico для всього, а на Retina він мильний. Ми вирішуємо ці проблеми за вас. Наші інженери мають 10+ років досвіду у веб-розробці та підготували понад 500 наборів іконок для сайтів та PWA.
Які розміри та формати потрібні для сучасних браузерів?
Сучасний набір favicon — це не один файл, а цілий артефакт для різних сценаріїв. Ось мінімальний перелік файлів, які мають бути на сайті:
| Файл | Розмір | Призначення |
|---|---|---|
| favicon.ico | 16×16, 32×32 (multi-size) | Браузери, зворотна сумісність |
| favicon-16x16.png | 16×16 | Chrome, адресний рядок |
| favicon-32x32.png | 32×32 | Safari, Retina |
| apple-touch-icon.png | 180×180 | iOS "додати на екран" |
| android-chrome-192x192.png | 192×192 | Android Chrome |
| android-chrome-512x512.png | 512×512 | PWA splash screen |
| mstile-150x150.png | 150×150 | Windows плитка |
| safari-pinned-tab.svg | SVG | Safari Pinned Tab |
Якщо ви використовуєте PWA, обов'язково додайте маніфест із правильними посиланнями. Детальніше про маніфест на developer.mozilla.org.
Автоматична генерація набору в 3 рази швидша, ніж ручна підготовка кожного файлу.
Чому важлива підтримка maskable-іконок для Android?
Android адаптує іконки під різні форми — коло, округлений квадрат. Без атрибута "purpose": "maskable" система може обрізати іконку непередбачувано. Щоб цього уникнути, вихідник повинен мати безпечну зону: відступ у 40 пікселів від країв для розміру 512×512. У маніфесті це виглядає так:
{ "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" } ] } Що входить у роботу?
Ми готуємо повний комплект для вашого сайту:
- Вихідний SVG-файл із правильними пропорціями та безпечною зоною для maskable.
- Усі необхідні растрові файли (від 16×16 до 512×512) у PNG та ICO.
- Коректний маніфест
manifest.jsonіз зазначенням усіх іконок та їх purpose. - Мета-теги для
<head>:apple-touch-icon,icon,msapplication-Tile,safari-pinned-tab. - Перевірка на реальних пристроях iOS, Android, Windows та в різних браузерах.
- Консультація щодо інтеграції та підтримка після впровадження.
Як ми готуємо набір: покроковий процес
- Аналіз вихідного логотипу. Перевіряємо, чи підходить він для маленьких розмірів. Якщо ні — спрощуємо контури.
- Створення SVG-джерела. Малюємо або адаптуємо логотип у векторі з запасом для maskable.
- Автоматична генерація всього набору. Використовуємо RealFaviconGenerator та кастомні скрипти для консистентності.
- Налаштування manifest.json. Прописуємо шляхи, purpose, maskable, sizes.
- Вставка мета-тегів у
<head>. Усі 8 варіантів, включаючи msapplication-Tile та apple-touch-icon. - Перевірка на реальних пристроях. Тестуємо на iOS, Android, Windows та в браузерах.
Типові помилки та як їх уникнути
| Помилка | Наслідок | Рішення |
|---|---|---|
| Пропуск apple-touch-icon 180×180 | Іконка на iOS не відображається | Обов'язково включити 180×180 PNG з мета-тегом apple-touch-icon |
| Неправильний шлях у маніфесті | PWA не завантажує іконки | Переконатися, що шляхи відносні від кореня та файли доступні |
| Відсутність maskable purpose | Android обрізає іконку неправильно | Додати purpose: "any maskable" для іконок 192 та 512 |
| SVG для Safari Pinned Tab не монохромний | Не фарбується в колір теми | Використовувати лише чорний fill, без градієнтів |
| Занадто складний логотип для 16×16 | Губиться читаність | Зробити окрему спрощену версію для 16×16 |
Гарантуємо, що після нашої роботи всі іконки будуть коректно відображатися на всіх пристроях.
Терміни та вартість
Підготовка повного набору займає від 0,5 до 1 робочого дня. Вартість розраховується індивідуально залежно від складності логотипу.
Замовте підготовку іконок
Зв'яжіться з нами, щоб обговорити ваш проєкт. Ми підготуємо іконки, які працюватимуть усюди — на iOS, Android, Windows та в браузерах.