Utilia
الفئات ▾
اللغة: ar ▾

مولّد الفافيكون (Favicon)

أنشئ favicon.ico وأيقونات PNG وapple-touch-icon وملف site.webmanifest من صورة أو إيموجي، مع وسوم HTML جاهزة للصق. تنزيل ZIP دون رفع.

المصدر

الملاءمة
site.webmanifest

كيفية إنشاء فافيكون لموقعك

  1. في المصدر، اختر صورة أو نص أو إيموجي. - صورة: أفلت ملف PNG أو JPG أو WebP أو SVG. أفضل النتائج مع شعار مربع لا يقل عن 512 × 512 px. اختر الصورة كاملة لاحتوائها داخل الأيقونة، أو ملء مع القص لتغطية المربع. - نص أو إيموجي: اكتب حرفًا أو أحرفًا أولى أو إيموجي، ثم اختر الخط وعريض ولون النص.
  2. اضبط لون الخلفية، أو فعّل خلفية شفافة. اختر الشكل (مربع أو مستدير الزوايا أو دائرة) والهامش (%) لترك مسافة حول المحتوى.
  3. يمكنك اختياريًا فتح site.webmanifest لإدخال اسم التطبيق (web manifest) والاسم المختصر ولون السمة ورابط مجلد الأيقونات (أبقِ / إذا كانت الملفات ستوضع في جذر موقعك).
  4. انقر على إنشاء الفافيكون. تظهر الأيقونات بحجمها الحقيقي بجانب تبويب متصفح تجريبي. وبعد ذلك، يحدّثها كل تغيير فورًا.
  5. انقر على تنزيل ZIP، وارفع الملفات إلى موقعك، ثم انقر على نسخ الوسوم والصقها داخل <head> في صفحاتك.

محتوى ملف ZIP

الملف الحجم يستخدمه
favicon.ico 16 و32 و48 px تبويبات المتصفح، والإشارات المرجعية، والمتصفحات القديمة، وWindows
favicon-16x16.png 16 × 16 تبويبات المتصفح
favicon-32x32.png 32 × 32 التبويبات على الشاشات عالية الكثافة، واختصارات شريط المهام
apple-touch-icon.png 180 × 180 الشاشة الرئيسية في iPhone وiPad
android-chrome-192x192.png 192 × 192 الشاشة الرئيسية في Android (web manifest)
android-chrome-512x512.png 512 × 512 شاشات البدء عند التثبيت (web manifest)
site.webmanifest — اسم الموقع القابل للتثبيت وألوانه وأيقوناته
favicon-tags.html — وسوم HTML، للرجوع إليها

يحتوي ملف ICO على ثلاث صور PNG، وهي صيغة يقرؤها Windows (منذ Vista) وجميع المتصفحات الحالية. ويُحفظ apple-touch-icon دائمًا بخلفية مصمتة، لأن iOS يعرض البكسلات الشفافة باللون الأسود؛ ومع الخلفية الشفافة، يُستخدم اللون الأبيض.

وسوم HTML

تبدو الوسوم المُنشأة هكذا (مع رابط مجلدك):

<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="#ffffff">

كما تطلب المتصفحات الملف /favicon.ico تلقائيًا من جذر نطاقك، لذا فإن إبقاءه هناك مفيد حتى في الصفحات التي لا تحتوي على الوسوم.

نصائح للتصميم

  • اجعلها بسيطة. عند 16 × 16 px تختفي التفاصيل. الحرف الواحد أو الرمز العريض أو أبسط نسخة من شعارك هو الأوضح.
  • تحقق من المعاينة بالحجم الحقيقي. الأيقونة بحجم 16 px في التبويب التجريبي هي ما يراه الزوار فعلًا.
  • انتبه إلى الوضع الداكن. قد يختفي الشعار الداكن على خلفية شفافة في سمات المتصفح الداكنة؛ وتساعد الخلفية الملونة أو الهامش الصغير على تجنّب ذلك.
  • يختلف شكل الإيموجي من نظام إلى آخر، لأن كل منصة ترسم الإيموجي بأسلوبها. وتحتفظ ملفات PNG بالشكل الذي يظهر على جهازك.
  • الحروف العربية تعمل أيضًا في خيار نص أو إيموجي، بشرط أن يتوفر على جهازك خط يدعمها.

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

ما الأحجام التي يحتاجها الفافيكون؟

عمليًا: ملف favicon.ico بأحجام 16 و32 و48 px، وapple-touch-icon بحجم 180 px، وملفا PNG بحجمي 192 و512 px لملف web manifest. وتنشئ هذه الأداة كل ذلك من مصدر واحد.

هل يمكنني استخدام شعار بصيغة SVG؟

نعم. تُرسم ملفات SVG بدقة عالية قبل إنشاء الأيقونات. ويُعرض ملف SVG صورةً عادية، فلا تعمل أي نصوص برمجية بداخله.

كيف أصنع فافيكون من إيموجي؟

اختر نص أو إيموجي، واكتب الإيموجي أو الصقه، واختر خلفية أو أبقها شفافة، ثم أنشئ الأيقونات. النتيجة ملفات PNG وICO حقيقية، فتعمل في كل المتصفحات.

لماذا لا يظهر الفافيكون الجديد؟

تخزّن المتصفحات الفافيكون مؤقتًا بإصرار. أعد التحميل بعد مسح ذاكرة التخزين المؤقت، أو افتح الموقع في نافذة خاصة، أو أضف رقم إصدار إلى الرابط، مثل /favicon.ico?v=2.

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

لا. تُنشأ الأيقونات وملف ZIP وملف manifest داخل متصفحك، ولا يغادر أي شيء جهازك.

أدوات ذات صلة