Настройка значков

Этот раздел демонстрирует, как настроить значок приложения для различных платформ. Документацию по изображениям экрана загрузки можно найти в документации плагина Cordova-Plugin-Splashscreen Документация плагина Splashscreen.

Настройка значков в CLI

При работе с CLI вы можете определить значок(и) приложения через элемент <icon> (config.xml). Если вы не укажете значок, будет использоваться логотип Apache Cordova.

<icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />

Следующая конфигурация может быть использована для определения одного стандартного значка, который будет применяться для всех платформ.

<icon src="res/icon.png" />

Для каждой платформы вы также можете определить набор значков с пиксельной точностью, подходящих для разных разрешений экрана.

Android

В Android вместо использования одного изображения для значка можно использовать два изображения (фон и переднего плана) для создания адаптивного значка.

Адаптивные значки

Для использования адаптивных значков атрибуты background и foreground должны быть определены вместо атрибута src. Атрибут src не используется для адаптивных значков.

Адаптивный значок с изображениями:

<platform name="android">
  <icon background="res/icon/android/ldpi-background.png" density="ldpi" foreground="res/icon/android/ldpi-foreground.png" />
  <icon background="res/icon/android/mdpi-background.png" density="mdpi" foreground="res/icon/android/mdpi-foreground.png" />
  <icon background="res/icon/android/hdpi-background.png" density="hdpi" foreground="res/icon/android/hdpi-foreground.png" />
  <icon background="res/icon/android/xhdpi-background.png" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.png" />
  <icon background="res/icon/android/xxhdpi-background.png" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.png" />
  <icon background="res/icon/android/xxxhdpi-background.png" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.png" />
</platform>

Примечание: В этом примере изображение переднего плана также будет использоваться как резервный значок для устройств Android, не поддерживающих адаптивные значки. Резервный значок можно переопределить, задав атрибут src.

Адаптивный значок с векторами:

<platform name="android">
  <icon background="res/icon/android/ldpi-background.xml" density="ldpi" foreground="res/icon/android/ldpi-foreground.xml" src="res/android/ldpi.png" />
  <icon background="res/icon/android/mdpi-background.xml" density="mdpi" foreground="res/icon/android/mdpi-foreground.xml" src="res/android/mdpi.png" />
  <icon background="res/icon/android/hdpi-background.xml" density="hdpi" foreground="res/icon/android/hdpi-foreground.xml" src="res/android/hdpi.png" />
  <icon background="res/icon/android/xhdpi-background.xml" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.xml" src="res/android/xhdpi.png" />
  <icon background="res/icon/android/xxhdpi-background.xml" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.xml" src="res/android/xxhdpi.png" />
  <icon background="res/icon/android/xxxhdpi-background.xml" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.xml" src="res/android/xxxhdpi.png" />
</platform>

Примечание: В этом примере атрибут src должен быть определен, когда атрибут foreground определен с вектором или цветом.

Адаптивный значок с цветами:

Создайте файл ресурсов res/values/colors.xml в каталоге вашего проекта для хранения определений цветов приложения.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="background">#FF0000</color>
</resources>

В config.xml, мы добавим resource-file для копирования colors.xml в соответствующее место, чтобы цвета были доступны во время сборки.

<platform name="android">
  <resource-file src="res/values/colors.xml" target="/app/src/main/res/values/colors.xml" />

  <icon background="@color/background" density="ldpi" foreground="res/icon/android/ldpi-foreground.png" />
  <icon background="@color/background" density="mdpi" foreground="res/icon/android/mdpi-foreground.png" />
  <icon background="@color/background" density="hdpi" foreground="res/icon/android/hdpi-foreground.png" />
  <icon background="@color/background" density="xhdpi" foreground="res/icon/android/xhdpi-foreground.png" />
  <icon background="@color/background" density="xxhdpi" foreground="res/icon/android/xxhdpi-foreground.png" />
  <icon background="@color/background" density="xxxhdpi" foreground="res/icon/android/xxxhdpi-foreground.png" />
</platform>

Стандартные значки

<platform name="android">
    <!--
        ldpi    : 36x36 px
        mdpi    : 48x48 px
        hdpi    : 72x72 px
        xhdpi   : 96x96 px
        xxhdpi  : 144x144 px
        xxxhdpi : 192x192 px
    -->
    <icon src="res/android/ldpi.png" density="ldpi" />
    <icon src="res/android/mdpi.png" density="mdpi" />
    <icon src="res/android/hdpi.png" density="hdpi" />
    <icon src="res/android/xhdpi.png" density="xhdpi" />
    <icon src="res/android/xxhdpi.png" density="xxhdpi" />
    <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
</platform>

См. также

• Руководство по значкам Android
• Android - Поддержка нескольких экранов

Браузер

Значки не применимы к платформе Браузер.

iOS

<platform name="ios">
    <!-- iOS 8.0+ -->
    <!-- iPhone 6 Plus  -->
    <icon src="res/ios/icon-60@3x.png" width="180" height="180" />
    <!-- iOS 7.0+ -->
    <!-- iPhone / iPod Touch  -->
    <icon src="res/ios/icon-60.png" width="60" height="60" />
    <icon src="res/ios/icon-60@2x.png" width="120" height="120" />
    <!-- iPad -->
    <icon src="res/ios/icon-76.png" width="76" height="76" />
    <icon src="res/ios/icon-76@2x.png" width="152" height="152" />
    <!-- Spotlight Icon -->
    <icon src="res/ios/icon-40.png" width="40" height="40" />
    <icon src="res/ios/icon-40@2x.png" width="80" height="80" />
    <!-- iOS 6.1 -->
    <!-- iPhone / iPod Touch -->
    <icon src="res/ios/icon.png" width="57" height="57" />
    <icon src="res/ios/icon@2x.png" width="114" height="114" />
    <!-- iPad -->
    <icon src="res/ios/icon-72.png" width="72" height="72" />
    <icon src="res/ios/icon-72@2x.png" width="144" height="144" />
    <!-- iPad Pro -->
    <icon src="res/ios/icon-167.png" width="167" height="167" />
    <!-- iPhone Spotlight and Settings Icon -->
    <icon src="res/ios/icon-small.png" width="29" height="29" />
    <icon src="res/ios/icon-small@2x.png" width="58" height="58" />
    <icon src="res/ios/icon-small@3x.png" width="87" height="87" />
    <!-- iPad Spotlight and Settings Icon -->
    <icon src="res/ios/icon-50.png" width="50" height="50" />
    <icon src="res/ios/icon-50@2x.png" width="100" height="100" />
    <!-- iPad Pro -->
    <icon src="res/ios/icon-83.5@2x.png" width="167" height="167" />
</platform>

См. также

• Значки приложений на iPad и iPhone

Windows

Для Windows рекомендуемый подход к определению значков приложения — использование атрибута target.

<platform name="windows">
    <icon src="res/windows/storelogo.png" target="StoreLogo" />
    <icon src="res/windows/smalllogo.png" target="Square30x30Logo" />
    <icon src="res/windows/Square44x44Logo.png" target="Square44x44Logo" />
    <icon src="res/windows/Square70x70Logo.png" target="Square70x70Logo" />
    <icon src="res/windows/Square71x71Logo.png" target="Square71x71Logo" />
    <icon src="res/windows/Square150x150Logo.png" target="Square150x150Logo" />
    <icon src="res/windows/Square310x310Logo.png" target="Square310x310Logo" />
    <icon src="res/windows/Wide310x150Logo.png" target="Wide310x150Logo" />
</platform>

где src — путь к значку, который нужно добавить.

Платформа Windows автоматически обрабатывает значки MRT, поэтому если вы укажете src="res/windows/storelogo.png", следующие файлы будут скопированы в папку images приложения: res/windows/storelogo.scale-100.png, res/windows/storelogo.scale-200.png, и т.д.

TODO Определить, что такое MRT.

Атрибут target задаёт базовое имя для получившихся значков. Для каждого файла значка его имя выходного файла вычисляется как target + '.' + MRT_qualifiers + extension(src). Для корректного отображения значков в приложении каждое значение target должно соответствовать одному из имён файлов значков, определённых в файле .appxmanifest приложения.

Подводя итог вышесказанному... используя атрибут target можно:

• определить группу значков для разных масштабов устройств, используя один элемент <icon ...>, например: xml <icon src="res/windows/AppListIcon.png" target="Square44x44Logo" /> , что эквивалентно следующим строкам: xml <icon src="res/windows/Square44x44Logo.scale-100.png" width="44" height="44" /> <icon src="res/windows/Square44x44Logo.scale-150.png" width="66" height="66" /> <icon src="res/windows/Square44x44Logo.scale-200.png" width="88" height="88" /> <icon src="res/windows/Square44x44Logo.scale-240.png" width="106" height="106" />
• определить значки с коэффициентами масштаба, отличными от scale-100 и scale-240 (и любых других квалификаторов MRT)

Хотя это не рекомендуется, также можно определить значки, используя атрибуты width и height:

<platform name="windows">
    <icon src="res/windows/logo.png" width="150" height="150" />
    <icon src="res/windows/smalllogo.png" width="30" height="30" />
    <icon src="res/windows/storelogo.png" width="50" height="50" />
    <icon src="res/windows/Square44x44Logo.scale-100.png" width="44" height="44" />
    <icon src="res/windows/Square44x44Logo.scale-240.png" width="106" height="106" />
    <icon src="res/windows/Square70x70Logo.scale-100.png" width="70" height="70" />
    <icon src="res/windows/Square71x71Logo.scale-100.png" width="71" height="71" />
    <icon src="res/windows/Square71x71Logo.scale-240.png" width="170" height="170" />
    <icon src="res/windows/Square150x150Logo.scale-240.png" width="360" height="360" />
    <icon src="res/windows/Square310x310Logo.scale-100.png" width="310" height="310" />
    <icon src="res/windows/Wide310x150Logo.scale-100.png" width="310" height="150" />
    <icon src="res/windows/Wide310x150Logo.scale-240.png" width="744" height="360" />
</platform>

См. также:

• Руководство по значкам Windows 10.
• Размеры плиток и значков Windows 8.1

Electron

Настройка значка приложения

Настраиваемые значки можно объявить с помощью элемента(ов) <icon> в файле config.xml. Существует два типа значков, которые можно определить: значок приложения и значок установщика пакета. Эти значки должны быть определены в узле платформы Electron <platform name="electron">.

Один значок можно использовать для приложения и установщика, но этот значок должен иметь размер не менее 512x512 пикселей, чтобы работать на всех операционных системах.

Примечание: Если настраиваемый значок не предоставлен, используются значки по умолчанию Apache Cordova.

Примечание: macOS не отображает пользовательские значки при использовании cordova run. По умолчанию используется значок Electron.

<platform name="electron">
    <icon src="res/electron/icon.png" />
</platform>

Вы можете предоставить уникальные значки для приложения и установщика, задав атрибут target. Как упоминалось выше, изображение установщика должно иметь размер 512x512 пикселей, чтобы работать на всех платформах.

<platform name="electron">
    <icon src="res/electron/app.png" target="app" />
    <icon src="res/electron/installer.png" target="installer" />
</platform>

Для устройств, поддерживающих разрешения высокой плотности пикселей, такие как дисплей Retina Apple, вы можете создать набор изображений с тем же базовым именем, но с суффиксом, содержащим множитель.

Например, если базовое имя изображения icon.png и имеет стандартное разрешение, то icon@2x.png будет рассматриваться как изображение высокого разрешения с удвоенной плотностью пикселей по сравнению с базовым.

• icon.png (256px x 256px)
• icon@2x.png (512px x 512px)

Если вы хотите одновременно поддерживать дисплеи с различной плотностью пикселей, вы можете поместить изображения с различными размерами в одну папку и использовать имя файла без суффиксов DPI. Например:

<platform name="electron">
    <icon src="res/electron/icon.png" />
    <icon src="res/electron/icon@1.5x.png" />
    <icon src="res/electron/icon@2x.png" />
    <icon src="res/electron/icon@4x.png" target="installer" />
</platform>