На скриншотах показано англоязычное приложение. Предустановленные имена и элементы управления также доступны на языке вашего приложения.
Ваша отправная точка
Используйте Набор Favicon в PixRinse, затем сверьте эти настройки с фактическим пунктом назначения.
| PNG значок | 16 / 32 / 48 px |
|---|---|
| Apple Нажмите PNG. | 180 px |
| Веб-приложение PNG | 192 / 512 px |
| Цвет | sRGB |


Как это сделать
Подготовьте квадратную исходную отметку
Используйте источник размером не меньше самого большого значка, который вам нужен. Упростите мелкие детали, которые могут исчезнуть в 16 px.
Выберите Набор Favicon
Просмотрите шесть размеров. В шаблоне используется правило покрытия по центру, поэтому неквадратный источник можно обрезать.
Проверьте самые маленькие выходы
Проверьте файлы 16 и 32 px в их реальном размере. Автоматическое изменение размера не может заменить целенаправленную оптическую корректировку сложного фирменного знака.
Экспортируйте изображения и добавляйте их ссылки в код вашего сайта.
Добавьте файлы PNG на свой веб-сайт и укажите соответствующие размеры в заголовке HTML и манифесте веб-приложения.
ФАЙЛЫ ИЗ ЭТОГО ПРОХОЖДЕНИЯ
Что дал этот пример
Квадратная метка 1024 × 1024 создает шесть PNG без предупреждения о неквадратичном источнике. Каждый экспортированный файл содержит профиль sRGB.
- Квадратный источник
- 1024 × 1024
- PNG экспорт
- 6
- Цветовой профиль
- sRGB на каждом выходе
| Файл | Формат | Пиксели | Байты |
|---|---|---|---|
| android-chrome-192x192.png | PNG | 192 × 192 | 26 980 |
| android-chrome-512x512.png | PNG | 512 × 512 | 174 868 |
| apple-touch-icon.png | PNG | 180 × 180 | 23 839 |
| favicon-16x16.png | PNG | 16 × 16 | 692 |
| favicon-32x32.png | PNG | 32 × 32 | 1 751 |
| favicon-48x48.png | PNG | 48 × 48 | 3 093 |

Измерено на показанных файлах-образцах. Ваши результаты зависят от ваших оригиналов и настроек. В этом пошаговом руководстве используются собственные графические изображения PixRinse на квадратных или прозрачных образцах холстов.
Пара распространенных вопросов
Создает ли он favicon.ico?
Нет. Встроенный набор экспортирует шесть файлов PNG с определенными именами.
Подойдет ли широкий логотип?
Предпочтителен квадратный источник. Правило обложки может обрезать широкий источник, поэтому внимательно просмотрите предварительный просмотр.
Заставьте рабочий процесс работать.
Откройте PixRinse, добавьте несколько изображений и начните с настроек выше.
Скачать для MacБесплатно: до 10 изображений в пакете и один выход для каждого источника. Для нескольких выходов этого рабочего процесса требуется Pro. Сравните бесплатную и Pro.