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

В этом разделе показано, как настроить значок приложения для различных платформ. Документацию по изображениям стартового экрана можно найти в документации плагина 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

<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 - Поддержка нескольких экранов

BlackBerry10

<platform name="blackberry10">
    <icon src="res/bb10/icon-86.png" />
    <icon src="res/bb10/icon-150.png" />
</platform>

См. также

• Документация BlackBerry для настройки нескольких размеров и локализаций.

Браузер

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

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" />
    <!-- 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" />
    <!-- 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

Windows Phone 8 (Платформа WP8)

<platform name="wp8">
    <icon src="res/wp/ApplicationIcon.png" width="99" height="99" />
    <!-- tile image -->
    <icon src="res/wp/Background.png" width="159" height="159" />
</platform>