لماذا تبدو أيقونة موقعك ضبابية على شاشات Retina (وكيف تصلحها)

بواسطة فريق Productivities • الرياض، المملكة العربية السعودية

قضيت ساعات على شعارك، صدّرته كـ favicon نظيف 16×16، نشرته. ثم فتحت موقعك على الهاتف — والأيقونة في التبويب تبدو كلطخة. السبب دائماً نفسه: شاشات Retina ترسم أيقونتك بكثافة 2× أو 3×، والمتصفح ليس لديه نسخة أعلى دقة ليرجع إليها.

التشخيص السريع

تبويبات المتصفح ترسم Favicon بـ 16×16 بكسل منطقي. على شاشة عادية، هذا 16 بكسل فعلي — ممتاز. على MacBook Retina، هذا 32 بكسل. على iPhone قد يصل إلى 48. إذا قدّمت 16×16 فقط، المتصفح مضطر لتكبيرها، والنتيجة الحتمية ضبابية.

الحد الأدنى لعام 2026

للتبويبات والمفضلة فقط، الحد الأدنى الحديث هو:

favicon.ico يحتوي 16×16 و32×32 معاً (ICO متعدد الدقة).
favicon-32x32.png كملف PNG منفصل عبر <link rel="icon" type="image/png" sizes="32x32">.

هذا وحده يحل 90% من شكاوى "Favicon ضبابي". لتغطية iOS وPWA تحتاج أيضاً apple-touch-icon (180) وicon-192 وicon-512.

لماذا التصميم بحجم 16×16 لا يعمل

التكبير دائماً أسوأ من التصغير. سير العمل الاحترافي هو العكس: صمم بحجم 512×512، ثم صدّر كل الأحجام الأصغر من هذا الأصل الرئيسي.

صيغة .ico ليست ميتة

المتصفحات القديمة واختصارات Windows ومعظم قارئات RSS لا تزال تطلب /favicon.ico افتراضياً. تجاهلها يعني 404 مضمون في سجلاتك. الخبر الجيد: ملف .ico واحد يمكن أن يحوي عدة دقات (16 و32 و48).

كسر الكاش بعد الإصلاح

المتصفحات تحفظ Favicon لأسابيع. بعد رفع الحزمة الجديدة، أضف ?v=2 للمراجع في <head> لإجبار المتصفح على جلب الإصدار الجديد.

الحل بنقرة واحدة

مولد الأيقونات لدينا يأخذ صورة مصدر واحدة وينتج الحزمة الكاملة — .ico متعدد الدقة وكل أحجام PNG وapple-touch-icon وsite.webmanifest ومقتطف HTML — كل شيء في متصفحك بدون رفع.

جرّب مولد الأيقونات المجاني واشحن Favicon واضح اليوم.