مولد أيقونة الموقع (Favicon)
Every favicon size, a real multi-size .ico and a web manifest from one image. كل شيء يعمل محليًا — لا يُرفع أي شيء.
- الإدخال
- PNG · JPEG · WebP · SVG
- الإخراج
- ICO · PNG · webmanifest · ZIP
أسقط شعارك
PNG أو JPEG أو WebP أو SVG. الأفضل صورة مربعة لا تقل عن 512 × 512 بكسل. يمكنك أيضًا لصق صورة.
كل ملفات favicon من صورة واحدة
يحوّل مولد favicon هذا شعارًا واحدًا إلى المجموعة الكاملة التي يحتاجها الموقع اليوم: ملف favicon.ico يضم أيقونات بمقاس 16 و32 و48 بكسل، وصور PNG حادة من 16 إلى 512 بكسل، وأيقونة Apple touch، وأيقونات Android Chrome، وملف site.webmanifest، ووسوم HTML التي تلصقها في صفحتك. اجعل الصورة مربعة، وأضف حشوة، ودوّر الزوايا أو ضعها على خلفية مصمتة، ثم نزّل كل شيء في ملف ZIP واحد. يجري تغيير المقاسات وبناء ملف ZIP على جهازك، فلا يُرفع شعارك إلى أي مكان.
كيف تنشئ favicon
- أسقط صورة PNG أو JPEG أو WebP أو SVG على الصفحة، أو الصقها. الشعار المربع بمقاس 512 × 512 بكسل على الأقل، أو ملف SVG، يعطي أوضح نتيجة.
- اختر احتواء للإبقاء على الصورة كاملة مع مساحة حولها، أو ملء لقصّها إلى مربع. أضف حشوة ونصف قطر للزوايا إن أردت مربعًا مستدير الحواف.
- اختر لون الخلفية أو اتركها شفافة. تحصل أيقونة Apple touch دائمًا على خلفية مصمتة، لأن iOS يلوّن المناطق الشفافة بالأسود.
- املأ اسم التطبيق وألوانه لملف web manifest، ثم اضغط تنزيل ZIP، أو نزّل الملفات منفردة من المعاينة.
- ارفع الملفات إلى جذر موقعك والصق وسوم HTML في
<head>في كل صفحة.
ما ملفات favicon التي تحتاجها المتصفحات الحديثة فعلًا؟
نصائح favicon مليئة ببقايا عام 2012: عشرات المقاسات، وملفات XML لمربعات Windows، وأقنعة الألسنة المثبتة في Safari. أما المتصفحات اليوم فتبحث عن أقل من ذلك بكثير. أربعة ملفات تغطي عمليًا كل متصفح وهاتف ونظام تشغيل مستخدم.
كل ما عدا ذلك في ملف ZIP موجود للاكتمال: صور PNG بمقاس 16 و32 و48 بكسل للأدوات وأنظمة إدارة المحتوى التي تطلبها بالاسم، ومربع Windows اختياري بمقاس 150 × 150 للمواقع المثبتة في الإصدارات القديمة. الملفات الإضافية لا تضر، لكنك لست مضطرًا إلى ربطها كلها.
- favicon.ico
- البديل العام. تطلب المتصفحات /favicon.ico من تلقاء نفسها حتى لو لم يشر إليه أي وسم، وكذلك قارئات RSS ومديرو الإشارات المرجعية وزواحف الويب. يضم الملف الواحد نسخًا بمقاس 16 و32 و48 بكسل، وكل منها صورة PNG داخل حاوية ICO، وهو ما يقرؤه كل متصفح منذ Windows Vista.
- icon.svg
- أيقونة متجهية تبقى حادة في كل مقاس ومستوى تكبير. تستخدمها Chrome وEdge وFirefox والإصدارات الحديثة من Safari عند ربطها. لن تحصل عليها إلا إذا بدأت من ملف SVG؛ فالصورة النقطية لا يمكن أن تصبح متجهًا حقيقيًا.
- apple-touch-icon.png
- صورة PNG معتمة بمقاس 180 × 180 تعرضها أجهزة iPhone وiPad عندما يضيف أحدهم موقعك إلى الشاشة الرئيسية. يطبّق iOS قناع الزوايا المستديرة الخاص به، لذا ينبغي أن تكون الزوايا مربعة والخلفية مصمتة.
- أيقونات Manifest
- صورتا PNG بمقاس 192 و512 بكسل مُدرجتان في site.webmanifest. يستخدمهما Android لاختصار الشاشة الرئيسية ولشاشة البداية في تطبيق الويب المثبت، ويتحقق Chrome من وجودهما قبل أن يعرض تثبيت الموقع.
وسوم HTML التي تلصقها
يربط المقتطف ملف ICO بالخاصية sizes="32x32" بدلًا من sizes="any". فمع "any" يفضّل Chrome ملف ICO حتى عند توفر SVG. وعندما ترفع ملف SVG يربطه المقتطف أيضًا، فتستخدمه المتصفحات التي تدعم أيقونات SVG ويعود الباقي إلى ICO. ومن دون SVG تُربط صورتا PNG بمقاس 32 و16 بكسل بدلًا منه.
يلوّن الوسم الوصفي theme-color شريط أدوات المتصفح في Android وSafari، ويحمل site.webmanifest اسم تطبيقك وألوانه والأيقونات الكبيرة. أبقِ أسماء الملفات كما هي وضع كل ملف في جذر نطاقك، أو غيّر المسارات في المقتطف لتطابق المكان الذي وضعتها فيه.
تصميم favicon يصمد في 16 بكسل
- بسّط. الأيقونة بمقاس 16 × 16 تضم 256 بكسل فقط. الشعارات النصية والخطوط الدقيقة تصبح مشوشة؛ أما حرف واحد أو رمز أو علامة الشعار من دون نصها فيُقرأ أفضل بكثير.
- استخدم تباينًا يصلح لكلا لوني الألسنة. ألسنة المتصفح فاتحة أو داكنة بحسب السمة. تعرض المعاينة كل مقاس على مربع أبيض وآخر شبه أسود، فتلاحظ الشعار الداكن الذي يختفي في الوضع الداكن قبل نشره.
- ضعه على مربع إن ترددت. الخلفية المصمتة مع قليل من الحشوة ونصف قطر للزوايا تُبقي الشعار الرفيع أو الشفاف ظاهرًا على أي لسان، وتبدو مقصودة على الشاشة الرئيسية.
- ابدأ بصورة كبيرة. تُصغَّر الصور على خطوات تنصيف للحصول على حواف نظيفة، لكن لا شيء يضيف تفاصيل غير موجودة في المصدر. أعطه 512 بكسل أو أكثر، أو ملف SVG.
- تحقق من الألوان. إن كان لون علامتك باهتًا على لسان أبيض أو داكن، فاختبره باستخدام مدقق التباين، أو حوّل قيمة أُعطيت لك بصيغة أخرى باستخدام محول الألوان.
لماذا لا يوجد رفع
ترسل معظم مولدات favicon شعارك إلى خادم لتغيير مقاسه. أما هذا فيرسم كل مقاس على لوحة canvas في متصفحك، ويكتب ملف ICO بايتًا بايتًا بلغة JavaScript، ويبني ملف ZIP بوحدة WebAssembly صغيرة، فلا تغادر الصورة جهازك وتواصل الأداة العمل دون اتصال بعد تحميل الصفحة. وهذا مهم لعلامة تجارية لم تُطلق بعد أو لشعار عميل لا يُفترض أن تشاركه الآن.
الأسئلة الشائعة
- ما المقاس المناسب لأيقونة favicon؟
- تعرض ألسنة المتصفح أيقونات favicon بمقاس 16 × 16 بكسل CSS، أي 32 × 32 على الشاشات عالية الكثافة، لذا يضم ملف ICO نسخًا بمقاس 16 و32 و48 بكسل. أضف أيقونة Apple touch بمقاس 180 × 180 وأيقونتين بمقاس 192 و512 بكسل لملف web manifest وتكون قد غطيت كل الحالات الشائعة. ابدأ من صورة لا تقل عن 512 × 512 بكسل.
- هل ما زلت أحتاج إلى ملف favicon.ico؟
- نعم. تطلب المتصفحات وقارئات الخلاصات وزواحف الويب /favicon.ico تلقائيًا حتى عندما لا يشير إليه أي وسم، والمتصفحات القديمة لا تفهم إلا ICO. احتفظ بواحد في جذر موقعك إلى جانب أيقونات SVG وPNG.
- هل يمكنني استخدام SVG كأيقونة favicon؟
- نعم. تدعم Chrome وEdge وFirefox وإصدارات Safari الحديثة أيقونات SVG عبر وسم link بالخاصية type="image/svg+xml". ارفع ملف SVG هنا فيُضمَّن باسم icon.svg بجانب ملف ICO الاحتياطي، ويربط مقتطف HTML كليهما.
- ما هي apple-touch-icon؟
- هي صورة PNG بمقاس 180 × 180 بكسل يستخدمها iPhone أو iPad عندما يضيف أحدهم موقعك إلى الشاشة الرئيسية. ينبغي أن تكون خلفيتها مصمتة وزواياها مربعة، لأن iOS يدوّر الزوايا بنفسه ويحوّل المناطق الشفافة إلى الأسود.
- لماذا لا تظهر أيقونة favicon في موقعي؟
- تخزّن المتصفحات أيقونات favicon مؤقتًا بشدة، غالبًا لأيام. تأكد من أن الملف متاح على المسار الموجود في وسم link، ثم أعد التحميل الكامل أو افتح الموقع في نافذة خاصة. تغيير اسم الملف أو إضافة استعلام إصدار مثل favicon.ico?v=2 يفرض تنزيلًا جديدًا.
- كيف أحوّل PNG إلى ICO؟
- أسقط صورة PNG على هذه الصفحة ونزّل favicon.ico. يغيّر المولد مقاسها إلى 16 و32 و48 بكسل ويجمع الثلاثة في ملف ICO واحد، مع تخزين كل مقاس كصورة PNG داخل الحاوية.
- ما فائدة ملف site.webmanifest؟
- هو ملف JSON صغير يخبر Android وChrome باسم موقعك ولون السمة ولون الخلفية والأيقونتين بمقاس 192 و512 بكسل لاستخدامها عند إضافة الموقع إلى الشاشة الرئيسية أو تثبيته كتطبيق.
- هل يُرفع شعاري إلى خادم؟
- لا. تُرسم كل أيقونة وتُرمَّز في متصفحك ويُبنى ملف ZIP على جهازك. لا يُرسل أي شيء إلى أي مكان، وتواصل الصفحة العمل دون اتصال بعد تحميلها.