الـ Favicon هي الأيقونة الصغيرة التي تظهر في تبويبات المتصفح والمفضلة والسجل، وعلى الشاشة الرئيسية عند إضافة شخص ما لموقعك على هاتفه. إنها أيضاً من أكثر التفاصيل التي يُغفل عنها في تصميم الويب — والفارق بين موقع يبدو "حقيقياً" وموقع يبدو غير مكتمل.

ماذا يوجد فعلياً في حزمة Favicon الحديثة؟

في عام 2010، كان ملف واحد favicon.ico بحجم 16×16 كافياً. في 2026، المتصفحات وiOS وAndroid وتطبيقات PWA كل واحد يطلب أصولاً مختلفة. الحزمة الكاملة الآن تشمل:

favicon.ico — ملف Windows ICO متعدد الدقة يحتوي 16×16 و32×32 و48×48.
favicon-16x16.png و favicon-32x32.png — تفضّلها المتصفحات الحديثة على شاشات Retina.
apple-touch-icon.png (180×180) — يستخدمها Safari على iOS عند إضافة الموقع للشاشة الرئيسية.
icon-192.png و icon-512.png — أيقونات Android Chrome وPWA.
site.webmanifest — ملف JSON صغير يسمح لـ Android بتثبيت موقعك كتطبيق.

مقتطف HTML المطلوب

بعد وضع الملفات في جذر الموقع، الصق هذا داخل <head>:

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

خطوة بخطوة: أنشئ الحزمة الكاملة

افتح الأداة — انتقل إلى مولد الأيقونات.
ارفع صورة المصدر — يفضل PNG مربع 512×512 مع شفافية. SVG وJPG مدعومة أيضاً.
اختر خلفية — اتركها شفافة لتبويبات المتصفح، أو اختر لون علامتك التجارية للأيقونات المعتمة.
أضف حشواً عند الحاجة — إذا كان شعارك يلامس الحواف، ادفعه للداخل 10-20%.
اختر الزوايا — مربع للنمط الكلاسيكي، نمط iOS (20%) للمظهر الحديث، أو دائرة (50%).
نزّل الحزمة — ستحصل على .ico وكل أحجام PNG وwebmanifest ومقتطف HTML — جاهزة للوضع في جذر الموقع.

أخطاء شائعة يجب تجنبها

تقديم 16×16 فقط — يبدو ضبابياً على كل أجهزة Retina.
استخدام apple-touch-icon شفاف — iOS يملأ الشفافية بالأسود الصلب. استخدم دائماً خلفية معتمة لأيقونة iOS.
التصميم بحجم 16×16 من الصفر — ابدأ كبيراً (512×512) ودع المتصفح يصغّر.
نسيان كسر الكاش — أضف ?v=2 لاسم الملف بعد الاستبدال حتى يرى المستخدمون الجديد.

الخصوصية: لماذا التوليد المحلي مهم

معظم مولّدات Favicon أونلاين ترفع شعارك إلى خادم. مولّد الأيقونات لدينا يفعل كل خطوة في متصفحك باستخدام Canvas API: الاقتصاص وتغيير الحجم وترميز .ico وتجميع ZIP. لا شيء يُرفع.

جاهز لشحن Favicon احترافي؟ جرّب مولد الأيقونات المجاني — كل الأحجام، مع .ico، وبدون رفع.

كيفية إنشاء أيقونة Favicon (الدليل الشامل 2026)

ماذا يوجد فعلياً في حزمة Favicon الحديثة؟

مقتطف HTML المطلوب

خطوة بخطوة: أنشئ الحزمة الكاملة

أخطاء شائعة يجب تجنبها

الخصوصية: لماذا التوليد المحلي مهم

أدلة ذات صلة

كيفية تغيير حجم الصور للويب دون تشويه

كيفية تحويل الصور بين JPG و PNG و WebP