مقاسات الأيقونة المفضلة (favicon): ما الملفات المطلوبة وبكم بكسل

لماذا ملفات favicon كثيرة إلى هذا الحد؟

الأيقونة المفضلة هي أيقونة موقعك الصغيرة — في تبويب المتصفح وقائمة المفضلة ونتائج البحث وشاشة الهاتف الرئيسية. إنها وجه الموقع؛ وبدونها يبدو الموقع ناقصًا.

المشكلة أن كل موضع من هذه المواضع يطلب مقاسًا وصيغة مختلفين. لذا فالأيقونة ليست ملفًا واحدًا بل طقمًا صغيرًا من الملفات.

الطقم الذي تحتاجه

• •favicon.ico — يجمع 16 و32 و48 بكسل في ملف واحد. يستخدم في شريط العنوان والتبويبات والمفضلة؛ أقدم المعايير وما زال ضروريًا
• •PNG بمقاس 16 و32 بكسل — النسخ الواضحة التي تعرضها المتصفحات الحديثة في التبويب
• •apple-touch-icon بمقاس 180 بكسل — يستخدم عند إضافة الموقع إلى الشاشة الرئيسية في iPhone وiPad
• •PNG بمقاس 192 و512 بكسل — للشاشة الرئيسية في أندرويد وتثبيت PWA، ويُسجَّلان في site.webmanifest

كيف تجهز الصورة الأصلية

الطريقة الصحيحة أن تبدأ من صورة مربعة كبيرة (512 بكسل فأكثر) ثم تصغّرها. تكبير صورة صغيرة لا يزيدها إلا ضبابية.

يجب أن تبقى الأيقونة مميزة حتى عند 16 بكسل، فكلما كانت أبسط كان أفضل. رمز واحد خير من شعار مليء بالنصوص؛ وهامش صغير عند الحواف يمنع الازدحام عند التصغير؛ والخلفية الشفافة تناسب الوضعين الفاتح والداكن.

هكذا تضاف إلى HTML

ارفع الملفات إلى المجلد الجذري للموقع وأشر إليها بوسوم link داخل head: ‏rel="icon" لملف ICO وملفات PNG، وrel="apple-touch-icon" لأيقونة 180 بكسل، وrel="manifest" لملف site.webmanifest.

احتياطًا، تجد معظم المتصفحات ملف favicon.ico الموضوع في جذر الموقع حتى بلا وسوم. لكن لكي تعمل ملفات PNG بمقاساتها وأيقونات الشاشة الرئيسية كما ينبغي، أضف الوسوم.

لا تجمّع الطقم يدويًا

تصغير الصور واحدة واحدة وحزم ICO يدويًا عمل مرهق. أفلت صورة واحدة في مولد favicon لدى Image Converter NOW فيجهز لك favicon.ico وكل مقاسات PNG وsite.webmanifest ووسوم HTML الجاهزة للّصق — في ملف ZIP واحد.

كل شيء يعمل داخل متصفحك — شعارك لا يُرفع أبدًا إلى أي خادم.