كيف تنشئ favicon (كل الأحجام)

ما هو favicon

favicon هي الأيقونة الصغيرة في التبويبات والمفضلة والتاريخ، وعلى شاشة الجوال عند حفظ الموقع. تفصيل صغير يوحي بالاحترافية ويساعد على التعرّف.

أنشئ المجموعة مع مولّد favicon.

الأحجام المهمة

أضف HTML

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

استخدم manifest PWA لتغطية Android والتطبيقات القابلة للتثبيت.

نصائح التصميم

• أشكال بسيطة — الأيقونة الصغيرة لا تحتمل التفاصيل.
• تباين عالٍ لتبقى واضحة عند 16 بكسل.
• اختبرها عند 16 بكسل قبل الالتزام.
• تجنّب النص؛ استخدم رمزًا أو حرفًا.
• استخدم لون علامتك.

صورة المشاركة منفصلة

favicon ليست صورة Open Graph (المعاينة الكبيرة على الشبكات). أنشئ صورة 1200×630 مع مولّد صورة OG.

حل المشاكل

1. لا تظهر — حدّث بقوة وتحقّق من المسار.
2. ضبابية — قدّمت حجمًا صغيرًا فقط.
3. أيقونة خاطئة على iOS — apple-touch-icon مفقودة.
4. لا شيء على Android — لا manifest أو أيقونات 192/512 ناقصة.

أنشئ المجموعة

ألقِ شعارًا مربعًا في المولّد وحمّل كل الأحجام دفعة واحدة — مجانًا وبخصوصية.