العربية
أنشئ أيقونات favicon من صورة أو نص أو إيموجي — جميع الأحجام مع كود HTML للنسخ.
آخر تحديث
#5B8DEF#FFFFFF<link rel="icon" href="/favicon.ico" sizes="any" /> <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="application-name" content="Coddy" />
الـ *favicon* هو تلك الأيقونة الصغيرة التي تظهر في تبويبات المتصفح، والمفضّلة، وقوائم السجلّ، وعلى الشاشة الرئيسية في iOS وAndroid عندما يحفظ شخص ما موقعك. هو شيء صغير لكنه ذو أثر كبير في إحساس المشروع: إطلاق favicon حقيقي هو الفارق بين مربّع نائب ومنتج مكتمل.
المتصفحات الحديثة تطلب الـ favicon بأحجام وصيغ مختلفة. أيقونات التبويبات والمفضّلة تحتاج PNG بحجم 16×16 أو 32×32. وiOS Safari يحتاج apple-touch-icon.png بحجم 180×180. وخاصية الإضافة إلى الشاشة الرئيسية في Android تحتاج 192×192 و512×512 داخل web manifest. والمتصفحات القديمة وبعض التكاملات لا تزال تتوقّع favicon.ico متعدّد الدقّات. اقتصاص كل ذلك يدويًا واحدًا تلو الآخر عمل مرهق — ومولّد favicon ينجزه بنقرة واحدة.
هذا المولّد يعمل بالكامل داخل متصفحك. الصورة التي ترفعها تُفكّ شفرتها محليًا داخل <canvas>، وكل حجم إخراج يُرسم بجانبها، والحزمة الكاملة (ملفات PNG وICO وweb manifest وREADME وكود HTML) تُحزَّم في ملف .zip دون رفع أي شيء.
favicon.ico صيغة حاوية يمكنها أن تضمّ عدّة أحجام (16 و32 و48) لتجد المتصفحات القديمة دائمًا ما تحتاجه.apple-touch-icon.png وإدخالات في manifest.webmanifest) — وكلاهما يجب توفيره.استخدم **نص** لاختصار من 1 إلى 3 أحرف، أو **إيموجي** لأيقونة من رمز واحد، أو **صورة** لرفع PNG أو JPEG أو SVG. نمط الصورة هو الأفضل إن كان لديك شعار جاهز.
اختر لون خلفية (ولون نص للاختصارات). اختر **مربّع** أو **مستدير الزوايا** أو **دائرة** — المربّعات مستديرة الزوايا تطابق الطريقة التي يقصّ بها iOS أيقونات الشاشة الرئيسية، فتبدو طبيعية.
يصبح اسم الموقع وسم meta المسمّى application-name وقيمة short_name داخل manifest.webmanifest الخاص بـ PWA. استخدم اسم العلامة التجارية كما يراه المستخدم في إشارة مرجعية.
تصفّح صفّ المعاينة للتأكّد من أن الأيقونة لا تزال مقروءة بحجم 16 و32 بكسل (حيث تعيش التبويبات). إذا فقدت قابلية القراءة عند هذا الحجم الصغير، فبسّط المصدر — أحرف أقل أو اقتصاص أضيق.
انقر على **تحميل حزمة favicon (.zip)** للحصول على كل ملفات الإخراج دفعة واحدة. ضع الملفات في جذر موقعك، ثم ألصق كود HTML في عنصر <head> — وانتهيت.
كل تحميل يحتوي على الملفات أدناه. كود HTML يربطها — وإن احتجت مجموعة فرعية فقط، فاحتفظ بما يطابق المنصّات التي تدعمها.
| الملف | الحجم | يستخدمه | ملاحظات |
|---|---|---|---|
favicon.ico | 16، 32، 48 | تبويبات المتصفح (احتياطي للأنظمة القديمة) | حاوية ICO متعدّدة الدقّات — كل المتصفحات لا تزال تطلب هذا الرابط. |
favicon-16x16.png | 16×16 | أيقونة تبويب المتصفح | يُستخدم على الشاشات عالية الدقّة عبر <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | تبويب المتصفح + المفضّلة | أيقونة التبويب الأساسية على شاشات الريتنا. |
favicon-48x48.png | 48×48 | بلاطة موقع Windows وشريط المهام | تُضمَّن داخل favicon.ico للأنظمة القديمة أيضًا. |
apple-touch-icon.png | 180×180 | إضافة موقع إلى شاشة iOS الرئيسية | iOS يستخدم لقطة شاشة احتياطية إن غاب — أرسله دائمًا. |
android-chrome-192x192.png | 192×192 | شاشة Android الرئيسية | يُشار إليه من manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | موجّه تثبيت PWA + شاشة البداية | مطلوب لتطبيقات PWA القابلة للتثبيت. |
site.webmanifest | — | بيانات تثبيت PWA | يسرد الأيقونات والاسم ولون السمة. يُربط عبر <link rel="manifest">. |
اكتب من 1 إلى 3 أحرف (مثلًا **Co** أو **C** أو **JS**)، اختر لون العلامة التجارية، واختر **مستدير الزوايا** لشكل قريب من أسلوب iOS.
الاختصارات هي الأوضح عند حجم 16 بكسل لأنه لا توجد تفاصيل تُفقد. استخدم حرفًا كبيرًا غامقًا أو زوجًا متراصًّا من حرفين، واحرص على تباين عالٍ بين لون النص والخلفية.
اختر إيموجي يطابق روح المشروع — 🚀 لإطلاق، 🧪 لتجربة، 📚 للتوثيق. اضبط لون خلفية محايد.
favicon الإيموجي يعطي إحساسًا وديًّا للمواقع الشخصية والهاكاثونات والمشاريع الجانبية. تذكّر أن الإيموجي نفسه يظهر مختلفًا على macOS (Apple) وWindows (Segoe) — وبعد التصدير تجمّد الحزمة شكل macOS وLinux وChrome الذي تراه في المعاينة.
ضع PNG أو SVG لشعارك، وزِد قيمة **الحشو** لإبعاد التصميم عن الحواف، وفعّل **املأ لون الخلفية** إذا كان شعارك بحواف شفّافة.
مدخلات SVG تُعرض بوضوح في كل الأحجام. مدخلات PNG تعمل أيضًا لكنها تصبح ضبابية فوق دقّتها الأصلية — ابدأ من مصدر بحجم 512×512 على الأقل.
apple-touch-icon.png. iOS سيلجأ إلى لقطة شاشة للصفحة — وهي عادة تبدو سيئة — إن لم يكن هناك Apple touch icon معلن.<link rel="icon" href="/images/favicon.ico">. هذا يعمل، لكن المتصفحات تبقى تستعلم عن /favicon.ico من جذر الموقع. إمّا أن تضع نسخة في الجذر أيضًا، أو تتقبّل ظهور 404 في سجلّات الوصول.favicon.ico متعدّد الدقّات (16/32/48)، وPNG بحجم 32×32، وapple-touch-icon.png بحجم 180×180 لـ iOS، وPNG بحجمي 192×192 و512×512 معلنين في site.webmanifest لـ Android وتطبيقات PWA القابلة للتثبيت. الحزمة التي تنزّلها هذه الأداة تحتوي على جميعها.<link rel="icon" type="image/png">. كما أنها جميعًا تدعم رابط /favicon.ico القديم. أمّا favicon بصيغة SVG فمدعوم في المتصفحات الحديثة، ويُتيح لملف واحد التحجيم بوضوح في كل الأحجام — وهذا مثالي إن كان شعارك متجهيًا أصلًا، لكن iOS Safari لا يزال يحتاج البديل PNG.Cmd/Ctrl + Shift + R)، أو امسح بيانات الموقع من أدوات المطوّر، أو زِد سلسلة استعلام في رابط favicon (/favicon.ico?v=2). إن كان لديك CDN أمام موقعك، فستحتاج عادة إلى تفريغ ذاكرته أيضًا./apple-touch-icon.png. الحزمة تتضمّنها.<canvas>، وكل إخراج (ملفات PNG وICO وZIP وmanifest) يُنتَج محليًا. لا شيء يغادر جهازك.