كيفية إنشاء أيقونة favicon لموقعك (كل المقاسات)

أيقونة favicon هي الأيقونة الصغيرة التي تظهر في علامات تبويب المتصفح والإشارات المرجعية واختصارات الشاشة الرئيسية. يتطلب إعدادها بشكل صحيح توليد عدة مقاسات وربطها بشكل صحيح في HTML، لكن العملية بسيطة بمجرد معرفة المتطلبات.

ما هي أيقونة favicon؟

«Favicon» اختصار لـ «favorites icon» أي أيقونة المفضلة. كانت في الأصل أيقونة بحجم 16×16 بكسل لمفضلة Internet Explorer. أما المتصفحات والأجهزة الحديثة فتتطلب مقاسات عدة:

| الملف | المقاس | الاستخدام |
|------|------|----------|
| favicon.ico | 16×16، 32×32 | علامات تبويب المتصفح، شريط مهام Windows |
| favicon-16x16.png | 16×16 | أيقونات التبويب الصغيرة |
| favicon-32x32.png | 32×32 | علامات التبويب القياسية |
| apple-touch-icon.png | 180×180 | اختصار الشاشة الرئيسية في iOS |
| android-chrome-192x192.png | 192×192 | الشاشة الرئيسية في Android |
| android-chrome-512x512.png | 512×512 | شاشة البدء في Android، تطبيقات PWA |

توليد كل مقاسات favicon باستخدام ZapFile

1. افتح مولّد favicon في ZapFile
2. ارفع صورة مربعة (يُفضَّل PNG، بحد أدنى 512×512 بكسل)
3. ولّد المقاسات
4. نزّل ملف ZIP الذي يحتوي على كل المقاسات وملف .ico

إضافة أيقونات favicon إلى موقعك

أضف هذه الوسوم إلى قسم في ملف HTML:

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

لتطبيقات الويب التقدمية (PWA)، أضف أيضًا ملف site.webmanifest:

{
  "name": "Your App",
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

تصميم أيقونة favicon جيدة

اجعلها بسيطة

استخدم تباينًا عاليًا

ابدأ بمقاس 512×512

أيقونات SVG (المتصفحات الحديثة)

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

أخطاء شائعة

• استخدام صورة مصدر منخفضة الدقة: ابدأ دائمًا بمقاس 512 بكسل أو أكبر
• توفير ملف .ico فقط: تحتاج الأجهزة الحديثة إلى مقاسات PNG؛ فملف ICO وحده يترك iOS وAndroid دون أيقونة مناسبة
• نسيان التخزين المؤقت: بعد تحديث الأيقونة تحتفظ المتصفحات بالقديمة بإصرار. أضف معامل إصدار (favicon.ico?v=2) أثناء التطوير لفرض التحديث

الخلاصة

• تتطلب أيقونات favicon عدة مقاسات للمتصفحات وiOS وAndroid وPWA
• ابدأ بصورة PNG مربعة بمقاس 512×512 وولّد كل المقاسات دفعة واحدة
• ينتج مولّد favicon في ZapFile كل المقاسات المطلوبة وملف ICO في ثوانٍ