أفضل أحجام favicon للمواقع

تظهر العشرات من الأحجام في أوراق الغش القديمة. يسرد هذا الدليل ما تطلبه المتصفحات وأنظمة التشغيل فعليًا في عام 2026، ويعرض مصفوفة الحجم مع الأمثلة، ويوصي بأصغر مجموعة لا تزال تغطي كل الأسطح.

6 دقيقة قراءة

لماذا لا يزال الحجم مهمًا

يتم تغيير حجم favicon إلى العديد من وحدات البكسل الفعلية: 16×16 في علامة التبويب، 32×32 على شريط الإشارات المرجعية Retina، 180×180 على شاشة iPhone الرئيسية، 512×512 على شاشة البداية PWA. صورة واحدة لا يمكن أن تخدمهم جميعا بشكل جيد. استخدم [مولد favicon](الأداة:مولد favicon)، و[محول PNG إلى ICO](الأداة:png-to-ico)، و[محول SVG إلى ICO](الأداة:svg-to-ico)، و[اختبار favicon المباشر](الأداة المساعدة: favicon-tester) لإنشاء مجموعة الرموز الخاصة بك والتحقق منها، وقراءة [الرفيق دليل](الدليل:شرح مقاسات favicon) للحصول على إرشادات تفصيلية مكثفة.

يؤدي رفع مستوى مصدر صغير إلى حدوث ضبابية. يؤدي تصغير الحجم إلى 1024 × 1024 بدون اختبار إلى فقدان الخطوط الدقيقة. الإصلاح عبارة عن مجموعة صغيرة من عمليات التصدير المخصصة لهذا الغرض، أو واحدة متعددة الأحجام .ico تتضمن إطارات سطح المكتب الشائعة.

يعد شحن كل حجم مدرج في منشورات المدونة القديمة أمرًا إسرافًا. الشحن القليل جدًا يترك فجوة واضحة على منصة واحدة. تعكس المصفوفة أدناه الطلبات الحقيقية التي تم قياسها في 2026 متصفحًا.

Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.

ما تطلبه المتصفحات

تعرض علامات تبويب سطح المكتب عادةً رمزًا بحجم 16 × 16 CSS بكسل، والذي يتم تعيينه إلى 16 × 16 أو 32 × 32 بكسل للجهاز اعتمادًا على كثافة العرض.

غالبًا ما تستخدم أشرطة الإشارات المرجعية وعلامات التبويب المثبتة 32×32 أو 48×48. قد يقوم Chromium باختيار الإطار المضمن الأقرب من favicon.ico تلقائيًا.

تتناسب جميع أحجام علامات التبويب الثلاثة الشائعة (16، 32، 48) بشكل مريح داخل جهاز واحد متعدد الأحجام .ico. ولهذا السبب تظل حاوية .ico هي تنسيق التسليم المكتبي الأكثر كفاءة.

ما تطلبه أنظمة التشغيل

قد تطلب قائمة ابدأ Windows ودبابيس شريط المهام واختصارات File Explorer 24×24 أو 32×32 أو 48×48 أو 64×64 أو 128×128 أو 256×256 اعتمادًا على السياق وقياس العرض.

مستندات Microsoft 16 و24 و32 و48 و64 و128 و256 كمجموعة عملية لتطبيقات Windows. تستفيد مواقع الويب favicon من تجميع ما لا يقل عن 16 إلى 256 في favicon.ico.

يفضل macOS .icns للتطبيقات الأصلية ولكنه يستهلك بسعادة .ico وPNG لاختصارات الويب. يتجاهل iOS .ico لأيقونات الشاشة الرئيسية ويريد 180 × 180 PNG مخصصًا عبر أيقونة apple-touch.

ما PWAs وطلب الجوال

تتطلب بيانات تطبيق الويب أيقونات ذات غرض محدد وقابلة للإخفاء اختياريًا. الأحجام الشائعة هي 192×192 و512×512 PNG.

يستخدم Android Chrome رموز البيان لتثبيت واجهة المستخدم وشاشات البداية. مصدر 512×512 يخفض الحجم بشكل نظيف؛ يبدو البيان مقاس 192 × 192 فقط ناعمًا على الهواتف المتطورة.

لا يقرأ iOS أيقونات البيان لوضعها على الشاشة الرئيسية. يجب أن تعلن <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">.

مصفوفة الحجم في لمحة

16×16 — علامات تبويب المتصفح (1× الكثافة). 32×32 - علامات التبويب والإشارات المرجعية على شاشات Retina. 48×48 — بعض سياقات واجهة المستخدم Windows واستخدامات الإشارات المرجعية القديمة.

64×64 و128×128 - اختصارات Windows بقياس أعلى. 256 × 256 - Windows مربعات مثبتة ومعاينات عالية الدقة لكل بوصة.

180 × 180 - أيقونة لمس التفاح (iOS / iPadOS). 192×192 و512×512 — أيقونات بيان PWA لـ Android ومطالبات التثبيت.

أمثلة حسب نوع الموقع

المدونة الشخصية: favicon.ico بتاريخ 16/32/48 فقط. مقبول إذا كنت لا تهتم بتلميع الشاشة الرئيسية iOS.

موقع تسويق الشركة: حزمة .ico بالإضافة إلى 180×180 رمز apple-touch بالإضافة إلى 32×32 PNG <link> لعلامات تبويب Retina الصريحة.

PWA قابل للتثبيت: .ico كامل، رمز apple-touch، البيان 192 + 512، SVG اختياري لكروم واجهة المستخدم القابلة للتطوير.

تطبيق Electron لسطح المكتب: Windows .ico مع 16–256؛ macOS .icns بشكل منفصل إذا قمت بالتوزيع خارج المتصفح.

الحد الأدنى لمجموعة قابلة للحياة

مقاسات متعددة favicon.ico (16، 32، 48، 64، 128، 256) في /favicon.ico.

apple-touch-icon.png بحجم 180×180 للشاشات الرئيسية iOS.

واحد 512×512 PNG في site.webmanifest لأسطح التثبيت Android.

يغطي هذا الثلاثي ما يقرب من 95% من طلبات الأيقونات في العالم الحقيقي. أضف SVG عندما تريد تغيير الحجم بشكل لا نهائي وتصميم الوضع الداكن في علامات التبويب الحديثة.

الأسئلة المتداولة

هل أحتاج إلى 16×16 PNG إذا كان داخل .ico؟ لا، إلا إذا كنت تريد <link rel="icon" sizes="16x16"> صريحًا لتصحيح الأخطاء.

هل لا يزال 120 × 120 مطلوبًا؟ كان هذا بحجم iOS القديم. يتوقع Safari الحديث 180×180.

ماذا عن 64×64 favicons؟ مفيد داخل .ico لـ Windows؛ نادرا ما تكون هناك حاجة إليها باعتبارها PNG مستقل.

هل يمكنني تخطي 256 × 256؟ فقط إذا كنت لا تهتم مطلقًا بمعاينات الاختصارات ذات الدقة العالية في البوصة Windows. معظم الفرق تشمل ذلك.

استكشاف الأخطاء وإصلاحها

تحتوي أيقونة iOS على زوايا مستديرة وتبدو مقصوصة: هذا هو إخفاء iOS - تصميم بحشوة آمنة، وليس خطأ في ملفك.

يُظهر تثبيت PWA رمزًا عامًا: أيقونات البيان مفقودة أو أقل من 192 × 192 كحد أدنى. التحقق من صحة JSON باستخدام Chrome DevTools → التطبيق.

رمز علامة التبويب ناعم على Retina Mac: تأكد من أن favicon.ico يحتوي على إطار مقاس 32×32، وليس 16×16 فقط.

تنزيل ضخم لـ .ico: قمت بتضمين 256×256 BMP غير مضغوطة. أعد البناء بالضغط PNG داخل الحاوية.

نسبة بكسل الجهاز والحجم المدرك

CSS بكسل ليست بكسلات فعلية. غالبًا ما تقوم فتحة علامة التبويب 16 × 16 الموجودة على شاشة 2 × بتحميل صورة نقطية مقاس 32 × 32 من أجل الوضوح.

ولهذا السبب يتفوق جهاز favicon.ico الذي يحتوي على 16 و32 إطارًا على إطار واحد مقاس 16×16 PNG على أجهزة Retina MacBooks وأجهزة الكمبيوتر المحمولة ذات DPI العالية Windows.

تعرض Android PWAs أيقونات البيان على شاشات البداية بدقة الجهاز الكاملة - يبدو مصدر 192 × 192 ممتدًا إلى هاتف بدقة 1440 بكسل ناعمًا؛ 512×512 مقياس تنازلي نظيف.

يطبق iOS قناعه الخاص ونصف قطر الزاوية على أصول رمز apple-touch. تصميم ببطانة آمنة بحيث لا يتم قص الحواف المهمة بواسطة السنجاب.

عند الاختبار، قم بتصوير علامة التبويب عند تكبير المتصفح بنسبة 100% وتحجيم نظام التشغيل بنسبة 200%. إذا كان كلاهما يبدو واضحًا، فمن المحتمل أن تكون مصفوفة الحجم الخاصة بك صحيحة.

كيفية تدقيق تغطية الحجم الحالي الخاص بك

قم بتنزيل favicon.ico وافتحه في أداة تسرد الإطارات المضمنة. تأكد من وجود 16 و32 و48 وإطار واحد عالي الحجم على الأقل.

قم بإحضار apple-touch-icon.png وتحقق من الأبعاد في أي مفتش للصور - توقع 180×180، وليس 120×120 من القوالب القديمة.

افتح site.webmanifest وتحقق من أن الأيقونات[] تتضمن 192×192 و512×512 مع المسارات الصحيحة وأنواع الصور/png.

قم بتحميل موقعك في Chrome DevTools → التطبيق → Manifest. تعرض الإدخالات المفقودة أو غير الصالحة تحذيرات قبل أن يرى المستخدمون مربع حوار التثبيت المعطل.

احتفظ بجدول بيانات يعين كل ملف للمستهلك (علامة التبويب، iOS، PWA، Windows). لن تضطر في المستقبل إلى إجراء هندسة عكسية لمجلد الأصول أثناء تغيير العلامة التجارية.

التدقيق المستقبلي لمجموعة الحجم الخاصة بك

تظهر فئات الأجهزة الجديدة ببطء في أرض favicon. تغطي أيقونات البيان مقاس 512 × 512 اليوم واجهات المستخدم القابلة للطي وتثبيت الأجهزة اللوحية بشكل أفضل من 192 وحدها.

تجنب الأحجام الغريبة (96×96، 120×120) ما لم يفرضها مستند نظام أساسي محدد - فهي تضيف عبء التأليف دون فائدة واسعة النطاق.

قم بتخزين المتجه الرئيسي أو البيانات النقطية مقاس 1024 × 1024 في مستودع التصميم الخاص بك حتى لو لم تقم بشحنه مطلقًا. قد تطلب الأنظمة الأساسية المستقبلية أيقونات بيان أكبر.

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

جرب الأدوات

متابعة القراءة

استكشف FetchFavicon

الفئات

المحوّلات

الأدوات

الأدلة

الدروس