دليل apple-touch-icon
عندما يُضيف أحدهم موقعك إلى الشاشة الرئيسية في iOS، يستخدم Safari أيقونة apple-touch-icon — وليس favicon.ico. وفّر ملف PNG بمقاس 180×180 (أو مربّعًا أكبر يُصغَّر بوضوح) واربطه في <head>.
تحقق من أيقونات أي موقع
ثبّت إضافة FetchFavicon لمتصفح Chrome لاستخراج الأيقونات ومعاينتها والتحقق منها فورًا.
Apple لا يُطبّق القناع على مقاطع الويب في iOS الحديث كما يفعل مع التطبيقات الأصلية، لكن أيقونتك يجب أن تبقى مربّعة مع هوامش أمان — أبقِ الشعار بعيدًا عن الحواف بنسبة 10% تقريبًا حتى لا تقتطع الزوايا المستديرة أي جزء من التصميم.
استخدم <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">. ملف واحد بمقاس 180×180 يُغطّي جميع أجهزة iPhone الحالية؛ يمكنك اختياريًا إضافة مقاسي 152×152 و167×167 لتخطيطات iPad القديمة.
كيف يعمل
- 1
صدّر PNG بمقاس 180×180
من مولّد FetchFavicon أو أداة تغيير حجم الصور.
- 2
ارفعه إلى جذر الموقع
/apple-touch-icon.png بجوار favicon.ico.
- 3
أضف وسم الربط
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> في <head>.
جربه الآن
أنشئ apple-touch-icon
مولد Faviconالأسئلة الشائعة
ما مقاس apple-touch-icon؟+
180×180 بكسل لأجهزة iPhone الحالية. صدّره من ملف رئيسي بمقاس 512×512 أو 1024×1024.
PNG أم ICO لأجهزة iOS؟+
PNG فقط. نظام iOS يتجاهل .ico لأيقونات الشاشة الرئيسية.
هل لا يزال favicon.ico ضروريًا؟+
نعم — علامات التبويب والمتصفحات الأخرى لا تزال تستخدم .ico. أيقونة apple-touch-icon هي إضافة وليست بديلًا.