ماذا تفعل الأداة
يحوّل مولّد Favicon حرفًا أو رمزًا تعبيريًا أو شعارك إلى كل الأيقونات التي يحتاجها موقع ويب حديث. يرسم الأيقونة بكل حجم، ويحزم favicon.ico، ويكتب web app manifest، ويعطيك وسوم <link> لتلصقها في <head> صفحتك. نزّل كل شيء في ملف ZIP واحد.
البدء من نص هو أسرع طريقة للحصول على أيقونة نظيفة: اكتب من حرف إلى ثلاثة أحرف أو رمزًا تعبيريًا، واختر الألوان والخط والشكل (مربع أو مستدير الزوايا أو دائرة). وتحصل أيقونات النص أيضًا على favicon.svg قابل للتحجيم، يبقى حادًّا بكل الأحجام وعلى الشاشات عالية الكثافة.
طريقة الاستخدام
- اختر نص أو صورة كمصدر. للصورة، اضغط اختيار صورة… واختر صورة PNG أو SVG أو JPG مربعة.
- حدّد الشكل، وفعّل ملء الخلفية لوضع الأيقونة على مربع ملوّن، أو أوقفه لإبقائها شفافة.
- أدخل اسم الموقع: وهو الاسم الذي يظهر تحت الأيقونة عندما يضيف أحدهم موقعك إلى الشاشة الرئيسية للهاتف، ويُكتب في
site.webmanifest(Android) وفي وسمapple-mobile-web-app-title(iOS). ثم حدّد مجلد الأيقونات الذي سترفع إليه الملفات، وعادةً/. - راجع المعاينة: أيقونة 16 px هي ما يراه الناس في تبويب المتصفح.
- اضغط تنزيل ZIP، وارفع الملفات إلى موقعك، والصق HTML داخل
<head>.
مثال
تُنتج الإعدادات الافتراضية هذه الوسوم:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="apple-mobile-web-app-title" content="My Site">نصائح
- تخزّن المتصفحات أيقونات favicon مؤقتًا بشدة. بعد استبدال أيقونة، افتح الصفحة في نافذة خاصة لترى التغيير.
- يتجاهل iOS الشفافية في أيقونة Apple touch ويملؤها بالأسود، لذا أبقِ الخلفية مملوءة للحصول على أيقونة نظيفة على الشاشة الرئيسية.
الأسئلة الشائعة
› ما الملفات التي أحصل عليها؟
favicon.ico (16 و32 و48 px)، وأيقونات PNG بأحجام 16 و32 و48 px، وأيقونة Apple touch بحجم 180 px، وأيقونات Android بحجم 192 و512 px، وsite.webmanifest، ووسوم HTML، وfavicon.svg عندما تبدأ من نص.
› هل يُرفع شعاري إلى أي مكان؟
لا. تُقرأ الصورة ويُغيَّر حجمها في متصفحك باستخدام canvas، ويُنشأ ملف ZIP على جهازك أيضًا.
› ما الصورة الأنسب؟
صورة PNG أو SVG مربعة بحجم 512 × 512 px على الأقل وبخلفية شفافة. تبقى الأشكال البسيطة العريضة مقروءة بحجم 16 px، أما التفاصيل الدقيقة والنصوص الرفيعة فلا.
› هل ما زلت أحتاج إلى favicon.ico؟
نعم، للمتصفحات القديمة وللأدوات التي تطلب /favicon.ico مباشرة. أما المتصفحات الحديثة فتستخدم روابط PNG أو SVG الموجودة في HTML.