الـ favicon هو الأيقونة الصغيرة التي يعرضها المتصفح في التبويب، وفي الإشارات المرجعية والسجلّ، وعلى الشاشة الرئيسية للهاتف عندما يحفظ أحدهم موقعك. إضافته إلى موقعك تتطلب أربعة ملفات وحوالي خمس دقائق — ومعظم الإحباط الذي يواجهه الناس سببه التخزين المؤقت، وهو ما يتناوله القسم الأخير.

المجموعة الأدنى التي تعمل فعلاً

لست بحاجة إلى ستة عشر ملف PNG وملف browserconfig.xml. لقد انتهى عصر مربّعات Windows وصيغ Internet Explorer القديمة. أربعة ملفات تغطي كل متصفح وجهاز مستخدم فعلياً اليوم:

الملف	الحجم	سبب وجوده
`favicon.ico`	16 · 32 · 48 (متعدد الأحجام)	المتصفحات القديمة، وGoogle Search الذي يجلب `/favicon.ico` مباشرةً.
`icon.svg`	متجهي	تفضّله المتصفحات الحديثة — حادّ عند أي حجم، ويمكنه التكيّف مع الوضع الداكن.
`apple-touch-icon.png`	180 × 180	الشاشة الرئيسية في iOS وSafari. يتجاهل iOS صيغة SVG هنا، لذا فإن ملف PNG مطلوب.
`android-chrome` 192 & 512	192 · 512	الشاشة الرئيسية في Android وتطبيقات PWA القابلة للتثبيت، ويُشار إليها من web app manifest.

كود HTML الذي تلصقه داخل <head>

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

يقرأ المتصفح الأسطر الأربعة جميعها ويختار أفضل صيغة يدعمها، فيستخدم Chrome أو Safari الحديث صيغة SVG بينما يرجع المتصفح القديم إلى .ico. أما sizes="48x48" في سطر .ico فيعلن ببساطة عن أكبر صورة موجودة بداخله.

الـ web app manifest

الـ manifest هو ما يتيح لعمليات التثبيت على Android وPWA استخدام أيقونة لائقة. إليك ملف site.webmanifest بالحد الأدنى:

{
  "icons": [
    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

يتيح "purpose": "any maskable" لنظام Android اقتصاص الأيقونة ضمن شكله التكيّفي دون قص شعارك — شريطة أن تترك هامشاً آمناً حوله (انظر نصائح متقدمة).

أين توضع الملفات

ضع كل ملف في المجلد الجذري لموقعك. تطلب المتصفحات — وGooglebot — الملف /favicon.ico من الجذر تلقائياً، حتى بدون وسم <link>، لذا فإن إبقاءه هناك هو الخيار الافتراضي الأكثر أماناً.

تحقّق من أنه نجح فعلاً

قم بتحديث قسري للصفحة: Ctrl+Shift+R (Windows) أو Cmd+Shift+R (Mac).
ما زلت عالقاً؟ افتح الموقع في نافذة خاصة/تصفّح متخفٍّ — تبدأ بذاكرة تخزين مؤقتة فارغة.
حمّل كل ملف مباشرةً، مثل yourdomain.com/favicon.ico، وتأكد من أنه يُعيد الصورة (HTTP 200) وليس خطأ 404.
افحص <head> المُعالَج في DevTools، وليس ملف المصدر فقط — فقد تعيد خطوة بناء أو نظام إدارة محتوى كتابة المسارات.

الأمر الوحيد الذي يهدر أكثر الوقت: التخزين المؤقت

تخزّن المتصفحات ملفات favicon مؤقتاً بعناد يفوق أي ملف آخر تقريباً، محتفظةً أحياناً بالقديم رغم عمليات إعادة التحميل العادية. إذا رفضت أيقونة جديدة الظهور:

قم بتحديث قسري، ثم أغلق التبويب تماماً وافتح تبويباً جديداً — فذاكرة favicon المؤقتة غالباً ما تكون محصورة بنطاق التبويب.
أثناء الاختبار، أضف استعلام إصدار كي يعامله المتصفح كملف جديد: <link rel="icon" href="/favicon.ico?v=2">.
يحتفظ Google Search بنسخته الخاصة ويحدّثها وفق جدوله الزمني الخاص — توقّع أياماً، وأحياناً أسابيع، قبل أن تُظهر نتيجة البحث الأيقونة الجديدة.

كل شيء في هذا الموقع يعمل داخل متصفحك. صورتك المرفوعة لا تغادر جهازك أبداً — إذ لا يوجد خادم لرفعها إليه.

→ العودة إلى المولّد