ما هي الأيقونة من نوع maskable
عندما يثبّت أحدهم تطبيق ويب، يعرض المشغّل أيقونته بالشكل الخاص بالمشغّل: دائرة في هاتف، ومربع بزوايا مستديرة أو قطرة في هاتف آخر. أما كيف توضع الأيقونة العادية ذات الخلفية الشفافة داخل هذا الشكل فأمر يعود إلى المنصة. الأيقونة من نوع maskable مصنوعة للقص: تملأ المربع بالكامل بخلفيتها الخاصة، لذا فأي شكل يقصه المشغّل يكون أيقونة كاملة وملوّنة.
يحدد web app manifest هذا الفرق بالعنصر purpose في كل أيقونة. تذكر مواصفات W3C ثلاثة أغراض، any وmaskable وmonochrome، والأيقونة التي لا تحمل purpose تُعدّ any.
المنطقة الآمنة: دائرة نصف قطرها 40 %
تحدد المواصفات المكان الذي يكون فيه التصميم آمنًا من أي قناع: «دائرة مركزها في منتصف الأيقونة ونصف قطرها 2/5 (40%) من حجم الأيقونة». في أيقونة بحجم 512 بكسل، هذه دائرة قطرها 410 بكسل في المنتصف. ويصف MDN المنطقة نفسها بأنها دائرة قطرها 80 % من الأيقونة، ويحذّر web.dev من أن الحافة الخارجية، نحو 10 % من كل جانب، قد تُقص.
تعرض الصورة الأيقونة من نوع maskable من الحزمة النموذجية أدناه. النسخة الأولى مرسوم عليها المنطقة الآمنة؛ والثلاث الأخرى هي الملف نفسه تحت قناع دائري، وقناع مربع بزوايا مستديرة، وقناع على شكل قطرة. ولأن العلامة تبقى داخل الدائرة، فكل قناع يتركها كاملة، ولا يتغير إلا شكل الخلفية.
يضع مولد favicon التصميم نفسه، لا المربع المحيط به، داخل الدائرة، مطروحًا منه الهامش الذي تختاره. لذلك يمكن للعلامة الدائرية أن تملأ المنطقة الآمنة كلها تقريبًا، بينما تصبح الصورة المربعة أصغر، لأن زواياها يجب أن تتسع داخل الدائرة أيضًا.
purpose any أم maskable: لماذا ملفان
يمكن للأيقونة أن تعلن "purpose": "any maskable"، ويستخدم مقال web.dev عن ملف manifest هذه الصيغة. لكن مقال web.dev نفسه عن أيقونات maskable ينصح بعدم ذلك: فالأيقونة ذات الهامش المخصص للقص تبدو صغيرة جدًا حيث تُعرض دون قص. المصادر مختلفة، والملفان يتجنّبان هذه المقايضة. تحتفظ أيقونة any بشفافيتها ويملأ تصميمها المربع؛ وأيقونة maskable لها خلفية تمتد حتى الحواف والتصميم داخل المنطقة الآمنة.
| الغرض | الخلفية | التصميم | أين تظهر |
|---|---|---|---|
any |
شفافة | يملأ المربع، مطروحًا منه الهامش | أي مكان تُعرض فيه الأيقونة دون قص |
maskable |
لون خلفيتك، من حافة إلى حافة | داخل دائرة 40 % | المشغّلات التي تقص الأيقونات على شكل |
ملف manifest بالنوعين
هذا هو ملف site.webmanifest من الحزمة النموذجية. مسارات الأيقونات نسبية: فالمواصفات تحل src، مثل start_url، بالنسبة إلى عنوان ملف manifest نفسه، لذا تعمل الأيقونات من أي مجلد ما دامت بجانب ملف manifest.
{
"name": "png2svg.art",
"short_name": "png2svg",
"icons": [
{
"src": "icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
],
"theme_color": "#0a2d8f",
"background_color": "#e8efff",
"display": "standalone",
"start_url": "/"
}
اربطه من كل صفحة باستخدام <link rel="manifest" href="/site.webmanifest">. تذكر المواصفات .webmanifest كامتداد الملف المسجّل، وتشجّع على إرساله بالنوع application/manifest+json، مع أن أي نوع JSON مقبول.
الأحجام ليست اعتباطية. يقول دليل MDN عن قابلية التثبيت، المحدّث في سبتمبر 2026، إنه من بين شروط أخرى، لا تثبّت متصفحات Chromium تطبيق الويب إلا إذا كان ملف manifest يحتوي على اسم أو اسم مختصر، وstart_url، ووضع display، وأيقونات بحجم 192 و512 بكسل، وكان الموقع يُقدَّم عبر HTTPS. أما Safari فيعمل بشكل مختلف: فقد كتب فريق WebKit بخصوص Safari 26 أنه لا توجد شروط لقابلية التثبيت، وأن أيقونات ملف manifest تُستخدم عندما يحددها الموقع. ويقترح MDN أيضًا البدء من تصميم مربع لا يقل عن 1024 بكسل؛ فالصورة النقطية الصغيرة المكبّرة إلى 512 بكسل لا تكتسب تفاصيل.
كيف تختبر أيقونة maskable
في Chrome، افتح DevTools، وانتقل إلى Application → Manifest، وحدّد خيار Show only the minimum safe area for maskable icons. سيعرض قسم الأيقونات حينها كل أيقونة maskable مقصوصة على المنطقة الآمنة: إذا كان أي شيء مهم مفقودًا هناك، فقد يقصه المشغّل أيضًا. توثّق مستندات Chrome هذا الخيار. ويشير web.dev أيضًا إلى Maskable.app، وهو موقع لطرف ثالث يمكنك فيه معاينة الأيقونة تحت عدة أقنعة. والاختبار النهائي هو تطبيق مثبّت على هاتف حقيقي.
مثال حقيقي للتنزيل
الأيقونات أعلاه من تشغيل واحد لمولد favicon على علامة هذا الموقع نفسه (ملف SVG من مستودعنا، وليس ملفًا رفعه أحد)، بهامش 8 % وخلفية #e8efff. هذه هي الملفات التي تصنعها الأداة بالضبط. نزّل الحزمة النموذجية (ZIP) لترى كل ملف مع ملف README الخاص به. ولجانب تبويب المتصفح من الحزمة نفسها، اقرأ favicon بصيغة SVG أم PNG أم ICO؟.