شرح أحجام favicon
تطلب كل من المتصفحات وأنظمة التشغيل وعمليات التثبيت على الأجهزة المحمولة دقة مختلفة للأيقونات المفضلة. إن فهم سبب وجود كل حجم يساعدك على شحن الحد الأدنى من المجموعة القابلة للتطبيق دون ترك أي سطح دون خدمة. يعين هذا الدليل كل بُعد بكسل مشترك لغرضه ويشرح كيف يغطي مصدر واحد مقاس 512 × 512 — تمت معالجته من خلال favicon generator — كل هذه الأبعاد. للحصول على التوصية العملية، راجع أيضًا best favicon size guide.
For a longer walkthrough with FAQ and troubleshooting, see our step-by-step tutorial.
الأيقونة المفضلة مقاس 16 × 16 بكسل هي معيار الويب الأصلي. يتم استخدامه في علامات تبويب المتصفح على شاشات العرض القياسية (96 نقطة في البوصة)، وفي شريط أدوات الإشارات المرجعية على جميع متصفحات سطح المكتب، وفي بعض قوائم سجل المتصفح. نظرًا لأن 16 × 16 هي لوحة قماشية ضيقة للغاية، يجب تجريد تصميم الأيقونة المفضلة لديك إلى أبسط أشكالها: شكل واحد، أو حرف، أو علامة مجردة. أي شيء أكثر تعقيدًا سيكون غير مقروء.
يضاعف حجم 32 × 32 بكسل حجم 16 × 16 ويقدم علامات تبويب متصفح شبكية العين/HiDPI بكثافة 2x، وأيقونات الإشارات المرجعية عند DPI عالية، وأيقونات اقتراحات شريط العناوين في Chrome. تطلب المتصفحات الحديثة 32×32 في كثير من الأحيان أكثر من 16×16 حيث أصبحت شاشات العرض عالية الكثافة هي غالبية الأجهزة. إذا كان بإمكانك شحن مقاس واحد فقط، فسيكون 32×32 هو الخيار الأكثر تأثيرًا.
حجم 48 × 48 بكسل هو حجم عرض "الأيقونات المتوسطة" في Windows Explorer وهو الحد الأدنى المطلوب بواسطة بحث Google لأهلية الرمز المفضل في مقتطفات نتائج البحث. تظهر المواقع التي لا يتوافق رمزها المفضل مع الحد الأدنى 48 × 48 مع رمز الكرة الأرضية العام بجوار عنوان URL الخاص بها في نتائج Google بدلاً من علامة علامتها التجارية. قم دائمًا بتضمين 48 × 48 في حزمة .ico الخاصة بك.
يتم استخدام حجم 64 × 64 بكسل في عرض الأيقونات الكبيرة Windows Explorer وفي بعض بيئات سطح مكتب Linux. يؤدي تضمينه في ملف .ico متعدد الأحجام إلى إضافة حمل لا يُذكر ولكنه يضمن عرضًا نظيفًا في مديري الملفات وبيئات الصدفة. تتضمن العديد من أدوات إنشاء الأيقونة المفضلة 64 بشكل افتراضي كجزء من حزمة .ico القياسية.
يخدم حجم 128 × 128 بكسل مربعات تطبيقات متجر Windows والصور المصغرة لشريط المهام عالي الكثافة. تكون هناك حاجة إليه بشكل أقل شيوعًا لأيقونات الويب المفضلة فقط، ولكنه مهم إذا تم تجميع موقعك كـ PWA أو إذا قام المستخدمون بتثبيته كتطبيق Windows. تجميعه داخل .ico مع ضغط PNG يبقي حجم الملف معقولًا.
يعد حجم 256 × 256 بكسل هو أكبر إطار .ico قياسي. يتم استخدامه لاختصارات سطح المكتب Windows ونتائج البحث في قائمة ابدأ Windows وبعض السياقات المثبتة على التطبيق. في هذا القرار، يجب عليك استخدام ضغط PNG داخل حاوية .ico بدلاً من BMP - تضيف صورة BMP مقاس 256 × 256 غير المضغوطة 256 كيلو بايت إلى ملف .ico دون داع.
حجم 180 × 180 بكسل مخصص حصريًا لـ iOS apple-touch-icon. عندما ينقر مستخدم iPhone أو iPad على "إضافة إلى الشاشة الرئيسية"، يجلب Safari الصورة المعلنة في `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon'>`. يغطي هذا الحجم جميع طرز iPhone الحالية (يستخدم iPhone 6 Plus والإصدارات الأحدث 180×180 بكثافة 3x؛ وتستخدم الطرز القديمة 120×120 و152×152 - ملف واحد 180 يغطيها جميعها بأمان).
يعد حجم 192 × 192 بكسل هو الحد الأدنى للرمز المطلوب في بيان تطبيق الويب (site.webmanifest) لمطالبة تثبيت Android Chrome's PWA. عندما يضيف المستخدمون PWA إلى شاشتهم الرئيسية Android، يعرض Chrome رمز 192 × 192 في المشغل وأيقونة التطبيق في مبدل التطبيقات الحديثة. بدون هذا الحجم في البيان، تظهر مطالبة التثبيت PWA إما رمزًا عامًا أو يفشل في التشغيل على الإطلاق.
حجم 512 × 512 بكسل هو رمز البيان المطلوب الثاني. ويستخدمه Chrome لشاشة البداية PWA التي يتم عرضها أثناء تحميل التطبيق بعد تشغيل الشاشة الرئيسية، ولمعاينة مربع حوار التثبيت على سطح المكتب Chrome OS. وهو أيضًا حجم المصدر المثالي لإنشاء جميع المتغيرات الأصغر - بدءًا من 512 × 512 مما يضمن احتفاظ كل مخرجات مختزلة بحواف حادة وألوان دقيقة.
تُستخدم الأحجام التي تتراوح بين 512×512 والأحجام الكبيرة جدًا 1024×1024 بشكل أساسي لأيقونات التطبيقات الأصلية على عمليات إرسال macOS وiOS App Store، وليس لأيقونات الويب المفضلة. ومع ذلك، إذا كنت تخطط لتحويل تواجدك على الويب إلى تطبيق أصلي باستخدام برنامج تضمين (Electron، Capacitor، Tauri)، فستحتاج إلى 1024×1024 لعملية مراجعة App Store. قم بتخزين هذا الملف الرئيسي بجانب حزمة الأيقونة المفضلة لديك.
تعد الرموز المفضلة SVG مستقلة عن الدقة وتغطي كل الكثافة بملف واحد. سيفضل المتصفح الذي يدعم الرموز المفضلة SVG (Chrome 80+، Edge 80+، Firefox 41+، Safari 15+) SVG على أي حجم نقطي لأنه يتم عرضه بشكل مثالي عند 1x أو 2x أو 3x أو أي DPI مخصص. والمقايضة هي أن ليس كل السياقات تدعم SVG - لا تزال اختصارات Windows وقارئات RSS والأدوات القديمة بحاجة إلى احتياطي .ico.
من المهم فهم العلاقة بين الأحجام وحاوية .ico. ملف .ico ليس صورة واحدة، بل هو أرشيف متعدد الصور. كل إطار بداخله عبارة عن صورة نقطية منفصلة بحجم مختلف. يقرأ المتصفح الدليل ICO، ويحدد الإطار الذي يتوافق بشكل أفضل مع الحجم الذي يحتاجه، ويقوم بفك تشفير هذا الإطار فقط. ولهذا السبب يمكن لملف .ico واحد أن يخدم علامات تبويب بحجم 16 و32 و48 و64 بكسل بشكل متساوٍ.
الحد الأدنى الموصى به لموقع ويب الإنتاج في عام 2026 هو: favicon.ico تجميع الإطارات 16 و32 و48 و64 بكسل؛ apple-touch-icon.png بحجم 180×180؛ android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg للمتصفحات الحديثة؛ و site.webmanifest يشير إلى 192 و 512 PNGs. يُنتج favicon generator هذه المجموعة الكاملة من تحميل مصدر واحد بنقرة واحدة.
يعد التحقق مما إذا كانت جميع أحجام الأيقونات المفضلة لديك قد تم تقديمها بشكل صحيح أمرًا سهلاً باستخدام favicon tester. أدخل عنوان URL لموقعك وسيحاول المختبر جلب favicon.ico، ويتحقق من علامات الارتباط في رأس HTML، ويعرض معاينة لكل حجم. يتم وضع علامة على الأحجام المفقودة بتوصيات قابلة للتنفيذ.
كيف يعمل
- 1
تحديد الأحجام التي تحتاج إليها
بالنسبة لموقع ويب قياسي: 16، 32، 48، 64 (بتنسيق .ico) + 180 (apple-touch-icon) + 192، 512 (البيان PNGs). أضف 128 و256 إلى .ico إذا كان جمهورك يستخدم بشكل متكرر Windows مع اختصارات سطح المكتب.
- 2
توليد من مصدر 512 × 512
قم بتحميل 512×512 PNG أو SVG إلى [favicon generator](tool:favicon-generator). يقوم بتصدير كل الحجم المطلوب ويجمعها في .ico وPNGs المستقلة والبيان تلقائيًا.
- 3
ضع كل ملف في جذر موقعك
favicon.ico، apple-touch-icon.png، android-chrome-192x192.png، android-chrome-512x512.png، favicon.svg - كل ذلك على عنوان URL الجذر لنطاقك.
- 4
أضف علامات الارتباط في <head>
استخدم مقتطف HTML الذي تم إنشاؤه. تحدد كل علامة ارتباط سمة الحجم حتى تعرف المتصفحات بالضبط الملف الذي سيتم جلبه وكثافة العرض.
- 5
التحقق من صحة مع اختبار المفضلة
استخدم [favicon tester](utility:favicon-tester) للتأكد من أن كل حجم يتم حله بشكل صحيح وتحقق من كيفية عرض الرمز الخاص بك عند 16 و32 و512 بكسل.
جربه الآن
إنشاء كل حجم المفضلة
مولد Faviconالأسئلة الشائعة
ما هو عدد أحجام الأيقونات المفضلة التي أحتاجها بالفعل؟+
على الأقل: ملف .ico متعدد الأحجام (16/32/48) + 180×180 apple-touch-icon + 192×192 و512×512 للبيان PWA. إجمالي ستة ملفات. يقوم [favicon generator](tool:favicon-generator) بإنتاجها جميعًا في تنزيل واحد.
هل يمكن أن تعمل صورة واحدة لجميع الأحجام؟+
نعم — ابدأ من 512×512 PNG أو SVG وقم بإنشاء كل حجم أصغر برمجيًا. لا تقم أبدًا بترقية شعار صغير. يتمتع المصدر مقاس 512 × 512 بكثافة بكسل كافية لإنتاج عينات منخفضة بدقة 16 × 16 و32 × 32.
ما الحجم الذي يستخدمه بحث Google؟+
تتطلب Google ما لا يقل عن 48 × 48 بكسل وتنسيقًا مربعًا وعنوان URL متاحًا للعامة. قم بتجميع 48 × 48 داخل ملف .ico الخاص بك للتأكد من أن الرمز المفضل لديك مؤهل للعرض في نتائج البحث العضوية.
هل تستخدم جميع المتصفحات نفس حجم الأيقونة المفضلة؟+
رقم Chrome، وFirefox، وEdge، وSafari لكل منها تفضيلات حجم مختلفة قليلاً، ويعتمد الحجم المعروض على كثافة العرض لدى المستخدم. يتيح ملف .ico متعدد الأحجام لكل متصفح اختيار الإطار المفضل له دون أي علامات ارتباط إضافية.
ما الفرق بين أحجام الأيقونة المفضلة وأحجام apple-touch-icon؟+
أحجام الأيقونة المفضلة (16-256 بكسل) مخصصة لعلامات تبويب المتصفح والإشارات المرجعية وواجهة المستخدم Windows/Linux. أحجام أيقونات اللمس Apple (120، 152، 167، 180 بكسل) مخصصة لأيقونات الشاشة الرئيسية iOS. يخدم الاثنان أسطحًا مختلفة تمامًا ويتم تحديدهما عبر سمات مختلفة لعلامة الارتباط.
هل هناك حد أقصى لحجم الرمز المفضل؟+
يدعم تنسيق .ico ما يصل إلى 256 × 256 لكل إطار. بالنسبة لاستخدام الويب، يعد 512×512 PNG أكبر حجم مفيد بشكل شائع (بيان PWA). لا يوجد حد أقصى تقني لـ PNG، لكن الأحجام التي تزيد عن 512×512 لا يتم استخدامها بواسطة أي متصفح أو نظام تشغيل حالي لعرض الأيقونة المفضلة.
لماذا يبدو رمز المفضلة الخاص بي ضبابيًا في شريط الإشارات المرجعية؟+
على الأرجح أنك قمت بشحن 16×16 أو 32×32 PNG فقط، ويقوم المتصفح بتمديدها على شاشة عالية الدقة لكل بوصة. قم بتضمين إطار بحجم 64 × 64 أو 128 × 128 في حزمة .ico الخاصة بك، أو أضف علامة `<link rel='icon' sizes='64x64' href='/favicon-64x64.png'>` صريحة.