إحصاءات استخدام مجهولة

بإذنك نسجل الصفحات التي تُزار باستخدام معرّفات عشوائية لفهم كيفية استخدام الموقع. لا يُسجَّل شيء ما لم توافق. سياسة الخصوصية

أداة مجانية

مولّد أيقونة الموقع Favicon

اصنع الأيقونة الصغيرة لتبويبات المتصفح والشاشة الرئيسية للهاتف من حروف أو إيموجي أو صورة. تحصل على كل الأحجام، وملف favicon.ico، والكود الجاهز للصق.

تعمل داخل متصفحك. ما تكتبه لا يُرسل إلى أي مكان.

حرف أو حرفان أفضل.

#0f766e
#ffffff

أو استخدم صورة

PNG أو JPG أو WebP أو SVG. وتُقصّ مربعةً من الوسط.

هكذا تظهر الأيقونة في تبويب المتصفح.

  • 16px
  • 32px
  • 180px
  • 192px
  • 512px

كود وسم <head>

ضع الملفات في جذر موقعك، ثم الصق هذا داخل وسم head في كل الصفحات.

<link rel="icon" href="/favicon.ico" sizes="any"><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"><meta name="theme-color" content="#0f766e">

ملف site.webmanifest

يجعل الهواتف تستخدم الأيقونتين الأكبر عند إضافة الموقع إلى الشاشة الرئيسية.

{  "name": "My site",  "short_name": "My site",  "icons": [    {      "src": "/android-chrome-192x192.png",      "sizes": "192x192",      "type": "image/png"    },    {      "src": "/android-chrome-512x512.png",      "sizes": "512x512",      "type": "image/png"    }  ],  "theme_color": "#0f766e",  "background_color": "#ffffff",  "display": "standalone"}

تُرسم الأيقونات في متصفحك مما اخترته. وتستخدم الحروف الخطوط الموجودة في جهازك، فتأكد من الشكل عند ١٦ بكسل قبل النشر. وتحتفظ المتصفحات بالأيقونات مدة طويلة، فقد تتأخر الأيقونة الجديدة في الظهور.

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

  1. 01اكتب حرفاً أو حرفين أو إيموجي، أو اختر صورة، ثم اختر الشكل والألوان.
  2. 02انظر إلى الأحجام الصغيرة في معاينة التبويب، وأصلح التباين إن حذّرتك الصفحة.
  3. 03نزّل كل شيء، وارفع الملفات إلى جذر موقعك، والصق الكود في الـ head.

أسئلة شائعة

ما الملفات التي أحتاجها؟

ملف favicon.ico للمتصفحات والأدوات القديمة، وصورتا PNG بحجم ١٦ و٣٢ للتبويبات، وأيقونة apple-touch-icon بحجم ١٨٠ للآيفون، وأيقونتا ١٩٢ و٥١٢ للأندرويد عبر ملف manifest. والتنزيل يشملها كلها.

أين أضع الملفات؟

في جذر الموقع، لتفتح على /favicon.ico و/apple-touch-icon.png. ثم الصق الكود المعروض في head صفحاتك. وفي منشئ المواقع غالباً مكان لرفع الأيقونة بدلاً من ذلك.

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

تخزّن المتصفحات الأيقونات بشدة. أغلق التبويب، وأعد التحميل مع مسح الذاكرة المؤقتة، أو افتح الموقع في نافذة خاصة. وقد تحتاج يوماً لتتغير في نتائج البحث.

هل أستطيع استخدام شعار بخلفية شفافة؟

نعم. يُملأ الشكل بلون الخلفية الذي تختاره وتُرسم الصورة فوقه، فتظهر الأجزاء الشفافة بذلك اللون.

هل تُرفع صورتي؟

لا. تُرسم على لوحة في متصفحك ولا تُرسل إلى أي مكان.

هوية تبدو سليمة في كل مكان

من الشعار إلى أيقونة الموقع إلى بطاقات التواصل، نصنع هويات تبقى واضحة في كل حجم.

شاهد أعمال التصميم

المزيد من الأدوات المجانية

كل الأدوات