لون السمة وأيقونات التطبيق

يحدد الوسم <meta name="theme-color" content="#1f2937"> لون شريط عنوان المتصفح على الأجهزة المحمولة، ولون شريط العنوان في تطبيقات PWA على أجهزة سطح المكتب. ويمنح الصفحة مظهرًا متقنًا شبيهًا بالتطبيقات دون تغيير أي محتوى.

وفّر ألوانًا منفصلة للوضعين الفاتح والداكن: <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">، ثم أضف وسمًا ثانيًا باللون الداكن. يختار المتصفح الوسم المطابق استنادًا إلى تفضيل نظام التشغيل لدى المستخدم.

يحدّد theme_color في manifest اللون عند تشغيل التطبيق باعتباره PWA مثبتًا (شريط عنوان النافذة المستقلة). طابقه مع وسم meta الخاص بلون السمة داخل الصفحة للحفاظ على الاتساق؛ فعند التشغيل في المتصفح أو باعتباره تطبيقًا مثبتًا، تظل الهوية المرئية متطابقة.

يمثّل <link rel="icon" href="/favicon.ico"> أيقونة تبويب المتصفح الكلاسيكية. ورغم الاسم، تفضّل المتصفحات الحديثة PNG أو SVG على ICO. وفّر ملف PNG بأبعاد 32x32 عبر <link rel="icon" type="image/png" sizes="32x32" href="/icon-32.png"> للحصول على عرض أوضح.

تقبل المتصفحات الحديثة أيقونات Favicon بصيغة SVG: <link rel="icon" type="image/svg+xml" href="/icon.svg">. فهي تظل واضحة مهما كان حجمها، كما أن حجم ملفها صغير جدًا. استخدمها للشعارات المتجهة، وأضف نسخة احتياطية بصيغة PNG للمتصفحات التي لا تدعم أيقونات Favicon بصيغة SVG.

تستخدم الشاشة الرئيسية في iOS أيقونة apple-touch-icon: <link rel="apple-touch-icon" href="/apple-touch-icon.png">. وفّر ملف PNG بأبعاد 180x180. لا يقرأ iOS أيقونات manifest عند تثبيت التطبيق على الشاشة الرئيسية؛ لذلك يجب توفير رابط apple-touch-icon.

تقرأ عمليات تثبيت Android الأيقونات من مصفوفة icons في manifest. أدرج ملفات PNG بأبعاد 192x192 (للشاشة الرئيسية) و512x512 (لشاشة البدء ودرج التطبيقات). أضف نسخة ذات قيمة الغرض "maskable" حتى يتمكن Android من قص الأيقونة لتطابق شكل أيقونة الشاشة الرئيسية، مثل الدائرة أو المربع ذي الزوايا المستديرة أو المربع.

يجب أن يظل المحتوى الأساسي للأيقونات القابلة للقناع داخل منطقة آمنة مركزية تبلغ 80%؛ فقد تُقص نسبة 20% الخارجية وفقًا لشكل القناع الذي يستخدمه الجهاز. استخدم أدوات مثل maskable.app لمعاينة الأيقونة بأشكال أقنعة مختلفة أثناء التصميم.

للمربع المثبت في Windows 8/10: <meta name="msapplication-TileImage" content="/tile.png"> و<meta name="msapplication-TileColor" content="#1f2937">. أصبحت هذه الأيقونات أقل أولوية من المنصات الأخرى، لكنها لا تزال مفيدة لمستخدمي Windows الذين يثبتون المواقع.

في IE/Edge القديمين، يشير <meta name="msapplication-config" content="/browserconfig.xml"> إلى ملف XML يحتوي على أيقونات مربعات بأحجام متعددة. لم يعد هذا مهمًا إلى حد كبير اليوم؛ ويمكن للمواقع الجديدة تجاهل browserconfig.xml دون عواقب.

لعلامة التبويب المثبتة في Safari على macOS: <link rel="mask-icon" href="/safari-icon.svg" color="#1f2937">. يجب أن تكون SVG أيقونة بلون واحد، إذ تُستبدل قيمتها بسمة color. وتُستخدم هذه الأيقونة فقط في ميزة علامات التبويب المثبتة في Safari على macOS.

استخدم realfavicongenerator.net لإنشاء جميع تنويعات الأيقونات من مصدر واحد. اختبر على جهاز iOS حقيقي (أضف الموقع إلى الشاشة الرئيسية) وعلى Android (ثبّت التطبيق من قائمة المتصفح) للتحقق من ظهور الأيقونات بعد قصّها بشكل صحيح ومن عدم ظهورها متكسرة البكسلات.

ما الغرض من قيمة الغرض "maskable" للأيقونة في manifest الخاص بتطبيق ويب؟

يغيّر theme-color (مع تنويعات استعلامات الوسائط) لون شريط العنوان؛ بينما يغيّر theme_color في manifest لون شريط عنوان التطبيق المثبت. تشمل الأيقونات Favicons بصيغتي SVG وPNG، وapple-touch-icon لنظام iOS بأبعاد 180x180، وأيقونات manifest لنظام Android بأبعاد 192 و512 مع نسخة maskable، وmask-icon الخاص بـ Safari بصيغة SVG أحادية اللون، وmsapplication-TileImage لمربعات Windows المثبتة. استخدم realfavicongenerator.net لإنشاء جميع التنويعات من مصدر واحد.