لا يقتصر الأمر على أيقونة صغيرة في تبويب المتصفح — فليظهر الموقع بشكل صحيح في التبويبات، والإشارات المرجعية، والشاشة الرئيسية لـiOS، وكأيقونة لتطبيق ويب مثبَّت، يلزم مجموعة كاملة من الملفات بأحجام وصيغ مختلفة، لا ملف واحد.
لماذا يصعب استخدام حرف عربي واحد كأيقونة
نمط شائع لبناء أيقونة سريعة هو استخدام حرف واحد على خلفية ملوّنة، وهذا يعمل بسهولة مع الحروف اللاتينية. لكن الحرف العربي يتغيّر شكله بحسب موقعه في الكلمة — منفصل، أو في البداية، أو في الوسط، أو في النهاية — وأخذ صورة واحدة معزولة للحرف (شكله المنفصل عادة) قد لا يبدو مألوفًا بصريًا كما لو ظهر داخل كلمة. لذلك تميل العلامات التجارية العربية إلى استخدام رمز مبسّط بدلًا من حرف واحد.
دور وسوم <link> في <head>
تُربَط كل صيغة أيقونة بوسم <link rel="icon"> أو <link rel="apple-touch-icon"> خاص بها مع سمة sizes تحدد أبعادها، ليختار المتصفح من المجموعة المقدَّمة ما يناسب سياق العرض.
Web App Manifest لتطبيقات PWA
تحتاج تطبيقات الويب التقدمية إلى ملف site.webmanifest بصيغة JSON يسرد أيقونات بأحجام مختلفة إلى جانب اسم الموقع ولون السمة — من هناك بالضبط يأخذ Android الأيقونة عند تثبيت الموقع كتطبيق مستقل.
لماذا نحتاج هذا
- توليد مجموعة كاملة من الأيقونات بالأحجام المطلوبة من صورة مصدر واحدة.
- الحصول على كود HTML جاهز لوسوم <link> للصقه في <head>.
- التأكد من ظهور الموقع بشكل صحيح عند إضافته إلى الشاشة الرئيسية لجهاز محمول.