На скриншотах показано англоязычное приложение. Предустановленные имена и элементы управления также доступны на языке вашего приложения.

Ваша отправная точка

Используйте Набор Favicon в PixRinse, затем сверьте эти настройки с фактическим пунктом назначения.

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

Как это сделать

  1. Подготовьте квадратную исходную отметку

    Используйте источник размером не меньше самого большого значка, который вам нужен. Упростите мелкие детали, которые могут исчезнуть в 16 px.

  2. Выберите Набор Favicon

    Просмотрите шесть размеров. В шаблоне используется правило покрытия по центру, поэтому неквадратный источник можно обрезать.

  3. Проверьте самые маленькие выходы

    Проверьте файлы 16 и 32 px в их реальном размере. Автоматическое изменение размера не может заменить целенаправленную оптическую корректировку сложного фирменного знака.

  4. Экспортируйте изображения и добавляйте их ссылки в код вашего сайта.

    Добавьте файлы PNG на свой веб-сайт и укажите соответствующие размеры в заголовке HTML и манифесте веб-приложения.

ФАЙЛЫ ИЗ ЭТОГО ПРОХОЖДЕНИЯ

Что дал этот пример

Квадратная метка 1024 × 1024 создает шесть PNG без предупреждения о неквадратичном источнике. Каждый экспортированный файл содержит профиль sRGB.

Квадратный источник
1024 × 1024
PNG экспорт
6
Цветовой профиль
sRGB на каждом выходе
Фактически экспортированные файлы
ФайлФорматПикселиБайты
android-chrome-192x192.pngPNG192 × 19226 980
android-chrome-512x512.pngPNG512 × 512174 868
apple-touch-icon.pngPNG180 × 18023 839
favicon-16x16.pngPNG16 × 16692
favicon-32x32.pngPNG32 × 321 751
favicon-48x48.pngPNG48 × 483 093
Создайте набор иконок для веб-сайтов: фактические экспортированные результаты
Фактические результаты экспорта для примеров файлов, показанных в этом пошаговом руководстве.

Измерено на показанных файлах-образцах. Ваши результаты зависят от ваших оригиналов и настроек. В этом пошаговом руководстве используются собственные графические изображения PixRinse на квадратных или прозрачных образцах холстов.

Пара распространенных вопросов

Создает ли он favicon.ico?

Нет. Встроенный набор экспортирует шесть файлов PNG с определенными именами.

Подойдет ли широкий логотип?

Предпочтителен квадратный источник. Правило обложки может обрезать широкий источник, поэтому внимательно просмотрите предварительный просмотр.

Заставьте рабочий процесс работать.

Откройте PixRinse, добавьте несколько изображений и начните с настроек выше.

Скачать для MacБесплатно: до 10 изображений в пакете и один выход для каждого источника. Для нескольких выходов этого рабочего процесса требуется Pro. Сравните бесплатную и Pro.