كيف تعمل صيغ favicon
فهم آلية عمل كل صيغة يساعدك على حلّ المشكلة الحتمية: «لماذا لا يظهر الـ favicon؟»
تحقق من أيقونات أي موقع
ثبّت إضافة FetchFavicon لمتصفح Chrome لاستخراج الأيقونات ومعاينتها والتحقق منها فورًا.
حاوية .ico
ملف .ico يتكوّن من ترويسة (Header) يليها إدخال صورة واحد أو أكثر. كل إدخال يمكن أن يكون BMP أو PNG، ولكل منها عرض وارتفاع وعمق لوني.
المتصفحات تقرأ الفهرس، تختار الإدخال المطابق للمقاس المطلوب، وتفكّ ترميز ذلك الإدخال فقط.
PNG داخل .ico
للمقاسات 64×64 وما فوق، ضغط PNG يُقلّص حجم الملف 5–10 أضعاف دون أي فقد بصري. المولّدات الحديثة (بما فيها مولّدنا) تفعل ذلك تلقائيًا.
SVG favicon
ملف SVG favicon هو ملف SVG عادي. المتصفحات تعرضه كأي SVG آخر، وكتلة <style> يمكنها تكييف الألوان بناءً على prefers-color-scheme.
كيف تختار المتصفحات
إن وفّرت عدة وسوم <link rel="icon">، تختار المتصفحات الأنسب للسطح (علامة تبويب مقابل إشارة مرجعية مقابل تثبيت). SVG يُفضَّل عند دعمه؛ .ico هو البديل التلقائي.
الأسئلة الشائعة
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.