كيفية إنشاء favicon
الـ favicon الحديث أكثر من صورة بمقاس 16×16. إليك سير العمل الكامل لإعداد يظهر بوضوح في كل متصفح ونظام تشغيل وجهاز.
تحقق من أيقونات أي موقع
ثبّت إضافة FetchFavicon لمتصفح Chrome لاستخراج الأيقونات ومعاينتها والتحقق منها فورًا.
ما هو الـ favicon؟
الـ favicon هو الأيقونة الصغيرة التي يعرضها المتصفح في علامة التبويب وشريط الإشارات وقائمة السجل. على الهاتف يكون أيقونة الشاشة الرئيسية، وعلى Windows يكون أيقونة الاختصار.
المواقع الحديثة توفّر دقّات وصيغ متعددة ليحصل كل سطح على عرض حاد وواضح.
جهّز صورة المصدر
ابدأ بصورة مربّعة بدقة 512×512 على الأقل — ويُفضّل SVG بإطار viewBox مربّع. أي مقاس أصغر سيصبح ضبابيًا عند التصغير.
تجنّب الخطوط الرفيعة والنصوص الصغيرة. تختفي تمامًا عند 16×16.
أنشئ ملف .ico متعدد الأحجام
ادمج المقاسات 16 و32 و48 و64 و128 و256 في ملف favicon.ico واحد. المتصفحات تختار المقاس المناسب تلقائيًا.
مولّد FetchFavicon يُنجز ذلك من جانب العميل في أقل من ثانية.
أضف وسوم HTML
ضع favicon.ico في جذر الموقع. ثم أضف وسوم SVG وapple-touch-icon وأيقونات الـ manifest في <head> للإعداد الكامل.
تحقّق في كل المتصفحات
أجرِ تحديثًا قسريًا في Chrome وSafari وFirefox وEdge. تحقّق من شريط الإشارات وعلامة التبويب وتثبيت الشاشة الرئيسية.
الأسئلة الشائعة
What is a favicon?
A favicon is the small icon shown in browser tabs, bookmarks, and mobile home screens. Modern sites ship multiple sizes and formats for crisp rendering everywhere.
What size should my favicon source image be?
Start from a square image at least 512×512 pixels. SVG with a square viewBox works best for sharp downscaling.
Do I need both favicon.ico and PNG files?
Yes — ship a multi-size favicon.ico for universal fallback plus PNGs (180×180 and 192/512) for Apple, Android, and PWAs.
Where do I put favicon files on my website?
Place favicon.ico in your site root and add <link rel="icon"> tags in <head> for SVG and PNG variants.