كيفية إضافة favicon في HTML
إضافة favicon لصفحة HTML عادية تغيير من سطر واحد — لكن الإعداد الحديث الكامل يتكوّن من ستة أسطر ويُغطّي iOS وAndroid والوضع الداكن وتثبيت PWA.
تحقق من أيقونات أي موقع
ثبّت إضافة FetchFavicon لمتصفح Chrome لاستخراج الأيقونات ومعاينتها والتحقق منها فورًا.
الوسم الوحيد الذي تحترمه جميع المتصفحات هو <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>.