الجواب المختصر: تحتاج أيقونة الموقع إلى 16×16 و32×32 و48×48 بكسل بصيغة .ico لتبويبات المتصفح واختصارات ويندوز، و 180×180 بكسل لأيقونة Apple Touch في iOS، و 192×192 و512×512 بكسل بصيغة PNG لمتصفح Chrome على أندرويد ولتطبيقات الويب التقدّمية. وهذه الستة تغطي كل السياقات الحديثة — و الجدول الكامل بالمقاسات الستة عشر موجود أدناه مباشرة.
كلمة favicon اختصار لـ «favorite icon»، أي الأيقونة التي تحفظها المتصفحات مع المفضّلة. وقد تجاوز المفهوم ذلك بكثير اليوم: فالأيقونة تظهر في تبويبات المتصفح، وفي شريط العناوين، وفي اختصارات سطح المكتب، وعلى الشاشة الرئيسية لهواتف iOS وأندرويد، وفي نتائج Google، وأيقونةً لتطبيقات الويب التقدّمية. ولكل سياق منها مقاس مختلف.
وأشيع الأخطاء إنشاء ملف favicon.ico واحد بمقاس 16×16 بكسل واعتبار المهمة منتهية. فعلى شاشة Retina أو على الآيفون ستظهر هذه الأيقونة ضبابية. والحل توليد مجموعة كاملة من المقاسات — وهو ما يبدو معقّدًا، لكنه لا يستغرق سوى ثوانٍ بالأداة المناسبة.
ما ملف .ico ومتى تستعمله
صيغة .ico هي الصيغة الأصلية لأيقونة الموقع، وقد ابتكرتها Microsoft في التسعينيات. ولها خاصية مميزة: إذ يمكنها أن تحوي مقاسات متعددة داخل ملف واحد — 16×16 و32×32 معًا مثلًا. ويختار المتصفح المقاس الأنسب لكل سياق.
ويبقى ملف favicon.ico ضروريًا في 2026 لسبب بعينه: فالمتصفحات القديمة وبعض عناكب البحث تحاول تلقائيًا الوصول إلى الملف على المسار /favicon.ico في جذر الموقع. وإن لم يكن موجودًا فسينتج عن ذلك خطأ 404 لا لزوم له في سجلات الخادم. ولهذا، حتى لو استعملت PNG الحديث في كل شيء، يُستحسن الاحتفاظ بملف favicon.ico في الجذر.
جدول كامل بمقاسات أيقونة الموقع
هذه قائمة بكل المقاسات التي ينبغي أن تغطيها أيقونة موقع كاملة في 2026:
| المقاس | الصيغة | أين يُستعمل |
|---|---|---|
| 16 × 16 px | .ico / PNG | تبويب المتصفح (المقاس الافتراضي) |
| 32 × 32 px | .ico / PNG | اختصار سطح المكتب في ويندوز، والتبويبات على شاشات HiDPI |
| 48 × 48 px | .ico / PNG | اختصار في مستكشف ويندوز |
| 57 × 57 px | PNG | آيفون (iOS 1–6، شاشات غير Retina) |
| 60 × 60 px | PNG | آيفون (iOS 7 فما فوق، شاشات غير Retina) |
| 72 × 72 px | PNG | آيباد (iOS 1–6، شاشات غير Retina) |
| 76 × 76 px | PNG | آيباد (iOS 7 فما فوق، شاشات غير Retina) |
| 96 × 96 px | PNG | اختصار في Chrome على أندرويد |
| 114 × 114 px | PNG | آيفون Retina (iOS 1–6) |
| 120 × 120 px | PNG | آيفون Retina (iOS 7 فما فوق) |
| 144 × 144 px | PNG | آيباد Retina (iOS 1–6)، ومربّع ويندوز 8 |
| 152 × 152 px | PNG | آيباد Retina (iOS 7 فما فوق) |
| 167 × 167 px | PNG | آيباد برو (iOS 9 فما فوق) |
| 180 × 180 px | PNG | آيفون 6 بلس والإصدارات الأحدث |
| 192 × 192 px | PNG | Chrome على أندرويد، وتطبيقات PWA (manifest.json) |
| 512 × 512 px | PNG | شاشة البدء في Chrome على أندرويد، وتطبيقات PWA عالية الدقة |
💡 خبر سار: لست مضطرًا إلى إنشاء كل مقاس يدويًا. فأداة مولّد أيقونة الموقع من ImageTools تولّد هذه الملفات كلها تلقائيًا انطلاقًا من صورة واحدة — بما فيها ملف .ico متعدد المقاسات وأرشيف ZIP يضم كل ملفات PNG.
أي صورة تصلح أساسًا للأيقونة
ينبغي ألّا تقل الصورة المصدر عن 512×512 بكسل — فهذا أكبر مقاس مطلوب، والانطلاق من صورة كبيرة يضمن توليد المقاسات الأصغر بجودة جيدة. أما البدء بصورة صغيرة فيعطي أيقونات ضبابية في المقاسات الأكبر.
الصيغ المقبولة كمدخل
- PNG بخلفية شفافة — وهو الأمثل. إذ تبقى الأيقونة نظيفة مهما كان لون خلفية التبويب أو الشاشة الرئيسية.
- PNG بخلفية صمّاء — ويعمل جيدًا إن كان لون الخلفية منسجمًا مع تصميم موقعك.
- JPG — مقبولة، لكن من دون دعم للشفافية.
- SVG — وهي أفضل نقطة انطلاق إن توفّرت لديك. متجهية، وتقبل أي مقاس بلا فقدان.
نصائح تصميمية لأيقونات المواقع
أيقونة الموقع مساحة بالغة الصغر — فنسخة 16×16 لا تتجاوز 256 بكسل في مجملها. وهذا يفرض قيودًا تصميمية يغفل عنها كثيرون:
- استعمل أبسط عناصر علامتك. فالشعار الكامل لا ينجح عادةً بمقاس 16 بكسل. والأفضل الاكتفاء بالحرف الأول أو برمز مفرد أو بنسخة مبسّطة من الأيقونة.
- تجنّب النصوص الرفيعة. فأي نص دون مقاس 32 بكسل يصير غير مقروء.
- اعتمد تباينًا عاليًا. فالأيقونة تزاحم عشرات التبويبات المفتوحة، والأيقونة ضعيفة التباين تختفي بصريًا.
- الخلفية الصمّاء أنجح من الشفافة في حالات كثيرة، إذ تضمن بروز الأيقونة في التبويبات الفاتحة والداكنة على السواء.
- اختبر النتيجة بمقاس 16 بكسل قبل أن تعدّ العمل منتهيًا. فتصميم يبدو ممتازًا بمقاس 512 بكسل قد يصير غير مميَّز بمقاس 16.
ولّد أيقونة موقعك الآن — كل المقاسات دفعة واحدة
ارفع صورتك ونزّل أرشيف ZIP يضم ملف .ico وكل ملفات PNG اللازمة للمتصفحات والآيفون وأندرويد وتطبيقات PWA. مجانًا وبلا تسجيل.
أنشئ أيقونة موقعك مجانًاكيف تثبّت الأيقونة في موقعك
بعد توليد الملفات، عليك الإشارة إليها داخل <head> في HTML. والشيفرة الكاملة الموصى بها في 2026 هي:
<!-- Basic favicon for browsers -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- Apple Touch Icon (iPhone and iPad) -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<!-- Android and PWA -->
<link rel="manifest" href="/site.webmanifest">وينبغي أن يوجد ملف favicon.ico في جذر الموقع، أي المجلد نفسه الذي يضم index.html. أما بقية ملفات PNG فيمكن وضعها في الجذر أو في مجلد فرعي، ما دامت المسارات في HTML صحيحة.
ملف site.webmanifest
لتطبيقات PWA، ولكي يتعرّف Chrome على أندرويد على أيقونتك تعرّفًا صحيحًا، تحتاج إلى ملف site.webmanifest في جذر الموقع. ومحتواه الأساسي هو:
{
"name": "Your Site Name",
"short_name": "Site",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone"
}📦 أرشيف ZIP الصادر عن مولّد أيقونة الموقع يتضمن أصلًا ملف site.webmanifest مضبوطًا مسبقًا بالمسارات الصحيحة — فما عليك سوى فك الضغط ورفع الملفات إلى جذر موقعك.
كيف تثبّتها على منصات بعينها
WordPress
في ووردبريس تُسمّى الأيقونة «أيقونة الموقع». ولضبطها انتقل إلى المظهر ← تخصيص ← هوية الموقع ثم انقر «اختيار أيقونة الموقع». ويتولى ووردبريس تلقائيًا توليد المقاسات اللازمة من الصورة التي ترفعها — ويكفي أن تكون مربّعة ولا تقل عن 512×512 بكسل.
Shopify
في المتجر الإلكتروني ← التفضيلات، انزل إلى «أيقونة المتجر» وارفع صورة مربّعة لا تقل عن 512×512 بكسل بصيغة PNG أو JPG.
Wix
في الإعدادات ← هوية العلامة ← أيقونة الموقع. استعمل صورة مربّعة بصيغة PNG أو JPG.
Squarespace
في التصميم ← مظهر المتصفح، قسم «Favicon». والموصى به: ملف PNG مربّع بمقاس 100×100 بكسل، ويتولى Squarespace الباقي.
HTML/CSS خالص أو أطر عمل
ضع الملفات المولّدة كلها في جذر المشروع، وأضف وسوم <link> المعروضة أعلاه داخل <head> في كل صفحة — أو في القالب الأساس إن كنت تستعمل إطارًا مثل Next.js أو Nuxt أو ما شابههما.
التأكد من أن الأيقونة تعمل
بعد التثبيت، افتح الموقع في تبويب جديد وتحقق من ظهور الأيقونة فيه. وإن لم تظهر فورًا، فجرّب:
- إفراغ ذاكرة المتصفح المؤقتة (Ctrl+Shift+R في ويندوز، وCmd+Shift+R في ماك).
- الفتح في نافذة تصفّح متخفٍّ، فهي لا تستعمل الذاكرة المؤقتة.
- الانتظار بضع دقائق، فالمتصفحات تخزّن الأيقونات مؤقتًا لمدد متفاوتة.
- التحقق من صحة مسار الملف في HTML ومن وجوده فعلًا على الخادم.