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

لمعظم المواقع: favicon.ico في جذر الموقع، وapple-touch-icon.png لأجهزة iPhone وiPad، وملف manifest مع أيقونتي 192 و512 بكسل لأجهزة Android وتطبيقات الويب القابلة للتثبيت. المقتطف في الملف المضغوط يربطها جميعًا؛ الصقه في وارفع الملفات إلى المجلد الذي أدخلته.

لماذا لأيقونة Apple خلفية رغم أنني اخترت شفافة؟

يملأ نظام iOS الأجزاء الشفافة من أيقونة الشاشة الرئيسية باللون الأسود ويدوّر الزوايا بنفسه. لذلك تحصل أيقونة Apple بحجم 180 بكسل دائمًا على خلفية مربعة مصمتة: لونك أو الأبيض.

ما الأيقونة القابلة للقص (maskable)؟

يمكن لنظام Android قص الأيقونات على شكل دائرة أو مربع مستدير أو قطرة. تحتفظ الأيقونة maskable برسمها داخل الـ80% الوسطى ("المنطقة الآمنة") فوق خلفية كاملة حتى لا يُقص شيء مهم. تعرض معاينة Android القص الدائري.

مولّد الأيقونات المفضلة (Favicon)

أنشئ مجموعة أيقونات كاملة من صورة أو نص أو رمز تعبيري: favicon.ico وأيقونة Apple وأيقونات Android وmaskable وملف manifest وكود HTML للصق. يعمل في متصفحك.

لا تغادر صورتك هذا الجهاز أبدًا.

الأحرفالخطلون النص

الخلفيةشفافة

الشكل

الهامش: 10%

معاينة

الوضع الداكن

اسم الموقع (لملف manifest)مجلد الأيقونات في موقعك

يحتوي الملف المضغوط على: favicon.ico (16, 32, 48 px), PNG 16/32/180/192/512, maskable 512, site.webmanifest, head-snippet.html.

الصقه في قسم <head> في صفحتك

<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" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#0ea5e9">

أنشئ كل الأيقونات التي يحتاجها موقع حديث دون رفع أي شيء. ابدأ من شعارك أو حرف أو حرفين أو رمز تعبيري، واختر الخلفية والشكل والهامش، ثم افحص النتيجة بحجمها الحقيقي في تبويب المتصفح وعلى الشاشة الرئيسية للهاتف وكأيقونة Android تكيفية. نزّل ملفًا مضغوطًا يضم favicon.ico بعدة أحجام، وأحجام PNG التي تطلبها المتصفحات والهواتف، وأيقونة maskable تتحمل قص Android الدائري، وملف site.webmanifest جاهزًا، ووسوم <head> للصق.

مولّد الأيقونات المفضلة (Favicon)

معاينة

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

أدوات ذات صلة