الأيقونات المفضلة وElectron/Tauri: تعزيز هوية تطبيق سطح المكتب الخاص بك

إذاً أنت بنيت تطبيق ويب والآن تريد تحزيمه كتطبيق سطح مكتب. تفتح Electron أو Tauri، تشغل أمر البناء، و... ها هي تلك الأيقونة الافتراضية العامة تحدق فيك. ليس بالضبط المظهر الاحترافي الذي كنت تسعى إليه.

إليك الأمر: أيقونات تطبيقات سطح المكتب تعمل بشكل مختلف تماماً عن أيقونات الويب المفضلة. ذلك الملف PNG الصغير بحجم 32×32 الموجود في مجلد public؟ لن يكفي. تحتاج تطبيقات سطح المكتب صيغاً متعددة وأحجاماً محددة وملفات خاصة بكل منصة لا يفكر فيها معظم مطوري الويب.

لماذا أيقونتك المفضلة غير كافية

عندما يعمل تطبيق الويب في المتصفح، تظهر الأيقونة المفضلة في التبويب. بسيط. لكن عندما تغلف نفس التطبيق في Electron أو Tauri، فجأة تحتاج أيقونات لـ:

شريط عنوان نافذة التطبيق
الـ Dock (macOS) أو شريط المهام (Windows)
المثبّت ومعالج الإعداد
قائمة "إضافة/إزالة البرامج"
ارتباطات الملفات
البحث في Spotlight ومعاينات Finder

كل سياق من هذه يتوقع أحجاماً مختلفة وأحياناً صيغاً مختلفة تماماً. لهذا السبب يترك ملف أيقونة واحد تطبيقك يبدو غير مكتمل.

الصيغ الثلاث التي تحتاجها فعلاً

ICO لـ Windows

يستخدم Windows صيغة ICO، وهي في الواقع حاوية تحمل أحجاماً متعددة في ملف واحد. يجب أن يتضمن ملف ico طبقات لـ 16 و24 و32 و48 و64 و256 بكسل. طبقة 256 بكسل مهمة بشكل خاص لأن Windows يستخدمها لشاشات عالية DPI وعرض الأيقونات الكبيرة.

خطأ شائع هو توليد ico بطبقة 32 بكسل فقط. يعمل لشريط المهام، لكن تطبيقك سيبدو مشوشاً في قائمة البدء ومستكشف الملفات.

ICNS لـ macOS

صيغة Apple ICNS مشابهة في المفهوم لـ ICO — تجمع أحجاماً متعددة معاً. لكن متطلبات الحجم أكثر صرامة. تحتاج 16×16 و32×32 و128×128 و256×256 و512×512 بإصدارات 1x و2x لشاشات Retina.

يمكن لأمر iconutil على macOS تحويل مجلد منظم من ملفات PNG إلى ملف icns، لكن بصراحة، الأدوات الآلية أسهل.

PNG لـ Linux

بيئات سطح المكتب في Linux أكثر مرونة. معظمها يقبل مجموعة ملفات PNG بأحجام قياسية (128، 256، 512). بعض تكوينات electron-builder وTauri تشير ببساطة إلى ملف PNG واحد عالي الدقة وتترك النظام يتعامل مع التكبير.

تكوين Electron

إذا كنت تستخدم electron-builder (وهو ما يستخدمه معظم مشاريع Electron)، يذهب تكوين الأيقونة إلى package.json أو electron-builder.yml:

{
  "build": {
    "appId": "com.yourapp.id",
    "icon": "build/icon",
    "mac": {
      "icon": "build/icon.icns"
    },
    "win": {
      "icon": "build/icon.ico"
    },
    "linux": {
      "icon": "build"
    }
  }
}

يبحث electron-builder عن ملفات الأيقونة في مجلد buildResources (الافتراضي هو build). ضع ملفات icon.icns وicon.ico ومجموعة ملفات PNG هناك، وستكون جاهزاً.

لـ Electron Forge، العملية مشابهة لكن تستخدم صيغة تكوين مختلفة. يتعامل ملف forge.config.js مع مسارات الأيقونات لكل منصة.

تكوين Tauri

يتبع Tauri نهجاً مختلفاً قليلاً. أمر tauri icon يولّد جميع الصيغ المطلوبة من صورة مصدر واحدة:

npm run tauri icon ./app-icon.png

هذا ينشئ مجلد الأيقونات بالكامل مع ملفات منسقة بشكل صحيح لجميع المنصات. يذهب الإخراج إلى src-tauri/icons/ افتراضياً.

يشير tauri.conf.json إلى هذه الأيقونات في قسم bundle:

{
  "bundle": {
    "icon": [
      "icons/32x32.png",
      "icons/128x128.png",
      "icons/128x128@2x.png",
      "icons/icon.icns",
      "icons/icon.ico"
    ]
  }
}

بسّط Tauri 2.0 هذا التكوين — مفتاح bundle الآن في المستوى الأعلى بدلاً من أن يكون متداخلاً تحت tauri.

أيقونة الويب لا تزال مهمة

إليك شيء يربك الناس: حتى بعد إعداد أيقونات سطح المكتب، لا تزال أيقونة الويب مستخدمة داخل التطبيق. عندما يحمّل تطبيق Electron أو Tauri محتوى الويب الخاص بك، يطلب webview ما يزال favicon.ico تماماً كما يفعل المتصفح.

هذا يعني أنك تحتاج كليهما:

أيقونات تطبيق سطح المكتب (icns، ico، png) لواجهة نظام التشغيل
أيقونات الويب المفضلة لمحتوى webview الداخلي

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

توليد الأيقونات من مصدر واحد

لا أحد يريد إنشاء أكثر من 15 متغيراً يدوياً. إليك أدوات تعمل فعلاً:

لـ Electron:

electron-icon-builder - أعطه PNG بحجم 1024×1024 ويخرج كل ما تحتاج
electron-icon-maker - وظائف مشابهة، حزمة npm

لـ Tauri:

أمر tauri icon المدمج - الخيار الأسهل إذا كنت تستخدم Tauri CLI بالفعل

للأغراض العامة:

Real Favicon Generator - قائم على الويب، يتعامل مع أيقونات الويب وسطح المكتب
IconVectors - يحول SVG واحد إلى مجموعات ICO وICNS وPNG

المفتاح هو البدء بصورة مصدر 1024×1024 بكسل على الأقل. SVG أفضل لأنه يتكبّر بشكل مثالي.

اعتبارات التصميم

تعيش أيقونات سطح المكتب في سياقات مختلفة عن أيقونات الويب. بعض الأشياء التي يجب وضعها في الاعتبار:

البساطة تتكبّر للأسفل. أيقونتك بحجم 512 بكسل قد تبدو رائعة، لكن تحقق كيف تُعرض عند 16 بكسل. التفاصيل المعقدة تصبح بقعاً ضبابية.

اختبر على خلفيات فعلية. أيقونات dock في macOS تجلس على خلفية شفافة. أيقونات شريط المهام في Windows قد تكون على سمات فاتحة أو داكنة. تأكد من أن أيقونتك لديها تباين كافٍ في كلا السيناريوهين.

احترم أعراف المنصة. أيقونات macOS غالباً لديها ظلال خفيفة وزوايا مدورة. أيقونات Windows تميل لأن تكون أكثر استواءً. ليس عليك اتباعها بالضبط، لكن الوعي بها يساعد تطبيقك على أن يبدو أصلياً.

فكر في المتغيرات القابلة للقناع. بعض السياقات (خاصة Android إذا كنت تعمل أيضاً على الموبايل) ستقص أيقونتك إلى دائرة أو مربع مدور. صمم مع مناطق آمنة في الاعتبار.

المشاكل الشائعة والإصلاحات

الأيقونة لا تتحدث بعد إعادة البناء؟ كل من Electron وTauri يخزنان الأيقونات مؤقتاً بقوة أثناء التطوير. جرب مسح مجلد مخرجات البناء بالكامل وإعادة البناء.

أيقونات مشوشة على Windows؟ ملف ico يفتقد طبقة 256 بكسل. أعد التوليد بأداة تتضمن جميع الأحجام المطلوبة.

macOS يعرض أيقونة عامة؟ ملف icns قد يكون تالفاً أو في الموقع الخطأ. شغّل iconutil -c icns YourIcon.iconset -o icon.icns لإعادة التوليد من الصفر.

أيقونة Linux لا تظهر في dock؟ بعض بيئات سطح المكتب تحتاج الأيقونة مسجلة عبر ملف .desktop. تحقق من تكوين electron-builder أو Tauri للإعدادات الخاصة بـ Linux.

تجميع كل شيء معاً

إعداد أيقونة مكوّن بشكل صحيح لتطبيق سطح مكتب متعدد المنصات يبدو هكذا:

build/
├── icon.icns          # macOS application icon
├── icon.ico           # Windows application icon
├── icon.png           # 512px for Linux
├── 256x256.png        # Additional Linux sizes
└── 128x128.png

بالإضافة إلى أيقونات الويب العادية في مجلد public أو static لمحتوى webview.

الجهد الإضافي يؤتي ثماره. الأيقونة المصقولة تشير للمستخدمين أن تطبيقك مكتمل واحترافي — وليس مجرد صفحة ويب ملفوفة في غلاف. إنها من أول الأشياء التي يراها الناس، والانطباعات الأولى مهمة.

المراجع

Electron Forge Icon Guide - الوثائق الرسمية لإنشاء وإضافة أيقونات لتطبيقات Electron
electron-builder Icons - مرجع تكوين إعداد الأيقونات لـ electron-builder
Tauri App Icons - وثائق Tauri 2.0 لتوليد وتكوين الأيقونات
Apple Icon Image Format - مرجع Wikipedia لمواصفات صيغة ICNS
Define Your App Icons - MDN - دليل Mozilla لمتطلبات أيقونات التطبيقات لـ PWA