دليل apple-touch-icon
عندما يُضيف أحدهم موقعك إلى الشاشة الرئيسية في iOS، يستخدم Safari أيقونة apple-touch-icon — وليس favicon.ico. وفّر ملف PNG بمقاس 180×180 (أو مربّعًا أكبر يُصغَّر بوضوح) واربطه في <head>.
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 هي إضافة وليست بديلًا.