الغرض من كل صيغة
أيقونة favicon ليست ملفًا واحدًا. فالمتصفحات وأنظمة التشغيل وأدوات الإشارات المرجعية يبحث كلٌّ منها عن ملف مختلف، ومعيار HTML يسمح للصفحة بأن تعلن عن عدة ملفات ويترك الاختيار للمتصفح.
| الملف | الصيغة | يُستخدم لـ |
|---|---|---|
favicon.ico |
ICO، عدة صور نقطية في ملف واحد | الاحتياطي: عند غياب أي رابط أيقونة، قد تطلب المتصفحات /favicon.ico من جذر الموقع. تضع هذه الحزمة فيه صورًا بأحجام 16 و32 و48 بكسل. |
favicon.svg |
SVG | ملف واحد قابل للتكبير للمتصفحات التي تدعم أيقونات favicon بصيغة SVG. ويمكنه أن يحمل ألوانه الخاصة للوضعين الفاتح والداكن. |
favicon-16x16.png، favicon-32x32.png |
PNG | نسخ نقطية من أيقونة التبويب، لأداة إنشاء مواقع أو أداة تطلب favicon بصيغة PNG. |
apple-touch-icon.png |
PNG، 180 × 180 بكسل | الشاشة الرئيسية في iPhone وiPad، عندما يضيف أحدهم الموقع إليها. |
site.webmanifest |
JSON | الاسم والألوان وأيقونات التطبيق لتطبيقات الويب القابلة للتثبيت (راجع دليل أيقونات maskable). |
صيغة ICO هي الأقدم ولا تزال الأوسع قراءة. يصف معيار HTML طلب /favicon.ico بأنه شيء قد يفعله المتصفح عندما لا تعلن الصفحة عن أي أيقونة، لذا تعامل معه كشبكة أمان واربطه صراحةً على أي حال. ويشير MDN إلى أن ملف ICO يمكنه تخزين عدة أحجام، ولهذا يغطي ملف واحد أحجام 16 و32 و48 بكسل.
صيغة SVG هي الوحيدة التي تبقى حادة بكل حجم وعلى كل كثافة بكسلات. ويمكن لكتلة <style> داخل ملف SVG أن تبدّل الألوان باستخدام prefers-color-scheme، فتبقى العلامة الداكنة ظاهرة على شريط تبويبات داكن. ويجب أن يرسله الخادم بالنوع image/svg+xml: إذ يشير Can I use إلى أن متصفحات Chromium وFirefox تشترط هذا النوع.
أيقونات favicon بصيغة PNG صور نقطية عادية، تُربط عادةً مع السمة sizes. ويصف المعيار sizes بأنها إرشادية: قد يستخدمها المتصفح لاختيار أقرب ملف، لكن لا شيء يُلزمه بذلك. وهذا سلاح ذو حدين، كما يوضّح القسم التالي.
أي المتصفحات تستخدم أيها
دعم أيقونات favicon بصيغة SVG، وفق بيانات Can I use كما رُوجعت في 28 سبتمبر 2026: Chrome وEdge بدءًا من الإصدار 80، وFirefox من 41، وOpera من 67، وSafari من 26.0، على macOS وiOS على حد سواء. أما Safari 18 وما قبله فلا يستخدم أيقونات favicon بصيغة SVG، لذا يعتمد على ملفات PNG وICO. وقد أعلن فريق WebKit عن هذا التغيير في Safari ضمن منشور إصدار Safari 26.0 في سبتمبر 2025. ومن لا يزال يستخدم إصدارًا أقدم من Safari يواصل رؤية الأيقونات النقطية، ولهذا لا تحل favicon بصيغة SVG محلها أبدًا.
عندما تعلن الصفحة عن عدة أيقونات، يقول معيار HTML إن المتصفح يختار الأنسب له، وإذا تساوت عدة أيقونات في ملاءمتها فإن آخر واحدة مُعلنة هي التي تفوز. وإذا تبيّن أن ملفًا غير صالح للاستخدام، كأن تكون صيغته غير مقروءة، ينتقل إلى التالي. أما معنى «الأنسب له» فمتروك للمتصفح: فالمتصفح الذي يختار حسب الحجم المُعلن قد يفضّل ملف PNG معلّمًا بـsizes="32x32" على ملف SVG لا يعلن أي حجم، أيًّا كان الترتيب. لذلك لا يربط المقطع أدناه أي ملفات PNG ذات أحجام محددة على الإطلاق: فملف ICO يغطي الأحجام النقطية، وملف SVG يأتي بعده.
هناك تفصيل مصدره التجربة العملية لا أحد مطوّري المتصفحات. يوصي مقال Evil Martians عن favicon بوضع sizes="32x32" على رابط ICO «لإصلاح خطأ في Chrome يجعله يختار ملف ICO بدلًا من SVG»؛ ويذكر سجل تغييراته أنه استبدل sizes="any" لهذا السبب في يوليو 2023. لا يربط المقال أي تقرير خطأ في Chromium، ولم نعثر نحن على واحد، لذا اعتبره خبرة ميدانية. والمولّد يتبع هذه النصيحة. ولا ضرر فيها، لأن ملف ICO يحتوي فعلًا على صورة بحجم 32 بكسل.
أيقونة Apple touch. يوثّق دليل Safari Web Content Guide المؤرشف من Apple الوسم <link rel="apple-touch-icon"> ويذكر حجم 180 × 180 بكسل لأجهزة iPhone ذات شاشة Retina. ويضيف MDN أن iOS لا يستخدم روابط rel="icon" العادية لأيقونات الشاشة الرئيسية. ولا تذكر وثائق Apple ما يحدث للبكسلات الشفافة؛ وفي رد على منتديات مطوّري Apple (من مطوّر آخر، لا من Apple) أنها تظهر سوداء. لذلك يجعل المولّد هذا الملف معتمًا دائمًا، على لون الخلفية الذي تختاره.
لون السمة هو الجزء الأقل موثوقية. لا يذكر Can I use أي دعم للوسم <meta name="theme-color"> في Firefox، ويقول إن Chrome على سطح المكتب يستخدم اللون لتطبيقات الويب المثبّتة فقط. ويقول كلٌّ من Can I use وMDN إنه بدءًا من Safari 26 لا يُطبَّق إلا على تطبيقات الويب المثبّتة. ويختلف المصدران في التفاصيل الخاصة بـChrome على Android وSafari على iOS 26. أضف الوسم، لكن لا تبنِ تصميمك عليه.
لا يزال رابط mask-icon الأقدم من Apple الخاص بالتبويبات المثبّتة في Safari يظهر في وثائقها المؤرشفة. لم نجد أي ملاحظة رسمية تلغيه، ولا أي شيء يشترطه كذلك. ولا تتضمن هذه الحزمة واحدًا.
المجموعة الصغيرة التي تستحق النشر
لموقع لديه تصميم فيكتور، اربط favicon.ico وfavicon.svg وapple-touch-icon.png، بالإضافة إلى ملف manifest بأيقونات بحجم 192 و512 بكسل إذا كان يجب أن يكون الموقع قابلًا للتثبيت. وهذه هي المجموعة التي يستقر عليها مقال Evil Martians. ويمكن أن تبقى أيقونات favicon بصيغة PNG على الخادم للأدوات التي تطلبها، دون وسم ربط. أما لموقع لا يوجد شعاره إلا كصورة نقطية، فاستغنِ عن SVG: فصورة PNG المغلّفة داخل ملف SVG تبقى صورة نقطية ولا تكسب شيئًا. حوّلها أولًا إلى مسارات فيكتور حقيقية بالتتبّع إذا أردت favicon بصيغة SVG.
مقطع HTML
هذه هي الوسوم التي يكتبها المولّد في favicon.html للحزمة النموذجية أدناه، مع وجود الملفات في جذر الموقع:
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0a2d8f">
إذا كانت ملفاتك في مجلد مثل /assets/icons/، فحدّد هذا المجلد كبادئة للمسار في مولد favicon وستتغير كل قيم href معه؛ وانسخ أيضًا favicon.ico إلى جذر الموقع، حيث تبحث عنه المتصفحات في الصفحات التي لا تربط أي أيقونة. والمصدر بصيغة PNG أو JPG أو WebP ينتج الوسوم نفسها دون سطر SVG.
مثال حقيقي للتنزيل
مرّرنا علامة هذا الموقع نفسه (ملف SVG من مستودعنا، وليس ملفًا رفعه أحد) عبر مولد favicon بالاسم "png2svg.art"، ولون السمة #0a2d8f، والخلفية #e8efff، وهامش 8 %. لم يُعدَّل أي شيء بعد ذلك: هذه هي الملفات التي تصنعها الأداة بالضبط.
أيقونة favicon بحجم 32 بكسل، بحجمها الحقيقي: 
أيقونة Apple touch بحجم 180 بكسل، معتمة على لون الخلفية:
نزّل الحزمة النموذجية كاملة (ZIP): favicon.svg وfavicon.ico وأيقونتا favicon بصيغة PNG وأيقونة Apple touch وأربع أيقونات تطبيق وsite.webmanifest وfavicon.html وملف README.
التحقق من أيقونات favicon
افتح الصفحة في نافذة خاصة بعد الرفع: فالمتصفحات تحتفظ بأيقونات favicon في ذاكرة التخزين المؤقت لفترة طويلة، والأيقونة القديمة في نافذة عادية لا تثبت شيئًا. وفي لوحة الشبكة في أدوات المطوّر، تأكد من أن favicon.svg يُرسل بالنوع image/svg+xml وأن كل ملف يستجيب بالرمز 200. انظر إلى التبويب في الوضعين الفاتح والداكن، وأضف الصفحة إلى الشاشة الرئيسية في هاتف للتحقق من أيقونة touch.