ابدأ بصورة مربعة بسيطة
استخدم علامة شعار بسيطة لا صورة مفصّلة، لأنها ستُعرض صغيرة جدًا. فأيقونة التبويب لا يتجاوز عرضها 16 بكسل على شاشات كثيرة، فتختفي الخطوط الرفيعة والنصوص الصغيرة. وتعطي صورة مربعة بأبعاد 512 في 512 بكسل على الأقل أفضل النتائج، لأنه يمكن تصغيرها بنقاء إلى كل الأحجام الأخرى.
وإذا لم يكن شعارك مربعًا، فاقتصّه إلى الجزء الذي يعمل بمفرده بأفضل شكل، مثل حرف واحد أو رمز. والأفضل عادةً أن تُظهر جزءًا صغيرًا بوضوح من أن تُظهر الشعار كاملًا بشكل رديء. وتناسب الخلفية الشفافة معظم الحالات، لكن اللون الصلب قد يفيد في علامات التبويب الداكنة.
الملفات التي تحتاجها
- favicon.ico بنسخ 16 و32 و48 بكسل للمتصفحات الأقدم
- أيقونات PNG بحجم 32 و16 بكسل
- apple-touch-icon.png بحجم 180 في 180 لأجهزة iPhone وiPad
- أيقونات PNG بحجم 192 و512 بكسل لأجهزة Android وملفات manifest لتطبيقات الويب
ملف manifest للويب هو ملف JSON صغير يسرد أيقوناتك الأكبر لتستخدمها الهواتف عند حفظ الموقع على الشاشة الرئيسية.
قد تجد في بعض الأدلة توصية بأحجام أخرى. والمجموعة أعلاه تغطي الحالات الشائعة لعلامات تبويب المتصفح والإشارات المرجعية والشاشة الرئيسية في iOS وتثبيت Android، وتكفي عادةً لموقع عادي.
أضف شيفرة HTML
ضع الملفات في جذر موقعك وأضف وسوم link في head صفحاتك تشير إليها. ويمكن لمولّد أن يعطيك الوسوم الدقيقة لتلصقها. وأضف ملف manifest بوسم link آخر. وإذا نقلت الملفات إلى مجلد، فحدّث المسارات في الوسوم لتطابقه.
تسمّي المجموعة المعتادة من الوسوم ملف ico وملفَي PNG الصغيرين وapple-touch-icon وملف manifest. الصقها مرة واحدة في الترويسة المشتركة لموقعك بدل كل صفحة يدويًا، لتبقى كل الصفحات متسقة.
نصائح التصميم
اترك بعض الهامش الداخلي كي لا تقتطع الأقنعة المستديرة الحواف، لأن بعض الهواتف تقصّ الأيقونات إلى دوائر أو مربعات مستديرة. استخدم تباينًا قويًا وشكلًا بسيطًا. وافحص الأيقونة على سمات المتصفح الفاتحة والداكنة، فقد يختفي شعار داكن على خلفية شفافة في شريط تبويب داكن.
اختبر المسودة بعرضها بحجم 16 بكسل على شاشتك. فإذا لم تستطع معرفة ما هي بهذا الحجم، فبسّط الشكل، وأزل التفاصيل الدقيقة، وسمّك الخطوط.
مثال تطبيقي (توضيحي)
افترض أن موقعك لمخبز صغير وأن الشعار سنبلة قمح وتحتها اسم المحل. عند 16 بكسل لا يمكن قراءة الاسم. اقتصّ على السنبلة وحدها، وضعها على خلفية دافئة صلبة مع هامش، وصدّر مربعًا بأبعاد 512 في 512. ومن هذا المصدر الواحد تستطيع إنتاج كل الأحجام في القائمة أعلاه.
وإذا بدت المحاولة الأولى باهتة عند 16 بكسل، فجرّب حدًّا خارجيًا أوضح أو ألوانًا أقل وصدّر مجددًا. جولتان أو ثلاث أمر طبيعي.
خطوات العمل
- اختر علامة بسيطة أو ارسمها واقتصّها إلى مربع
- أضف هامشًا داخليًا، وخلفية صلبة عند الحاجة
- أنشئ المجموعة الكاملة من أحجام الأيقونات من المصدر الكبير
- ارفع الملفات إلى جذر موقعك
- الصق وسوم link في head صفحاتك
- أعد التحميل وجرّب في تبويب المتصفح، وامسح الذاكرة المؤقتة إن بقيت الأيقونة القديمة
أخطاء شائعة
- استخدام شعار عريض فيه نص، فيتحول إلى بقعة صغيرة
- البدء من صورة صغيرة وتكبيرها
- نسيان الهامش الداخلي، فتُقتطع الحواف على الهواتف
- ترك وسوم link قديمة تشير إلى ملفات غير موجودة
- توقع ظهور التغيير فورًا، بينما تخزّن المتصفحات الأيقونات مؤقتًا غالبًا لبعض الوقت
قائمة مراجعة سريعة
- مصدر مربع بحجم 512 بكسل أو أكثر
- favicon.ico مع ملفَّي PNG بحجم 16 و32 بكسل
- apple-touch-icon بحجم 180 بكسل
- أيقونات 192 و512 بكسل وملف manifest
- وسوم link مضافة في كل قالب صفحة
نفّذ ذلك مع DoneImg في متصفحك
افتح مولّد الأيقونات المصغّرة وأضف صورتك المربعة. فينشئ favicon.ico بأحجام 16 و32 و48 بكسل، وملفَّي PNG بحجم 16 و32 بكسل، وapple-touch-icon بحجم 180 بكسل، وملفَّي PNG بحجم 192 و512 بكسل، وملف manifest للويب ومقطع HTML، معًا في ملف ZIP واحد.
يتم كل شيء في متصفحك، فلا يُرفع شعارك إلى أي مكان. فكّ ضغط الملفات في جذر موقعك، والصق المقطع في head صفحتك، وجرّب النتيجة في تبويب.