منشئ أيقونة الموقع Favicon

جديد

أنشئ مجموعة أيقونات Favicon كاملة من صورة أو أحرف ونزّلها بملف ZIP.

Drop an image, click to browse, or paste PNG, JPG, SVG or WebP — a square 512×512+ logo works best. Processed on your device.

Background Transparent

Shape

Padding 0% App name (for manifest)

Drop an image above to generate your favicon set — or switch to Text or Emoji to build one from a letter or emoji.

Live preview

Browser tab

My App

Bookmarks bar

My App

iOS home screen

My App

Android home screen

My App

Generated sizes

Apple touch (180) and Android (192/512) icons use a solid background; the 192 and 512 are maskable with a built-in safe zone.

HTML for your <head>

site.webmanifest

Runs entirely in your browser. Nothing is uploaded.

أنشئ مجموعة favicon كاملة في متصفحك

يُنشئ هذا مولّد favicon كل أيقونة يحتاجها موقع ويب أو تطبيق ويب حديث — أيقونات المتصفح، وfavicon.ico متعدد الأحجام، وأيقونة Apple touch، وأيقونات PWA القابلة للإخفاء في الملف التعريفي — من مصدر واحد. اختر صورة أو حروفاً أولية أو إيموجي، واضبط الخلفية والشكل والحشو، ثم نزّل ملف ZIP جاهزاً للنشر يحتوي على جميع الملفات ومقطع HTML الدقيق لوسم <head>.

على خلاف الأدوات التي ترسل صورتك إلى خادم، يتم هنا تصيير كل شيء محلياً على لوحة HTML canvas، مما يجعله سريعاً ومجانياً ولا يستلزم إنشاء حساب، فيما يبقى شعارك خاصاً تماماً. لا حساب، لا انتظار لمعالجة الخادم، لا إعلانات تعيق الأداة.

من صورة أو SVG أو حرف أو إيموجي

تغطي ثلاثة أوضاع إدخال كل نقطة بداية. الصورة تقبل PNG وJPG وSVG وWebP — ضع شعاراً مربعاً وسيُمركز في كل حجم؛ ارفع SVG وسيُمرَّر أيضاً دون تغيير بوصفه favicon.svg حاداً وقابلاً للتحجيم. النص يحوّل من حرف إلى ثلاثة أحرف إلى علامة حرفية نظيفة بخطك وألوانك الخاصة — مفيد حين لا يتوفر لديك شعار بعد. الإيموجي يُحوّل أي إيموجي إلى favicon بنقرة واحدة.

مهما اخترت، ستحصل على مجموعة الإخراج الكاملة: كل حجم PNG، وملف favicon.ico حقيقي، وfavicon.svg اختياري، والملف التعريفي للتطبيق، وشيفرة HTML. هذا يغطي كل متصفح وكل نظام تشغيل وكل حجم جهاز من تبويب Chromebook إلى الشاشة الرئيسية لأندرويد.

كل الأحجام، بالإضافة إلى favicon.ico حقيقي

تُخرج الأداة صور PNG بأحجام 16×16 و32×32 و48×48 لتبويبات المتصفح وويندوز، وأيقونة Apple touch بحجم 180×180، وأيقونات بحجم 192×192 و512×512 لشاشات أندرويد وPWA. ثم تُشفّر الصور النقطية بأحجام 16 و32 و48 في ملف favicon.ico حقيقي متعدد الدقة — ملف الحاوية الذي تطلبه المتصفحات تلقائياً — كلياً في متصفحك دون أي رحلة إلى الخادم.

صيغة ICO مهمة. كثير من الأدوات تُنشئ PNG بحجم 32×32 وتعيد تسميته favicon.ico، وهذا يعمل لكنه يعني أن المتصفح يُحجّم دائماً من مصدر واحد. ملف ICO متعدد الدقة الحقيقي يتيح للمتصفح اختيار أحدّ حجم لكل سياق.

أيقونات Apple touch والأيقونات القابلة للإخفاء بشكل صحيح

ضبط أيقونات الجوال بشكل صحيح هو حيث تفشل معظم ملفات favicon. تُصيَّر apple-touch-icon بحجم 180×180 بخلفية صلبة (لا يدعم iOS الشفافية ويُدوّر الزوايا تلقائياً). تُنشأ أيقونات الملف التعريفي 192 و512 كأيقونات قابلة للإخفاء — يُحتجز محتواها داخل المنطقة الآمنة (~80%) حتى يتمكن أندرويد من قصّها في شكل دائرة أو مربع مستدير دون اقتطاع شعارك.

تعرض معاينات مباشرة أيقونتك في تبويب المتصفح وشريط الإشارات المرجعية وعلى الشاشات الرئيسية لـ iOS وأندرويد، حتى تتمكن من رؤية المظهر الدقيق قبل النشر.

مقارنة UtiloKit مع favicon.io وRealFaviconGenerator.net

favicon.io هي أكثر أداة favicon شيوعاً وجيدة فعلاً — لكنها ترفع صورتك إلى خوادمها، مما يعني أن شعارك غير المنشور أو أصول العميل تغادر جهازك. RealFaviconGenerator.net هي الخيار الأكثر اكتمالاً من حيث الميزات، لكن المعالج متعدد الخطوات مرهق للمشاريع السريعة، كما أنها تعالج الصور من جانب الخادم. favicon-generator.org قديمة: تُنتج أحجام PNG أساسية فقط دون أيقونة manifest قابلة للإخفاء أو SVG.

يفعل UtiloKit كل شيء محلياً. صورتك لا تغادر متصفحك أبداً. يشمل الإخراج ملف ICO متعدد الدقة الحقيقي، وأيقونات manifest قابلة للإخفاء بحشو المنطقة الآمنة، وSVG قابل للتحجيم، ومقطع <head> جاهز للصق. يعمل أيضاً على iPhone وأندرويد.

الملف التعريفي ومقطع HTML جاهزان للصق

إلى جانب الأيقونات، تحصل على site.webmanifest كامل — باسم تطبيقك ولون الثيم ومدخلات الأيقونة القابلة للإخفاء — ومقطع <head> جاهز للنسخ يربط .ico و.svg وأيقونة Apple touch والملف التعريفي، بالإضافة إلى وسم meta لـ theme-color المناسب. الصقه في HTML الخاص بك، ارفع الملفات إلى جذر موقعك، وانتهيت.

يعمل المقطع مع أي تقنية: HTML عادي، Next.js، Astro، Nuxt، SvelteKit، Remix. إذا كان إطار عملك يوفر إعدادات favicon مخصصة، فإن ملفات PNG تنسجم معها مباشرة.

Frequently asked questions

ما هو الـ Favicon؟

الـ favicon (اختصار لـ 'favorite icon' أي الأيقونة المفضلة) هو الأيقونة الصغيرة المربعة التي يعرضها المتصفح بجانب عنوان الصفحة — في تبويب المتصفح وشريط الإشارات المرجعية والسجل وأحياناً نتائج البحث. تُعرض عادةً بحجم 16×16 أو 32×32 بكسل وتوجد في جذر موقعك بصيغة favicon.ico. تضيف المواقع الحديثة أيضاً favicon.svg وأيقونة Apple touch وأيقونات PWA لشاشات البداية. يُحسّن الـ favicon المميز معدلات النقر في الإشارات المرجعية ونتائج البحث.

ما هو الحجم المناسب للـ Favicon؟

ابدأ بـ 16×16 و32×32 — الحجمان اللذان تعرضهما المتصفحات في التبويبات والإشارات المرجعية — مجمّعين في ملف favicon.ico واحد. للتغطية الكاملة أضف أيضاً 48×48 (يستخدمه Windows)، وأيقونة apple-touch-icon بحجم 180×180 لـ iOS، وصور PNG بحجم 192×192 و512×512 لأندرويد وشاشات PWA. يُنتج هذا المولّد جميع هذه الأحجام دفعة واحدة من مصدر واحد.

كيف أنشئ Favicon؟

اختر مصدراً — ارفع صورة (PNG أو JPG أو SVG أو WebP)، أو اكتب من حرف إلى ثلاثة أحرف، أو أدرج إيموجي — ثم اختر لون الخلفية والشكل (مربع أو مدوّر أو دائرة) والحشو. تُصيّر الأداة جميع أحجام favicon على لوحة canvas، وتحزم 16/32/48 في ملف favicon.ico، وتسلّمك ملف ZIP بجميع الملفات ومقطع HTML للصقه في <code><head></code>. تستغرق العملية بأكملها أقل من دقيقة ولا تتطلب برامج تصميم.

هل رفع شعاري آمن؟

نعم — لأنه لا يُرفع شيء في الواقع. تعمل كل خطوة في متصفحك باستخدام <code><canvas></code> بـ HTML وJavaScript: تُقرأ صورتك محلياً وتُغيَّر أبعادها وتُشفَّر في PNG وICO وتُضغط على جهازك. لا يُرسَل أي ملف إلى خادم على الإطلاق، خلافاً لأدوات مثل favicon.io وRealFaviconGenerator.net التي تعالج صورتك في السحابة. شعارك لا يغادر حاسوبك قط.

لماذا لا يظهر الـ Favicon الخاص بي؟

السبب في الغالب هو ذاكرة التخزين المؤقت للمتصفح. تُخزّن المتصفحات ملفات favicon بشكل مكثف، لذا أعد التحميل القسري (Ctrl+F5)، أو افتح عنوان URL للأيقونة مباشرة (yoursite.com/favicon.ico) للتحقق من تحميله، أو جرّب في نافذة خاصة. تحقق أيضاً من وجود الملفات في جذر موقعك وصحة المسارات في وسوم <code><link></code>. قد تستغرق ملفات favicon الجديدة وقتاً لتتحدث في الإشارات المرجعية ونتائج البحث.

هل يعمل مولّد Favicon على iPhone وأندرويد؟

نعم — تعمل Canvas API وتنزيل الملفات في Safari لـ iOS وChrome لأندرويد وSamsung Internet. يمكنك رفع صورة من كاميرا هاتفك أو كتابة حرف أو لصق إيموجي، ثم تنزيل ملف ZIP الكامل مباشرة على هاتفك. هذا مفيد للنمذجة السريعة لـ favicon حين تكون بعيداً عن مكتبك. يتكيف التخطيط مع الشاشات الصغيرة ليكون مريحاً عند 375 بكسل.

ما هي الأيقونة القابلة للإخفاء (Maskable Icon)؟

أيقونات manifest (ملفات PNG بحجم 192×192 و512×512 المدرجة في site.webmanifest) هي ما يستخدمه أندرويد وتطبيقات PWA المثبتة. تحتفظ الأيقونة القابلة للإخفاء بمحتواها المهم داخل منطقة آمنة مركزية — حوالي 80% من الأيقونة — حتى تبدو صحيحة حين يقصّها النظام في شكل دائرة أو مربع مستدير. تضيف هذه الأداة تلقائياً حشو المنطقة الآمنة لأيقونتَي 192 و512 وتضعهما بخاصية <code>purpose: maskable</code>. لست بحاجة إلى حساب المنطقة الآمنة يدوياً.

حوّل الصور بين PNG وJPG وWebP مع التحكم في الجودة.

الصور والوسائط