طريقة الاستخدام
- اختر مصدر الأيقونة: صورة، أو حروف أو رمز تعبيري على لون.
- اختر الصورة، أو اكتب الحروف أو الرمز التعبيري. واضبط لون الخلفية ولون الحروف.
- اضبط لون السمة واسم الموقع، ثم انقر إنشاء الأيقونات.
- نزّل ملف ZIP. ضع الملفات في المجلد الرئيسي لموقعك، والصق وسوم HTML في رأس كل صفحة.
الملفات وأحجامها
favicon.ico يحمل ثلاث صور بمقاسات 16 و32 و48 بكسل، فيجد شريط المتصفح والمفضلة وWindows المقاس الذي يناسبه. وapple-touch-icon.png بمقاس 180 بكسل للشاشة الرئيسية لجهاز iPhone أو iPad. وandroid-chrome-192x192.png وandroid-chrome-512x512.png هما أيقونتا Android المذكورتان في ملف البيان. وsite.webmanifest يسمّي التطبيق ويحدد ألوانه.
الشفافية والخلفية
تحتفظ favicon بالمناطق الشفافة، فيظهر الشعار على أي لون يعرضه المتصفح. أما أيقونات Apple وAndroid فتُملأ بلون الخلفية، لأن الزاوية الشفافة لأيقونة Apple touch تظهر سوداء على iPhone وiPad.
أين تُوضع الملفات
ضعها في المجلد الرئيسي لموقعك، حتى تعمل العناوين /favicon.ico و/site.webmanifest. وتحتفظ المتصفحات بالأيقونات في ذاكرتها مدة طويلة، فبعد أي تغيير أضف رقم نسخة إلى الرابط، أو امسح ذاكرة المتصفح، لترى الأيقونة الجديدة.
مثال: الحروف FT على أزرق داكن
اختر حروف أو رمز تعبيري على لون، واكتب FT، واترك خلفية الأزرق الداكن. ترسم الأداة الحروف في وسط مربع بحواف مستديرة، وتضبطها على المربع، فتبقى مقروءة حتى في أيقونة 16 بكسل.
الأسئلة الشائعة
هل تُرفع صورتي عند إنشاء الأيقونات؟
لا. تُرسم الأيقونات في متصفحك، وتُضغط في ملف ZIP على جهازك. يمكنك التحقق بإيقاف اتصال الإنترنت بعد تحميل الصفحة ثم إنشاء مجموعة أيقونات.
أي ملف يستخدمه المتصفح لأيقونة علامة التبويب؟
تستخدم المتصفحات favicon.ico، أو وسم رابط في الصفحة يشير إلى ملف PNG أو SVG. والوسوم التي تصنعها الأداة تذكر favicon.ico وأيقونة Apple، فيجد كل متصفح أيقونة بالمقاس المناسب.
لماذا تبدو favicon ضبابية عند 16 بكسل؟
الأيقونة الصغيرة تملك بكسلات قليلة جداً، فالخطوط الدقيقة والحروف الصغيرة تتمدد. استخدم شكلاً بسيطاً بخطوط سميكة، أو حرفين على الأكثر، وتحقق من الصورتين 16 و32 بكسل في ملف ICO.
لماذا لأيقونات Apple خلفية ملونة؟
الزاوية الشفافة لأيقونة Apple touch تظهر سوداء على iPhone وiPad. لذلك تملأ الأداة المربع كله بلون الخلفية الذي تختاره.
ماذا أضع في رأس الصفحة؟
الصق الأسطر الأربعة من مربع وسوم HTML في عنصر head لكل صفحة. وهي تربط favicon.ico وأيقونة Apple وملف البيان ولون السمة.
كيف يُستخدم ملف البيان لتطبيق الويب؟
ضع site.webmanifest في المجلد الرئيسي لموقعك. يقرأه المتصفح حين يثبّت الزائر الموقع كتطبيق، فهو يسمّي التطبيق ويعطي اسمه القصير وألوانه، ويذكر أيقونتي Android.
المصادر
- MDN (باللغة الإنجليزية): عنصر link، بما فيه روابط الأيقونة والبيان
- MDN (باللغة الإنجليزية): ملف البيان لتطبيق الويب
- Microsoft Learn (باللغة الإنجليزية): Icons، بنيتا ICONDIR وICONDIRENTRY في ملف ICO
آخر مراجعة للأرقام والنص: الثلاثاء، 30 جمادى الأولى 1448 بعد الهجرة.