كيف تصنع أيقونة مفضلة (Favicon) لموقعك

تساعد الأيقونة المفضلة على إيجاد موقعك بين التبويبات المفتوحة. إليك الأحجام التي تحتاجها وكيف تضيفها إلى صفحاتك.

الأيقونة المفضلة هي الأيقونة الصغيرة التي تظهر في تبويبات المتصفح والإشارات المرجعية ونتائج البحث. إنها تفصيل صغير، لكنها تجعل الموقع أسهل تمييزًا وأكثر اكتمالًا.

ابدأ بصورة بسيطة ومربعة

تُعرض الأيقونات المفضلة بحجم صغير يصل إلى ⁦16 × 16⁩ بكسل، فتختفي التفاصيل الدقيقة. وأفضل ما يناسبها حرف عريض أو رمز بسيط أو نسخة مبسطة من شعارك. ابدأ بصورة مربعة لا تقل عن ⁦512 × 512⁩ بكسل.

الملفات التي تحتاجها

• favicon.ico بأحجام 16 و32 و48 بكسل، للمتصفحات القديمة وWindows.
• ⁦favicon-32⁩x32.png و⁦favicon-16⁩x16.png للمتصفحات الحديثة.
• ⁦apple-touch-icon.png⁩ بحجم ⁦180 × 180⁩ بكسل للشاشة الرئيسية في iPhone وiPad.
• ⁦android-chrome-192⁩x192.png و512x512.png، مذكوران في ملف site.webmanifest، لنظام Android.

أضف الوسوم إلى صفحاتك

ارفع الملفات إلى المجلد الجذر لموقعك وأضف هذه الأسطر داخل <head> في كل صفحة:

<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">
<link rel="manifest" href="/site.webmanifest">

أنشئها كلها دفعة واحدة

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

تحتفظ المتصفحات بالأيقونات المفضلة في ذاكرتها المؤقتة طويلًا، فإذا استبدلت أيقونة قديمة ولم ترَ التغيير، فجرّب نافذة خاصة أو امسح ذاكرة المتصفح.