مولّد أيقونات الموقع

ارفع صورة مربعة وحمّل جميع أحجام أيقونات الموقع التي تحتاجها مع وسوم HTML جاهزة للصق. يولّد جميع الأحجام المطلوبة للمتصفحات والأجهزة المحمولة.

أفلت صورة مربعة (PNG، JPG) أو انقر للاختيار

أو أنشئها من نص:

الخلفية

النص

الميزات

جميع الأحجام القياسية

كود وسم link

مقتطف manifest.json

تنزيل كملف zip

طريقة الاستخدام

1. اسحب صورة مربعة (PNG/JPG) إلى منطقة الرفع.

2. استعرض جميع الأحجام المولّدة.

3. انقر على تحميل للحصول عليها كملف ZIP وانسخ مقتطف HTML.

حول هذه الأداة

تظهر أيقونة الموقع في علامات تبويب المتصفح والإشارات المرجعية والسجل واختصارات الشاشة الرئيسية ونتائج البحث، وكل موضع يطلب حجمًا مختلفًا. يأخذ هذا المولّد صورة مربعة واحدة — أو حرفًا أو حرفين على خلفية ملونة — ويرسمها بأحجام 16 و32 و48 و64 و128 و180 و192 و256 و512 بكسل، مع زر تنزيل لكل ملف PNG. الأحجام الصغيرة هي حيث تفشل الأيقونات، إذ تختفي التفاصيل الدقيقة والنصوص الرفيعة عند 16 × 16، لذا تعمل الأشكال الجريئة والتباين العالي بشكل أفضل. ابدأ من صورة مربعة لا تقل عن 512 × 512 بكسل لتبقى الأحجام الكبيرة حادة. بعد التنزيل، أشِر إلى الملفات بوسوم link في قسم head من صفحتك، وأدرج الحجمين 192 و512 في ملف manifest لتطبيقات الويب القابلة للتثبيت.

الأسئلة الشائعة

ما أحجام أيقونة الموقع التي أحتاجها فعلًا؟

لمعظم المواقع: 32 × 32 لعلامات تبويب المتصفح (و16 × 16 كبديل للمتصفحات القديمة)، و180 × 180 لأيقونات Apple Touch، و192 × 192 مع 512 × 512 لنظام أندرويد وملفات manifest لتطبيقات الويب. ويُعد 48 × 48 إضافة جيدة لأن بحث Google قد يعرض أيقونات مشتقة من مضاعفات 48 بكسل.

ما شيفرة HTML التي أضيفها إلى صفحتي؟

المجموعة المعتادة هي <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> و<link rel="apple-touch-icon" href="/favicon-180x180.png"> وملف manifest يسرد الأيقونتين 192 و512. ضعها في <head> كل صفحة.

هل ينشئ ملف ‎.ico؟

لا. يصدّر ملفات PNG تقبلها جميع المتصفحات الحالية في rel="icon". وإذا احتجت إلى favicon.ico متعدد الأحجام لمتصفحات قديمة جدًا أو بعض ميزات ويندوز، فادمج ملفات PNG بأحجام 16 و32 و48 بأداة ICO مخصصة.

لماذا تبدو أيقونتي ضبابية أو غير مقروءة عند 16 بكسل؟

التفاصيل التي تنجح عند 512 بكسل تضيع عند 16 بكسل. استخدم رمزًا مبسطًا وخطوطًا أسمك وتباينًا قويًا، أو استخدم خيار النص بحرف واحد عريض يبقى مقروءًا في الأحجام الصغيرة.

لماذا لا تظهر أيقونتي الجديدة؟

تخزّن المتصفحات أيقونات المواقع مؤقتًا بإصرار شديد. امسح ذاكرة التخزين المؤقت أو افتح الموقع في نافذة خاصة، وأعد تسمية الملف أو أضف معامل إصدار مثل ?v=2 عند استبداله. وقد تستغرق محركات البحث أيامًا أو أسابيع لتحديثها.