كيف تعمل
- أفلت شعار PNG أو SVG مربعًا.
- اختر شكلًا وحشوًا وخلفية.
- نزّل حزمة ZIP وألصق مقتطف HTML.
لماذا تستخدمها
- favicon.ico بصور 16 و32 و48 بكسل.
- أيقونة Apple touch بخلفية موحدة.
- أيقونات Android وملف تعريف ويب وHTML جاهز للصق.
- أشكال مربعة أو مستديرة أو دائرية.
أيقونات المواقع: أي الملفات يحتاجها الموقع، وكيف تضيفها
الملفات، والغرض من كل منها
المتصفحات والهواتف ومحركات البحث يبحث كل منها عن أيقونة الموقع في مكانه وبحجمه. يحتوي ملف ZIP كل ما يحتاجه موقع حالي:
| الملف | يستخدمه |
|---|---|
| favicon.ico (بداخله 16 و32 و48 بكسل) | تبويبات المتصفح والمفضلة والأدوات التي تطلب /favicon.ico مباشرة |
| favicon-16x16.png وfavicon-32x32.png | تبويبات المتصفح على الشاشات العادية وعالية الدقة |
| favicon.svg (حين تبدأ من SVG) | المتصفحات الحديثة، حاد بكل حجم |
| apple-touch-icon.png بـ180 بكسل | الشاشات الرئيسية في iPhone وiPad |
| android-chrome-192x192.png و512x512.png | الشاشات الرئيسية في Android وتطبيقات الويب المثبتة |
| site.webmanifest | يخبر Android وChrome بالأيقونات المستخدمة واسم الموقع |
تعرض Google أيقونة الموقع بجانب نتائج بحثه، وتبحث عن أيقونة مربعة لا تقل عن 48 بكسل، وهذا ما تغطيه المجموعة.
البدء من الشعار المناسب
استخدم PNG أو SVG مربعًا بعرض 512 بكسل على الأقل. SVG هو الأفضل: كل حجم يُرسم من الأشكال، ويُرفق أيضًا كـfavicon.svg. الشعار العريض الذي بجانب رمزه اسم لا يصمد عند 16 بكسل؛ استخدم الرمز وحده، أو الحرف الأول، للأيقونة. افحص نسخة 16 بكسل في المعاينة، فهي ما يراه معظم الناس في تبويباتهم.
الشكل والحشو والخلفية
- الحشو يضيف مساحة حول الشعار داخل المربع، 6% افتراضيًا. الشعارات التي تلامس الحواف تبدو مزدحمة في التبويب.
- الشكل يقص الأيقونة إلى مربع أو مربع مستدير الزوايا أو دائرة. يظهر أكثر مع خلفية ممتلئة؛ ومع خلفية شفافة أبقِ حشوًا كافيًا كي لا تقص الزوايا الشعار.
- تعبئة الخلفية موقفة افتراضيًا، فتُحفظ الشفافية لتجلس الأيقونة على سمات المتصفح الفاتحة والداكنة. فعّلها لشعار يختفي على التبويبات الداكنة، كرمز أسود.
- خلفية أيقونة Apple touch: هواتف iPhone لا تسمح بالشفافية في أيقونات الشاشة الرئيسية وستُظهر أسود خلفها، فتحصل هذه الأيقونة وحدها دائمًا على لون مصمت، الأبيض ما لم تختر غيره.
إضافة الأيقونات إلى موقعك
ضع كل الملفات في المجلد الجذر لموقعك، بجانب الصفحة الرئيسية، والصق هذه الأسطر داخل <head> في كل صفحة. الأسطر نفسها في install.html داخل ملف ZIP:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">إن بدأت من SVG ففي المقتطف أيضًا سطر لـfavicon.svg. غيّر الاسم في site.webmanifest إلى اسم موقعك قبل الرفع؛ فهو ما يعرضه Android تحت الأيقونة على الشاشة الرئيسية.
إن لم تظهر الأيقونة الجديدة
- المتصفحات تخزن الأيقونات مؤقتًا طويلًا. افتح ملف الأيقونة مباشرة، ثم أعد تحميل الصفحة، أو تحقق في نافذة خاصة.
- نتائج البحث ما زالت تُظهر القديمة. تحدّث Google الأيقونات حين تزحف إلى الصفحة الرئيسية من جديد، وقد يستغرق ذلك أيامًا إلى أسابيع.
- الأيقونة ضبابية. كان الشعار المصدر صغيرًا. ابدأ من SVG أو PNG بـ512 بكسل أو أكثر.
طرق شائعة لاستخدام هذه الأداة
أسئلة وأجوبة
ما الحجم المناسب لشعاري؟
صورة مربعة بحجم 512 بكسل على الأقل تعطي أوضح الأيقونات. SVG مثالي.
ما هو ملف ICO؟
ICO هو صيغة الفافيكون الكلاسيكية. يمكنه احتواء عدة أحجام، وتقبل المتصفحات الحديثة صور PNG داخله.
أين تُوضَع الملفات؟
ضعها في المجلد الجذري لموقعك، وألصق المقتطف من install.html في رأس صفحتك.
أدلة ذات صلة
SVG أم PNG: أيهما للشعارات والأيقونات والرسوم التوضيحية؟
يخزّن SVG الأشكال ويخزّن PNG البكسلات، وهذا يحدد أيهما يناسب المهمة. قسنا خمسة ملفات SVG متفاوتة جدًا في تعقيدها مقابل نسخ PNG بأربعة أحجام، وحوّلنا شعارًا وختمًا وصورة فوتوغرافية إلى SVG.