مولّد Favicon من الأحرف والرموز التعبيرية
أنشئ favicon بسيطاً يسهل تمييزه من دون تجهيز صورة مسبقاً. أدخل حرفاً أو حرفين أوليين أو اختر رمزاً تعبيرياً واحداً، ثم اضبط الشكل ولون الخلفية. تتيح التصاميم النصية أيضاً اختيار لون الأحرف ونمط الخط، بينما يحتفظ الرمز التعبيري بمظهره الأصلي في المتصفح. تتحدّث معاينة 512 px داخل متصفحك، ويضم التنزيل أيقونات المتصفح الصغيرة وأيقونات الأجهزة المحمولة وملفات الإعداد اللازمة لإضافة التصميم إلى موقعك. لا يُرفع أي شيء ولا تُستخدم تقنيات AI.
كيفية إنشاء favicon
-
1
اختر محتوى الأيقونة
أدخل حرفاً أو حرفين أوليين لتكوين علامة مختصرة، أو استخدم رمزاً تعبيرياً واحداً.
-
2
نسّق التصميم
اختر مربعاً أو مربعاً بزوايا مستديرة أو دائرة وحدّد الخلفية. وفي التصميم النصي اختر أيضاً لون الأحرف والخط، أما الرمز التعبيري فيحتفظ بمظهر المتصفح الأصلي.
-
3
راجع المعاينة
افحص معاينة 512 px وتأكد من بقاء التصميم واضحاً عند تصغيره إلى أيقونة تبويب بحجم 16 px.
-
4
نزّل وثبّت
نزّل حزمة favicon المنشأة محلياً، وأضف ملفاتها إلى موقعك، ثم الصق مقتطف head المرفق أو عدّله.
محتويات حزمة favicon
يجب أن يصلح تصميم favicon واحد لعدة مواضع، من تبويب المتصفح الصغير إلى شاشة الهاتف الرئيسية. يرسم المولّد التصميم نفسه بالمقاسات العملية التالية ويجمع الملفات محلياً داخل المتصفح.
| الملف | المقاس أو المحتوى | الاستخدام الأساسي |
|---|---|---|
favicon.ico |
إطارات 16 و32 و48 px | تبويبات المتصفح والإشارات المرجعية والبرامج التي تطلب ICO |
favicon-16x16.png |
16 × 16 px | favicon صغير للمتصفح |
favicon-32x32.png |
32 × 32 px | favicon قياسي للمتصفح |
apple-touch-icon.png |
180 × 180 px | أيقونة Apple اللمسية |
android-chrome-192x192.png |
192 × 192 px | أيقونة أصغر لتطبيقات الويب على Android |
android-chrome-512x512.png |
512 × 512 px | أيقونة أكبر لتطبيقات الويب |
mstile-150x150.png |
150 × 150 px | صورة مربع Microsoft |
site.webmanifest |
ملف JSON | يشير إلى أيقونات Android للمتصفحات التي تستخدم بيان تطبيق ويب |
browserconfig.xml |
إعداد XML | يشير إلى صورة مربع Microsoft ولونه |
favicon-head.html |
مقتطف HTML | مراجع جاهزة للنسخ للأيقونات والبيان وإعداد المتصفح |
أنشئ favicon واضحاً حتى بحجم 16 px
لا يمثل favicon ملصقاً مصغراً. تختفي التفاصيل الدقيقة والكلمات الطويلة والفروق اللونية الضعيفة سريعاً في حجم تبويب المتصفح. غالباً ما يكون حرف بارز أو علامة قصيرة من حرفين أو رمز تعبيري بسيط أسهل تمييزاً من تركيب معقّد.
- استخدم تبايناً قوياً بين لون المقدمة والخلفية.
- اترك فراغاً حول الحروف أو الرمز حتى لا تضغطها أقنعة المنصات.
- قارن بين المربع والمربع ذي الزوايا المستديرة والدائرة لاختيار أوضح هيئة.
- راجع الأيقونات الصغيرة المصدّرة إلى جانب معاينة 512 px، فقد يصبح التصميم الواضح بالحجم الكامل غامضاً عند 16 px.
- اختبر favicon بعد تثبيته في أكثر من متصفح ومع واجهات المتصفح الفاتحة والداكنة.
أضف الملفات المنشأة إلى موقعك
احتفظ بأسماء الملفات وضعها حيث يتوقع مقتطف head المرفق العثور عليها، وغالباً يكون ذلك في جذر الموقع. الصق المقتطف داخل <head> في قالب كل صفحة. إذا كانت منصتك تقدّم الملفات الثابتة من مجلد آخر أو شبكة CDN، فعدّل المسارات في المقتطف والبيان وإعداد المتصفح قبل النشر.
توفر الملفات المرفقة مراجع الأيقونات، لكنها لا تجعل الموقع وحدها تطبيق ويب تقدّمياً قابلاً للتثبيت. قد يتطلب التثبيت حقولاً إضافية في البيان واستضافة آمنة وشروطاً خاصة بالمتصفح.
الأسئلة الشائعة
نعم. أدخل حرفاً أو حرفين أوليين، ثم اختر الشكل ولون الخلفية ولون المقدمة ونمط الخط. يظل النص قصيراً عمداً حتى يكون أوضح في مقاسات favicon الصغيرة.
نعم. اختر رمزاً تعبيرياً واحداً، ثم حدّد الشكل المحيط ولون الخلفية. يحتفظ الرمز بمظهر المتصفح الأصلي، لذلك قد يختلف بين أنظمة التشغيل والمتصفحات. راجع المعاينة قبل التنزيل، فقد لا تتوفر الرموز المركّبة في كل متصفح.
نعم. تضم الحزمة favicon.ico بإطارات 16 و32 و48 px، وملفي PNG منفصلين بمقاسي 16 و32 px، وأيقونات أكبر لاستخدامات Apple وAndroid وMicrosoft.
ينشئ المولّد تصميماً جديداً من الأحرف الأولى أو نص قصير أو رمز تعبيري واحد. أما المحوّل فهو أداة مستقلة لتحويل صورة PNG أو JPEG أو WebP موجودة إلى ملفات favicon.
لا. تبقى الأحرف أو الرمز ومعالجة المعاينة وإنشاء الحزمة داخل متصفحك. لا ترفع الأداة التصميم ولا تجلب موقعاً إلكترونياً.
لا. يطبق خياراتك فقط ولا يستخدم AI، كما لا يستطيع تحديد تعارض الأحرف أو الرمز أو الألوان أو التصميم النهائي مع علامة تجارية أو حقوق طرف آخر. تحقّق من الحقوق قبل الاستخدام التجاري.
غالباً ما تخزّن المتصفحات favicon مؤقتاً. تأكد من نشر الملفات ومراجع head في المسارات الصحيحة، ثم امسح ذاكرة المتصفح المؤقتة أو جرّب نافذة خاصة. تحدّث محركات البحث وبعض المنصات الأيقونات وفق جداولها.
أدوات ذات صلة
مولّد رموز QR
أنشئ رمز QR محليًا في المتصفح من رابط أو نص عادي أو حمولة QR منسقة، ثم نزّله بصيغة PNG.
محول PNG إلى SVG متجهي
حوّل صور PNG النقطية إلى مسارات SVG داخل المتصفح. مناسب للشعارات والأيقونات ورسومات الخطوط. تحكم في العتبة وعدد الألوان والتنعيم.
مولد الباركود
أنشئ باركودات 1D قابلة للمسح بصيغ Code 128 وCode 39 وEAN-13 وUPC-A وITF-14 وCodabar. صدّر كـ PNG أو SVG أو PDF للطباعة.
منشئ ملفات GIF
حوّل سلسلة صور أو فيديو قصيرًا إلى ملف GIF متحرك. اضبط معدل الإطارات وعدد مرات التكرار والحجم قبل التصدير.
مولد الميمز
أنشئ ميمز من قوالب شهيرة مثل Drake وDistracted Boyfriend وDoge، أو ارفع صورتك الخاصة. نص علوي وسفلي بخط Impact مع حد وظل.
مغيّر حجم الصور
غيّر حجم الصور إلى أبعاد دقيقة بالبكسل أو إلى نسب مئوية مع الحفاظ على نسبة العرض إلى الارتفاع. مناسب للدفعات، ومن دون رفع الملفات.