مولّد Favicon
أنشئ favicon من أحرف أو رمز تعبيري أو صورة: ملف favicon.ico متعدد الأحجام وصور PNG من 16 إلى 512 بكسل وApple touch icon وملف manifest ووسوم HTML. داخل المتصفح.
حتى 3 محارف، مثل "A" أو "AK" أو "🚀".
ما هو مولّد Favicon؟
ولّد مجموعة favicon كاملة لموقعك من أحرف أو رمز تعبيري (بألوانك وشكلك) أو من صورة. تحصل على favicon.ico متعدد الأحجام (16 و32 و48 بكسل) وأيقونات PNG بأحجام 16 و32 و48 و180 (Apple touch icon) و192 و512 بكسل، وملف site.webmanifest، ووسوم HTML <link> لتلصقها في <head>.
كيفية استخدام مولّد Favicon
- اختر المصدر: نص أو رمز تعبيري، أو الصورة (الصورة المربعة هي الأفضل).
- اضبط الشكل والخلفية ولون النص، واسم التطبيق (لملف manifest).
- اضغط تنزيل favicon.ico ونزّل ملفات PNG التي تحتاجها من المعاينات.
- انسخ HTML لوسم <head> وملف site.webmanifest، وضع كل الملفات في المجلد الجذر لموقعك.
مثال
Text "A", Rounded, Background #4f46e5
<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">
إضافةً إلى favicon.ico (16 و32 و48 بكسل) وست ملفات PNG.
متى تستخدم مولّد Favicon
استخدمه للمواقع الجديدة والمشاريع الجانبية والأدوات الداخلية ومواقع التوثيق. وإن كان لديك شعار مفصّل فصمّم نسخًا مبسّطة لـ 16 و32 بكسل لأن التفاصيل الدقيقة تختفي عند هذه الأحجام. واستخدم favicon بصيغة SVG إضافةً إن أردت أيقونة حادة تتكيّف مع الوضع الداكن.
كيف يعمل مولّد Favicon
يُرسَم كل حجم على canvas مستقل: يُملأ الشكل بلون الخلفية وتُوضع حتى ثلاثة أحرف في المنتصف وتُحجَّم بحسب حجم الأيقونة، أو تُقتطع الصورة من المنتصف إلى مربع وتُعاد تحجيمها بتنعيم عالي الجودة. ويُصدَّر كل canvas بصيغة PNG. ويُجمَّع ملف .ico بايتًا ببايت: ترويسة ICONDIR من 6 بايتات، وإدخال دليل من 16 بايتًا لكل حجم (العرض والارتفاع و32 بت لكل بكسل وحجم البيانات والإزاحة)، وصور PNG مضمّنة بعدها — وهي صيغة PNG-in-ICO التي تدعمها كل المتصفحات الحالية وWindows Vista وما بعده. وأيقونة Apple touch بحجم 180 بكسل مربعة ومعتمة دائمًا لأن iOS يدوّر الزوايا بنفسه.
حالات الاستخدام الشائعة
- إنشاء favicon بحرف أو رمز تعبيري لمشروع جانبي في ثوانٍ
- توليد كل أحجام الأيقونات من شعار مربع
- إضافة Apple touch icon وملف web manifest للتثبيت على الشاشة الرئيسية
- إنتاج favicon.ico حقيقي متعدد الأحجام للمتصفحات القديمة
الأسئلة الشائعة
هل ما زلت بحاجة إلى favicon.ico؟
تطلب المتصفحات /favicon.ico تلقائيًا، وبعض الأدوات وقارئات RSS لا تبحث إلا هناك، فيبقى من المفيد توفيره إلى جانب أيقونات PNG.
لماذا لا يتحدّث favicon الخاص بي؟
تخزّن المتصفحات favicon مؤقتًا بشدة. أعد التحميل بالقوة أو افتح رابط الأيقونة مباشرة أو أضف معامل إصدار إلى وسوم link.
هل تُرفع صورتي؟
لا. تُنشأ كل الأيقونات وملف .ico في متصفحك.