الفرق بين المراجعتين لصفحة: «Cordova/images»

المراجعة الحالية بتاريخ 19:15، 30 نوفمبر 2020

يوضح هذا القسم كيفية إعداد أيقونة التطبيق لمختلف المنصات. إن كنت تبحث عن معلومات حول صور شاشة البداية (splash screen)، فراجع صفحة التوثيق الخاص بالإضافة Splashscreen.

إعداد الأيقونات عبر واجهة سطر الأوامر (CLI)

عند العمل على واجهة سطر الأوامر (CLI)، يمكنك تحديد أيقونة التطبيق عبر العنصر <icon> (في الملف config.xml).

إذا لم تحدّد أيقونة، فسيُستخدم شعار كوردوفا الأساسي.

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

توجد بعض الخاصيات التي يمكن استعمالها مع العنصر <icon> وهي:

الخاصية	الوصف
`src`	مطلوب موقع الصورة نسبةً إلى مجلد المشروع.
`platform`	اختيارية. المنصة المستهدفة.
`width`	اختيارية. عرض الأيقونة بالبكسل (px).
`height`	اختيارية. ارتفاع الأيقونة بالبكسل.
`target`	اختيارية (ويندوز). اسم ملف الهدف (destination filename) لملف الصورة وجميع الأهداف متعددة الألوان (MRT) التي ترافقها.

يمكن استخدام الإعدادات التالية لتعريف أيقونة افتراضية واحدة لاستخدامها في كافة المنصات:

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

يمكنك أيضًا أن تحدد لكل منصة أيقونة بحجم معين لتلائم دقة (resolution) مختلف الشاشات.

منصة أندرويد

على منصة أندرويد، بدلاً من استخدام صورة واحدة كأيقونة، يمكنك استخدام صورتين (خلفية ومقدمة) لإنشاء أيقونة متكيفة.

الخاصية	الوصف
`background`	مطلوبة في الأيقونات المتكيفة موقع الصورة (png أو vector) نسبةً إلى مجلد المشروع. أو مرجع اللون.
`foreground`	مطلوبة في الأيقونات المتكيفة موقع الصورة (png أو vector) نسبةً إلى مجلد المشروع. أو مرجع اللون.
`density`	مطلوبة تحدد كثافة الأيقونة

الأيقونات المتكيفة Adaptive Icons

لاستخدام الأيقونات المتكيفة، يجب تحديد الخاصيات 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>

ملاحظة: في هذا المثال، ستُستخدَم الصورة الأمامية كأيقونة احتياطية في أجهزة أندرويد التي لا تدعم الأيقونات المتكيفة. يمكن تجاوز الأيقونة الاحتياطية عن طريق تعيين الخاصية 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>

انظر أيضا:

منصة Browser

لا يمكن استعمال الأيقونات على منصة Browser.

منصة 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).

منصة ويندوز

في ويندوز، الأسلوب الموصى به لتحديد أيقونات التطبيق هو استخدام الخاصية 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 مسار الأيقونة المراد إضافتها.

تعالج منصة ويندوز أيقونات MRT (المناولة متعددة الأهداف) تلقائيًا، لذا إذا حددت المسار src="res/windows/storelogo.png"‎، فستُنسخ الملفات التالية في المجلد images الخاص بالتطبيق‏: res/windows/storelogo.scale-100.png وres/windows/storelogo.scale-200.png، ...إلخ.

تحدد الخاصية target الاسم الأساسي (base name) للأيقونات الناتجة. لكل ملف أيقونة، يُحدد التعبير target + '.' + MRT_qualifiers + extension(src)‎ اسم الملف الهدف (destination filename) الخاص به. لكي تُعرَض الأيقونات بشكل سليم في التطبيق، يجب أن تكون قيم الخاصية target واحدة من أسماء ملفات الأيقونات المحددة في الملف ‎.appxmanifest الخاص بالتطبيق.

خلاصة ما سبق، يمكننا استخدام الخاصية target لأجل:

تحديد مجموعة من الأيقونات لتناسب مختلف قياسات الأجهزة باستخدام عنصر واحد من <icon ...‎>. على سبيل المثال:

<icon src="res/windows/AppListIcon.png" target="Square44x44Logo" /‎>،

وهو ما يعادل الأسطر التالية:

xml <icon src="res/windows/Square44x44Logo.scale-100.png" width="44" height="44" ></div> <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>

انظر أيضا:

Electron

تخصيص أيقونة التطبيق

يمكن التصريح بالأيقونات المخصصة باستخدام العناصر <icon> في الملف config.xml. يمكن تعريف نوعين من الأيقونات، أيقونة التطبيق، وأيقونة مثبِّت الحزمة. يجب تعريف هذه الأيقونات في عقدة منصة إلكترون <platform name="electron">.

يمكن استخدام أيقونة واحدة للتطبيق والمُثبِّت معا شريطة ألا يقل حجمها عن 512 × 512 بكسل حتى تعمل في جميع أنظمة التشغيل.

ملاحظة: إذا لم يتم توفير أيقونة مخصصة، فستُستخدم أيقونات Apache Cordova الافتراضية.

ملاحظة: لا يعرض macOS الأيقونات المخصصة عند استخدام الأمر cordova run. إذ يستخدم افتراضيًا أيقونة Electron.

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

يمكنك تمرير أيقونة واحدة للتطبيق والمثبت معًا عبر تعيين الخاصيةtarget. كما ذكرنا آنفا، يجب أن تكون مساحة صورة المثبت 512 × 512 بكسل حتى تعمل في جميع الأنظمة الأساسية.

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

بالنسبة للأجهزة التي تدعم دقة DPI العالية، مثل شاشة Retina الخاصة بآبل، يمكنك إنشاء مجموعة من الصور بنفس اسم الملف الأساسي ولكن مع لاحقة تمثل معامل المضاعفة.

على سبيل المثال، إذا كان اسم ملف الصورة الأساسي icon.png، وكان يمثل الدقة القياسية، فسيتم التعامل مع icon@2x.png كصورة عالية الدقة عدد نقاطها في الإنش (dots-per-inch أو اختصارا DPI) مضاعف موازنة بالصورة الأساسية.

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

إذا كنت تريد دعم شاشات ذات كثافة DPI مختلفة، فيمكنك وضع صور بأحجام مختلفة في المجلد نفسه واستخدام اسم الملف بدون لواحق 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>

مصادر

صفحة Customize Icons في توثيق كوردوفا الرسمي.

@@ سطر 5: / سطر 5: @@
 عند العمل على واجهة سطر الأوامر (CLI)، يمكنك تحديد أيقونة التطبيق عبر العنصر <code><icon></code> (في الملف <code>config.xml</code>).
-إذا لم تحدّد أيقونة، فسيُستخدم شعار كوردوفا الأساسي.<syntaxhighlight lang="xml"><icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" ></div>‎</syntaxhighlight>توجد بعض الخاصيات التي يمكن استعمالها مع العنصر <code><icon></code> وهي:
+إذا لم تحدّد أيقونة، فسيُستخدم شعار كوردوفا الأساسي.<syntaxhighlight lang="xml">    <icon src="res/ios/icon.png" platform="ios" width="57" height="57" density="mdpi" />
+</syntaxhighlight>توجد بعض الخاصيات التي يمكن استعمالها مع العنصر <code><icon></code> وهي:
 {| class="wikitable"
 !الخاصية
@@ سطر 25: / سطر 26: @@
 |اختيارية.
 ارتفاع الأيقونة بالبكسل.
-|-
-|<code>density</code>
-|اختيارية (أندرويد).
-كثافة الأيقونة.
 |-
 |<code>target</code>
@@ سطر 35: / سطر 32: @@
 |}يمكن استخدام الإعدادات التالية لتعريف أيقونة افتراضية واحدة لاستخدامها في كافة المنصات:<syntaxhighlight lang="xml"><icon src="res/icon.png" ></div>‎</syntaxhighlight>يمكنك أيضًا أن تحدد لكل منصة أيقونة بحجم معين لتلائم دقة (resolution) مختلف الشاشات.
 ==منصة أندرويد==
+على منصة أندرويد، بدلاً من استخدام صورة واحدة كأيقونة، يمكنك استخدام صورتين (خلفية ومقدمة) لإنشاء أيقونة متكيفة.
+{| class="wikitable"
+!الخاصية
+!الوصف
+|-
+|<code>background</code>
+|مطلوبة في الأيقونات المتكيفة
+موقع الصورة (png أو vector) نسبةً إلى مجلد المشروع. أو مرجع اللون.
+|-
+|<code>foreground</code>
+|مطلوبة في الأيقونات المتكيفة
+موقع الصورة (png أو vector) نسبةً إلى مجلد المشروع. أو مرجع اللون.
+|-
+|<code>density</code>
+|مطلوبة
+تحدد كثافة الأيقونة
+|}
+=== الأيقونات المتكيفة Adaptive Icons ===
+لاستخدام الأيقونات المتكيفة، يجب تحديد الخاصيات <code>background</code> و <code>foreground</code> بدلاً من الخاصية <code>src</code>. إذ لا تُستخدَم الخاصية <code>src</code> في الأيقونات المتكيفة.
+مثال على أيقونات متكيفة يستخدم الصور:<syntaxhighlight lang="xml"><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></syntaxhighlight>'''ملاحظة''': في هذا المثال، ستُستخدَم الصورة الأمامية كأيقونة احتياطية في أجهزة أندرويد التي لا تدعم الأيقونات المتكيفة. يمكن تجاوز الأيقونة الاحتياطية عن طريق تعيين الخاصية <code>src</code>.
+مثال على أيقونات متكيفة يستخدم المتجهات:
+<syntaxhighlight lang="xml"><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></syntaxhighlight>'''ملاحظة''': في هذا المثال، يجب تحديد الخاصية <code>src</code> عند تعريف الخاصية <code>foreground</code> عبر متجهة أو لون.
+هذا مثال على لأيقونة متكيفة تستخدم المتجهات. أنشئ ملفا <code>res/values/colors.xml</code> في مجلد المشروع لتخزين تعريفات ألوان التطبيق.
+<syntaxhighlight lang="xml"><?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="background">#FF0000</color>
+</resources>
+</syntaxhighlight>في الملف <code>config.xml</code>، سنضيف <code>resource-file</code>لنسخ <code>colors.xml</code> إلى الموضع المناسب لتكون الألوان متاحة وقتَ البناء.
 <syntaxhighlight lang="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>
+</syntaxhighlight>'''أيقونات قياسية:'''
+<syntaxhighlight lang="xml">    <platform name="android">
          <!--
              ldpi    : 36x36 px
@@ سطر 50: / سطر 105: @@
          <icon src="res/android/xxhdpi.png" density="xxhdpi" />
          <icon src="res/android/xxxhdpi.png" density="xxxhdpi" />
-     </platform>‎</syntaxhighlight>انظر أيضا:
+     </platform>
+</syntaxhighlight>'''انظر أيضا:'''
 *[https://www.google.com/design/spec/style/icons.html دليل أيقونات أندرويد].
 *[http://developer.android.com/guide/practices/screens_support.html دعم عدة شاشات في أندرويد].
@@ سطر 56: / سطر 112: @@
 لا يمكن استعمال الأيقونات على منصة Browser.
 ==منصة iOS==
-<syntaxhighlight lang="xml"><platform name="ios">
+<syntaxhighlight lang="xml">    <platform name="ios">
          <!-- iOS 8.0+ -->
          <!-- iPhone 6 Plus  -->
@@ سطر 82: / سطر 138: @@
          <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" />
@@ سطر 87: / سطر 144: @@
          <!-- iPad Pro -->
          <icon src="res/ios/icon-83.5@2x.png" width="167" height="167" />
-     </platform>‎</syntaxhighlight>انظر أيضا:
+     </platform>
+</syntaxhighlight>انظر أيضا:
 *[https://developer.apple.com/library/content/qa/qa1686/_index.html أيقونات التطبيقات على آيباد (iPad) وآيفون (iPhone)].
 ==منصة ويندوز==
-في ويندوز، الأسلوب الموصى به لتحديد أيقونات التطبيق هو استخدام الخاصية <code>target</code>.<syntaxhighlight lang="xml"><platform name="windows">
+في ويندوز، الأسلوب الموصى به لتحديد أيقونات التطبيق هو استخدام الخاصية <code>target</code>.<syntaxhighlight lang="xml">    <platform name="windows">
          <icon src="res/windows/storelogo.png" target="StoreLogo" />
          <icon src="res/windows/smalllogo.png" target="Square30x30Logo" />
@@ سطر 99: / سطر 157: @@
          <icon src="res/windows/Square310x310Logo.png" target="Square310x310Logo" />
          <icon src="res/windows/Wide310x150Logo.png" target="Wide310x150Logo" />
-     </platform>‎</syntaxhighlight>تمثل الخاصية <code>src</code> مسار الأيقونة المراد إضافتها.
+     </platform></syntaxhighlight>تمثل الخاصية <code>src</code> مسار الأيقونة المراد إضافتها.
 تعالج منصة ويندوز أيقونات MRT (المناولة متعددة الأهداف) تلقائيًا، لذا إذا حددت المسار <code>src="res/windows/storelogo.png"‎</code>، فستُنسخ الملفات التالية في المجلد <code>images</code> الخاص بالتطبيق‏: <code>res/windows/storelogo.scale-100.png</code> و<code>res/windows/storelogo.scale-200.png</code>، ...إلخ.
@@ سطر 113: / سطر 171: @@
 </syntaxhighlight>
 *تعريف أيقونات لأجل قياسات أخرى غير القياسين <code>scale-100</code> و <code>scale-240</code> (وأي من مرشحات MRT الأخرى).
-من الممكن أيضًا تعريف الأيقونات باستخدام الخاصيتين <code>width</code> و <code>height</code>، لكن ذلك غير مستحسن:<syntaxhighlight lang="xml"><platform name="windows">
+من الممكن أيضًا تعريف الأيقونات باستخدام الخاصيتين <code>width</code> و <code>height</code>، لكن ذلك غير مستحسن:<syntaxhighlight lang="xml">    <platform name="windows">
          <icon src="res/windows/logo.png" width="150" height="150" />
          <icon src="res/windows/smalllogo.png" width="30" height="30" />
@@ سطر 126: / سطر 184: @@
          <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>‎</syntaxhighlight>انظر أيضا:
+     </platform></syntaxhighlight>انظر أيضا:
 *[https://msdn.microsoft.com/en-us/library/windows/apps/mt412102.aspx منصة ويندوز 10: دليل الأيقونات].
 *[https://msdn.microsoft.com/en-us/library/windows/apps/xaml/hh781198.aspx منصة ويندوز 8.1: التشكيلات وأحجام الأيقونات].
+== Electron ==
+=== تخصيص أيقونة التطبيق ===
+يمكن التصريح بالأيقونات المخصصة باستخدام العناصر <code><icon></code> في الملف <code>config.xml</code>. يمكن تعريف نوعين من الأيقونات، أيقونة التطبيق، وأيقونة مثبِّت الحزمة. يجب تعريف هذه الأيقونات في عقدة  منصة إلكترون  <code><platform name="electron"></code>.
+يمكن استخدام أيقونة واحدة للتطبيق والمُثبِّت معا شريطة ألا يقل حجمها عن 512 × 512 بكسل حتى تعمل في جميع أنظمة التشغيل.
+'''ملاحظة''': إذا لم يتم توفير أيقونة مخصصة، فستُستخدم أيقونات Apache Cordova الافتراضية.
+'''ملاحظة''': لا يعرض macOS الأيقونات المخصصة عند استخدام الأمر  ''<code>cordova run</code>''. إذ يستخدم افتراضيًا أيقونة ''Electron''.<syntaxhighlight lang="xml"> <platform name="electron">
+    <icon src="res/electron/icon.png" />
+</platform></syntaxhighlight>يمكنك تمرير أيقونة واحدة للتطبيق والمثبت معًا عبر تعيين الخاصية<code>target</code>. كما ذكرنا آنفا، يجب أن تكون مساحة صورة المثبت 512 × 512 بكسل حتى تعمل في جميع الأنظمة الأساسية.<syntaxhighlight lang="xml"> <platform name="electron">
+    <icon src="res/electron/app.png" target="app" />
+    <icon src="res/electron/installer.png" target="installer" />
+</platform></syntaxhighlight>بالنسبة للأجهزة التي تدعم دقة DPI العالية، مثل شاشة Retina الخاصة بآبل، يمكنك إنشاء مجموعة من الصور بنفس اسم الملف الأساسي ولكن مع لاحقة تمثل معامل المضاعفة.
+على سبيل المثال، إذا كان اسم ملف الصورة الأساسي <code>icon.png</code>، وكان يمثل الدقة القياسية، فسيتم التعامل مع <code>icon@2x.png</code> كصورة عالية الدقة عدد نقاطها في الإنش (dots-per-inch أو اختصارا DPI) مضاعف موازنة بالصورة الأساسية.
+* icon.png (256px x 256px)‎
+* icon@2x.png (512px x 512px)‎
+إذا كنت تريد دعم شاشات ذات كثافة DPI مختلفة، فيمكنك وضع صور بأحجام مختلفة في المجلد نفسه واستخدام اسم الملف بدون لواحق DPI. مثلا:<syntaxhighlight lang="xml"> <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></syntaxhighlight>
 ==مصادر==
 *[https://cordova.apache.org/docs/en/latest/config_ref/images.html صفحة Customize Icons في توثيق كوردوفا الرسمي.]