ملاحظات حول أيقونات favicon

دليل · قراءة 3 دقائق

لماذا لا يتحدّث favicon الخاص بك — وكيف تفرض تحديثه

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

عالج المشكلة بهذا الترتيب:

• تحديث قسري. يعيد Ctrl+Shift+R (Windows) أو Cmd+Shift+R (Mac) التحميل متجاوزاً ذاكرة الصفحة المؤقتة.
• أعد فتح التبويب. غالباً ما ترتبط ذاكرة favicon المؤقتة بالتبويب المفتوح. أغلقه تماماً وافتح تبويباً جديداً.
• تجاوزها باستعلام. وجّه الرابط إلى عنوان "جديد" أثناء الاختبار: <link rel="icon" href="/favicon.ico?v=2">. وارفع الرقم مع كل تغيير.
• تأكد من وجود الملف فعلاً. حمّل yourdomain.com/favicon.ico مباشرةً — فإن أعاد خطأ 404، فإن المتصفح يعرض أيقونة مخزّنة مؤقتاً لملف لم يعد موجوداً.

Google Search حالة خاصة بذاته. فهو يخزّن favicon الخاص بك مؤقتاً بمعزل عن صفحاتك ويحدّثه وفق جدول Google، لذا قد تتأخر أيقونة جديدة في نتائج البحث أياماً أو أسابيع حتى بعد أن يصبح موقعك صحيحاً. لا يوجد زرّ لتسريع ذلك — تأكد فقط من أن /favicon.ico يُعيد 200 لـ Googlebot ثم انتظر.

رأي · قراءة 4 دقائق

توقّف عن إنشاء 20 ملف favicon — مجموعة 2026 الأدنى

لا تزال كثير من أدوات favicon تسلّمك ملف ZIP يحتوي ستة عشر ملف PNG وملف browserconfig.xml وصور مربّعات Microsoft. وكل ذلك تقريباً عبء زائد. فقد أُلغيت مربّعات Windows مع واجهة Live Tiles؛ وكومة أحجام PNG الوسيطة كانت تحل مشكلة متصفح لم تعد موجودة.

إليك المجموعة التي تغطي كل ما هو مستخدم اليوم:

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

خمسة ملفات، وأربع إشارات <link>/manifest، وانتهى الأمر. عدد ملفات أقل يعني أقل ما يجب إبقاؤه متزامناً، ونشراً أخف، وعدم وجود ملف browserconfig.xml قديم يشير إلى صور حذفتها. وإذا أصرّت أداة على أنك بحاجة إلى عشرين ملفاً، فهي تحسّن مظهر الشمولية، لا ما تطلبه المتصفحات فعلاً.

تقنية · قراءة 3 دقائق

أيقونات favicon بصيغة SVG والوضع الداكن: أيقونة واحدة تتكيّف

يبدو الشعار الداكن حادّاً على شريط تبويبات فاتح ويكاد يختفي على شريط داكن. وتوفير ملفين وتبديلهما أمر مزعج. مع favicon بصيغة SVG يمكنك أن تجعل ملفاً واحداً يستجيب لسمة المتصفح، لأن المتصفح يطبّق CSS داخل ملف SVG عند عرض الأيقونة.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    .glyph { fill: #111; }
    @media (prefers-color-scheme: dark) { .glyph { fill: #fff; } }
  </style>
  <path class="glyph" d="…"/>
</svg>

أشِر إليه بـ <link rel="icon" href="/icon.svg" type="image/svg+xml"> واحتفظ بملف favicon.ico بسيط كبديل احتياطي — فالمتصفحات القديمة وGoogle Search لن تقيّم استعلام الوسائط، لذا تحتاج هي الأخرى إلى أيقونة ثابتة. والنتيجة: على نظام فاتح يكون المحرف داكناً، وعلى نظام داكن ينقلب إلى فاتح، من ملف صغير واحد.