Разработка 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 и в браузерах.