مولّد أيقونات المواقع
أنشئ أيقونات الموقع (Favicon) بكل المقاسات الشائعة من صورة واحدة.
واجهة الأداة نفسها باللغة الإنجليزية حاليًا، وتعمل بالكامل داخل متصفحك.
جارٍ تحميل الأداة…
ما هي أيقونة الموقع (Favicon)؟
أيقونة الموقع هي الرمز الصغير الذي يعرضه المتصفح في التبويب وقائمة الإشارات المرجعية والسجل وشريط العنوان. بدأت كملف favicon.ico واحد بحجم 16 بكسل في جذر الموقع، ثم توسعت كثيرًا: فالمواقع الحديثة تحتاج عدة مقاسات، لأن الأيقونة نفسها تظهر في التبويب، وعلى الشاشة الرئيسية للهاتف عندما يحفظ أحدهم الموقع، وفي نتائج البحث.
تنتج هذه الأداة ملفات PNG بمقاسات 16 و32 و48 بكسل لتبويبات المتصفح، و180 بكسل لأيقونة Apple على الشاشة الرئيسية في iOS، و192 و512 بكسل لأندرويد وملفات بيان تطبيقات الويب، وكلها في ملف ZIP واحد. والقيد الحقيقي هو التصميم لمقاس 16 بكسل: ففي هذا الحجم تختفي التفاصيل كليًا، ونادرًا ما يصمد شعار كامل. أما الحرف الواحد، أو العلامة البسيطة، أو الصورة الظلية القوية عالية التباين، فهي ما يُقرأ فعلًا.
لماذا أنشأنا هذه الأداة
كل موقع يحتاج إلى أيقونة. ودونها تعرض المتصفحات أيقونة صفحة فارغة تبدو غير مكتملة، ويصبح التنقل في تبويبات كثيرة مفتوحة صعبًا؛ فالمستخدمون يجدون تبويبك بأيقونته أكثر بكثير مما يجدونه بعنوانه.
والصورة المصدر عادةً شعار غير منشور، وهذا سبب كافٍ لعدم رفعه إلى مولّد يحتفظ بنسخة. أداتنا ترسم كل المقاسات على لوحة رسم داخل متصفحك، فيبقى الشعار على جهازك، دون حساب، وتُنتج الأيقونات فورًا دون انتظار رفع. لا شيء في مهمة تغيير المقاسات يحتاج إلى خادم، ولم نبنِ خادمًا لها.
نصائح وأخطاء شائعة
- صمّم لمقاس 16 بكسل أولًا؛ فإذا كانت العلامة غير مقروءة بهذا الحجم، فبسّطها بدلًا من تصغيرها.
- التباين العالي يصمد في المقاسات الصغيرة؛ أما التدرجات الدقيقة والخطوط الرفيعة فلا.
- إذا احتجت ملف favicon.ico للمتصفحات القديمة جدًا، فملف PNG بمقاس 32 بكسل مع وسم link يكفي لكل المتصفحات الحديثة.
- المتصفحات تخزّن الأيقونات مؤقتًا بشدة، فحدّث الصفحة تحديثًا كاملًا أو استخدم نافذة خاصة عند اختبار تغيير.
بداية سريعة: استخدام مولّد أيقونات المواقع
- حمّل صورة مصدر مربعة، بمقاس 512 بكسل أو أكبر يفضَّل.
- انتظر حتى تُنشأ كل المقاسات وتُعرض معاينتها.
- افحص المعاينات الصغيرة أولًا؛ فإذا كان مقاس 16 بكسل غير مقروء، فبسّط التصميم.
- نزّل ملف ZIP وضع الملفات في جذر موقعك.
- أضف وسوم link المناسبة إلى رأس صفحتك، ثم حدّث تحديثًا كاملًا لمسح الأيقونة المخزنة مؤقتًا.
جهّز التصميم أولًا بأداة قص الصورة لإطار مربع، وبأداة إزالة الخلفية للشفافية.
لماذا تهم الأيقونة أكثر مما يوحي حجمها
بمقاس 16×16 أو 32×32 بكسل تبدو أيقونة الموقع أمرًا تافهًا. لكنها تظهر في كل مكان يُشار فيه إلى موقعك: تبويبات المتصفح، والإشارات المرجعية، والسجل، واقتراحات البحث، وأيقونة الشاشة الرئيسية عندما يحفظ أحدهم موقعك على هاتفه. والأيقونة المميزة تجعل موقعك يبدو موثوقًا وسهل الإيجاد، أما أيقونة الكرة الأرضية الفارغة الافتراضية فتوحي بأنه «غير مكتمل».
التصميم على لوحة صغيرة جدًا
أكبر خطأ هو استخدام صورة مفصلة. ففي 16 بكسل تتحول التفاصيل إلى عجينة. والأيقونة الجيدة:
- بسيطة: شكل أو حرف أو رمز واحد، لا شعار كامل بنصه.
- عالية التباين: يجب أن تُقرأ على أشرطة التبويب الفاتحة والداكنة.
- مربعة: الأيقونات مربعة، فابدأ من مصدر مربع أو قُصّه مربعًا بأداة قص الصورة.
- عريضة: الخطوط الرفيعة تختفي في المقاسات الصغيرة، والأشكال السميكة المصمتة تصمد.
المقاسات التي تحتاجها
تستخدم الإعدادات الحديثة عدة مقاسات لتبدو الأيقونة حادة في كل مكان: 16×16 و32×32 لتبويبات المتصفح، و180×180 لأيقونات Apple على أجهزة iPhone، و192×192 و512×512 للشاشات الرئيسية في أندرويد. وهذه الأداة تنتج المجموعة كلها دفعة واحدة حتى لا تضطر إلى تغيير حجم كل واحدة يدويًا.
إضافتها إلى موقعك
ضع الملفات في جذر موقعك واربطها في وسم <head> في HTML بوسوم link المناسبة. ومعظم المواقع الثابتة تكتفي ببضعة مقاسات PNG وأيقونة apple-touch-icon.