كيف تنشئ فافيكون من صورة (أو حرف) — مولّد مجاني عبر الإنترنت

استخدم مولّد فافيكون مجاني عبر الإنترنت لإنشاء فافيكون من صورة أو حرف/إيموجي. احصل على كل الأحجام (16 و32 و180 و192 و512) وملف favicon.ico متعدد الأحجام وملف التعريف ومقطع HTML — كل ذلك داخل متصفحك.

الفافيكون هو تلك الأيقونة الصغيرة التي تظهر في تبويب المتصفح، وفي شريط الإشارات المرجعية، وعلى شاشة هاتفك الرئيسية حين يحفظ أحدهم موقعك، وبشكل متزايد في نتائج البحث بجانب اسم نطاقك. إنه من أصغر عناصر الموقع، لكنه من أكثرها تأثيراً على الانطباع الأول: فالموقع بلا فافيكون يبدو غير مكتمل، بينما الفافيكون الواضح والمميّز يمنح علامتك التجارية مظهراً احترافياً منذ أول بكسل. وهذا تحديداً ما يحلّه مولّد الفافيكون عبر الإنترنت.

لماذا لا تكفي أيقونة واحدة؟

في بدايات الويب كان يكفي وضع ملف favicon.ico واحد في المجلد الجذر للموقع. أما اليوم فإن المتصفحات وأنظمة التشغيل ومشغّلات التطبيقات تطلب أحجاماً مختلفة لسياقات مختلفة. تُعرض أيقونة 16×16 في تبويب المتصفح، وتُستخدم 32×32 للشاشات عالية الكثافة وشريط مهام ويندوز. وتطلب أجهزة آبل أيقونة 180×180 باسم apple-touch-icon.png لشاشة البداية. أما أندرويد وتطبيقات الويب التقدمية فتشير إلى ملفات PNG بحجم 192×192 و512×512 من خلال ملف التعريف. وإذا أغفلت أحدها ظهرت أيقونتك ضبابية أو مشوّهة أو غائبة تماماً.

إنشاء كل هذه الأحجام يدوياً في محرّر صور أمر مرهق وعرضة للأخطاء. أداتنا تنجز ذلك كله بنقرة واحدة، وداخل متصفحك بالكامل.

إنشاء فافيكون من صورة

أكثر الطرق شيوعاً هي إنشاء فافيكون من صورة — غالباً شعار أو أيقونة تطبيق. اسحب ملف PNG أو JPG أو WebP أو SVG أو GIF إلى منطقة الرفع. ترسم الأداة صورتك على لوحة مربّعة باستخدام احتواء التغطية (بحيث تُوسّط الصور غير المربّعة وتُقصّ بدلاً من تشويهها) ثم تصغّرها إلى كل حجم في المجموعة القياسية. ولأن الفافيكون يُعرض بحجم صغير جداً، فإن صورة مصدر نظيفة وعالية التباين ومربّعة قدر الإمكان تعطي أفضل النتائج. التفاصيل الدقيقة والنصوص الصغيرة تختفي عند حجم 16×16، لذا فإن العلامات البسيطة أوضح بكثير.

أو أنشئ فافيكون من حرف أو إيموجي

ليس لدى الجميع شعار جاهز — ولا حاجة إليه. انتقل إلى وضع الحرف/الإيموجي، واكتب حرفاً واحداً (مثل الحرف الأول من اسم علامتك) أو إيموجي مثل 🚀، ثم اختر لون الخلفية ولون النص، فترسم الأداة رمزاً نظيفاً ومتوسّطاً بكل الأحجام. هذا مثالي للمشاريع الجانبية والأدوات الداخلية ومواقع التوثيق والنماذج الأولية السريعة. تحصل على فافيكون مميّز ومتناسق دون فتح أي تطبيق تصميم على الإطلاق.

ماذا تنزّل فعلاً؟

عند النقر على التنزيل، تحزّم الأداة باقة كاملة وجاهزة للإنتاج في ملف ZIP واحد:

أيقونات PNG بأحجام 16×16 و32×32 و48×48 و180×180 (أيقونة آبل) و192×192 و512×512.
favicon.ico — ملف ICO حقيقي متعدد الدقّة يحتوي على صورتي 16×16 و32×32، مُرمّز داخل متصفحك مباشرة لتحصل المتصفحات القديمة وويندوز على أيقونة سليمة.
site.webmanifest — ملف تعريف تطبيق ويب جاهز للتعديل يشير إلى ملفي 192 و512 لتثبيت أندرويد وتطبيقات الويب التقدمية.
مقطع HTML — وسوم <link> الجاهزة التي تلصقها في وسم <head>، ويمكن نسخها مباشرة من الأداة بنقرة واحدة.

كيف تضيف الفافيكون إلى موقعك

إضافة الفافيكون عملية من خطوتين. أولاً، فُكّ ضغط الملفات المنزّلة إلى المجلد الجذر أو مجلد public في موقعك. ثانياً، الصق وسوم الربط في وسم <head> من صفحتك:

<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<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" />

إن كنت تستخدم Next.js فضع الملفات في مجلد public/ وأضف الوسوم إلى التخطيط الجذري أو اعتمد على واجهة البيانات الوصفية في الإطار. أما في ووردبريس فمعظم القوالب توفّر إعداداً لأيقونة الموقع يقبل صورة PNG مربّعة واحدة — ارفع ملف 512×512 هناك. وللمواقع الثابتة والأطر مثل Astro وVite وHTML الخالص، يعمل المقطع أعلاه كما هو.

كل شيء يعمل داخل متصفحك

كثير من مولّدات الفافيكون ترفع شعارك إلى خادم وتعالجه عن بُعد. أداتنا لا تفعل ذلك أبداً. كامل العملية — فكّ ترميز صورتك، ورسمها على اللوحات، وتغيير الحجم، وترميز ملفات ICO وPNG، وضغط النتيجة — يجري محلياً باستخدام لوحة HTML ومكتبة jszip داخل تبويبك. شعارك لا يغادر جهازك أبداً، ولا يوجد حساب، ولا علامة مائية، ولا حدّ للرفع. الأداة مجانية وخاصة بالكامل.

نصائح لفافيكون واضح

ابدأ بصورة مصدر مربّعة كي لا يُقصّ شيء بشكل غير متوقع. استخدم أشكالاً واضحة وتبايناً عالياً ليبقى الرمز مقروءاً عند 16 بكسل. تجنّب الخطوط الرفيعة والنصوص الصغيرة لأنها تختفي عند الأحجام الصغيرة. وإذا استخدمت وضع الحرف فإن خلفية بلون قوي مع نص أبيض تظهر بوضوح في الوضعين الفاتح والداكن. وتحقّق دائماً من الفافيكون في تبويب متصفح حقيقي بعد النشر.

جرّبها الآن

افتح مولّد الفافيكون، وارفع شعاراً أو اكتب حرفاً، ونزّل مجموعة الفافيكون الكاملة في ثوانٍ. وقد تعجبك أيضاً أداة تغيير حجم الصور، ومحوّل صيغ الصور، ومولّد وسوم الميتا — جميعها مجانية وخاصة وتعمل بالكامل داخل متصفحك.