كيفية إضافة favicon في HTML
إضافة favicon لصفحة HTML عادية تغيير من سطر واحد — لكن الإعداد الحديث الكامل يتكوّن من ستة أسطر ويُغطّي iOS وAndroid والوضع الداكن وتثبيت PWA.
الوسم الوحيد الذي تحترمه جميع المتصفحات هو <link rel="icon" href="/favicon.ico">. ضع favicon.ico في جذر موقعك وتكون قد أنجزت 80% من المهمة.
الـ 20% المتبقية — apple-touch-icon وPNG وSVG بدعم الوضع الداكن وwebmanifest — هي ما يفصل بين أيقونة افتراضية وتجربة علامة تجارية متقنة.
كيف يعمل
- 1
أنشئ حزمة favicon
استخدم مولّد حزمة FetchFavicon — يُنتج كل الملفات المطلوبة مع وسوم جاهزة للّصق.
- 2
ضع الملفات في جذر الموقع
favicon.ico وapple-touch-icon.png وandroid-chrome-192/512.png وsite.webmanifest.
- 3
الصق المقتطف في <head>
ستة وسوم <link> + وسم <meta name="theme-color"> واحد.
جربه الآن
احصل على مقتطف HTML
مولد Faviconالأسئلة الشائعة
أين توضع وسوم <link>؟+
داخل <head>، في أي موضع — الترتيب لا يهم طالما جاءت قبل </head>.
هل أحتاج كلاً من .ico وPNG؟+
نعم. .ico هو البديل الشامل؛ PNG يُعرض بوضوح أكبر على شاشات الكثافة العالية.
ماذا عن الوضع الداكن؟+
وفّر نسخة SVG تتضمّن استعلام وسائط prefers-color-scheme داخل كتلة <style>.