مولّد Favicon
جديدرائج 🔥أنشئ جميع أحجام الـ favicon من صورة واحدة
كيفية استخدام مولّد Favicon
- 1ارفع صورة مربعة (يُنصح بـ PNG)
- 2تولّد الأداة تلقائياً جميع أحجام favicon القياسية
- 3حمّل الأحجام الفردية أو ملف ZIP بجميع الملفات
- 4Copy the HTML snippet to add favicons to your website
حول مولّد Favicon
Upload a single image and generate all standard favicon sizes (16x16, 32x32, 48x48, 180x180, 192x192, 512x512) plus an ICO file, ready for use in any website.
المميزات الرئيسية لـ مولّد Favicon
- يُولِّد ستة أحجام قياسية: 16x16، 32x32، 48x48، 96x96، 180x180، و512x512
- يتضمن Apple Touch Icon بحجم 180x180 لإشارات الشاشة الرئيسية لـ iOS
- زر تنزيل فردي لكل حجم
- مقتطف علامة HTML link جاهز لكل حجم مُولَّد
- إخراج PNG مع الحفاظ على الشفافية من الصورة المصدر
- توليد فوري في المتصفح — لا رفع مطلوب
- يعمل بشكل أفضل مع صور مصدر مربعة بحجم 512x512 أو أكبر
- نسخ بنقرة واحدة لكتلة مقتطف HTML الكاملة
الصيغ المدعومة
صيغ الإدخال
صيغ الإخراج
A square source image at 512x512 pixels or larger is strongly recommended for sharp results at all sizes.
أمثلة
إضافة favicon لموقع جديد
ارفع الشعار، انقر على "توليد Favicons"، نزّل جميع الأحجام، والصق مقتطف HTML في رأس مستندك.
المدخلات
512x512 square logo PNG
النتيجة
Six PNG files (16 to 512px) plus HTML snippet
توليد Apple Touch Icon لـ PWA
نزّل حجم 180x180 فقط لعلامة رابط Apple Touch Icon في بيان تطبيق الويب التقدمي.
المدخلات
New brand logo PNG
النتيجة
Fresh set of all standard favicon sizes
Generate Apple Touch Icon for PWA
Download just the 180x180 size for the Apple Touch Icon link tag in your Progressive Web App manifest.
المدخلات
App icon PNG
النتيجة
180x180 Apple Touch Icon PNG
حالات الاستخدام الشائعة
- إضافة مجموعة favicon كاملة لمشروع موقع جديد
- تحديث favicon قديم بشعار علامة تجارية مُجدَّد
- توليد Apple Touch Icon لإشارات الشاشة الرئيسية لـ iOS
- إنشاء جميع أحجام الأيقونات المطلوبة لبيان تطبيق الويب التقدمي
- توفير أحجام favicon متعددة لتوافق أفضل مع المتصفحات وأنظمة التشغيل
- ضمان اتساق العلامة التجارية مع favicon متطابق في جميع المتصفحات
استكشاف الأخطاء
يظهر favicon ضبابياً بالأحجام الصغيرة (16x16، 32x32)
الحل
ابدأ بصورة مصدر لا تقل عن 512x512 بكسل. يحتاج خوارزمية التصغير تفاصيل كافية لإنتاج أيقونة صغيرة حادة.
لا يظهر favicon في تبويب المتصفح
الحل
امسح ذاكرة التخزين المؤقت للمتصفح وأعِد تحميل الصفحة بقوة. تخزّن المتصفحات favicon بقوة — قد يستمر الأيقونة القديمة لدقائق حتى بعد تحديث HTML.
تظهر الصورة المصدر غير المربعة مشوهة في المخرجات
الحل
اقطع صورتك المصدر إلى مربع أولاً باستخدام أداة Crop Image، ثم ولِّد favicons من النسخة المربعة.
الأسئلة الشائعة
ما حجم الصورة الذي يجب رفعه؟
على الأقل 512×512 بكسل للحصول على أفضل النتائج.
ما الصيغ التي تُولَّد؟
ملفات PNG بجميع الأحجام بالإضافة إلى ملف ICO متعدد الأحجام.
هل يمكنني توليد ملف .ico؟
حالياً تُولِّد الأداة ملفات PNG لجميع الأحجام. تقبل معظم المتصفحات الحديثة favicons PNG. للحصول على تنسيق .ico، حوّل PNG بحجم 16x16 أو 32x32 باستخدام أداة محوّل الصور.
كيف أستخدم favicons المُولَّدة في تطبيق React أو Next.js؟
ضع ملفات PNG في مجلد public وأضف علامات HTML link إلى رأس مستندك أو تخطيط التطبيق. يحتوي Next.js على واجهة metadata مدمجة تقبل مسارات favicon مباشرة.
How do I add the favicons to my website?
Download the generated PNG files and place them in your website root or an assets folder. Then paste the provided HTML link tag snippet into the head section of your HTML file.
Why is my favicon not showing after adding the HTML snippet?
Browsers cache favicons aggressively. After updating your site, perform a hard reload (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac) or clear the browser cache to see the new favicon.
Can I generate a .ico file?
Currently the tool generates PNG files for all sizes. Most modern browsers accept PNG favicons. For .ico format, convert the 16x16 or 32x32 PNG using the Image Converter tool.
How do I use the generated favicons in a React or Next.js app?
Place the PNG files in your public folder and add the HTML link tags to your document head or app layout. Next.js has a built-in metadata API that accepts favicon paths directly.