مولّد أيقونة الموقع (Favicon)
أنشئ أيقونات favicon بجميع المقاسات من صورة واحدة.
أفلِت شعارك هنا أو انقر للاختيار
PNG أو SVG أو JPG أو WebP أو ICO. يُفضَّل شعار مربع بمقاس 512 × 512 بكسل أو أكبر. تُعالَج الملفات في متصفحك ولا تُرفع أبدًا. تبقى في هذا المتصفح حتى تزيلها.
Ctrl+OاختيارCtrl+Vلصق
أيقونة favicon هي الأيقونة الصغيرة التي تعرضها المتصفحات في علامات التبويب والإشارات المرجعية، وتستخدم الهواتف نسخًا أكبر منها حين يضيف أحدهم موقعك إلى شاشته الرئيسية. أفلِت شعارًا واحدًا فيُنشئ هذا المولّد كل ملف يحتاجه الموقع، أي favicon.ico وأيقونات favicon بصيغة PNG وأيقونة Apple touch وأيقونات Android وملف web manifest، مع معاينات مباشرة وكود HTML جاهز للصق في صفحتك. يعمل المولّد في متصفحك، فلا يغادر شعارك جهازك أبدًا؛ والأداة مجانية ولا تتطلب تسجيلًا.
طريقة إنشاء أيقونة favicon
- أفلِت شعارك (PNG أو SVG أو JPG أو WebP) في أي مكان من الصفحة، أو الصقه بـ Ctrl+V، أو انقر لاختياره. والصورة التي أضفتها في أداة صور أخرى موجودة في القائمة كما تركتها هناك: انقر صورتها المصغّرة لاستخدامها. ويتيح لك الشعار النموذجي التجربة دون ملف.
- يُؤطَّر الشعار تلقائيًا: الرمز من الشعار العريض، أو الشعار دون حوافه الفارغة. اسحب المربع على الشعار لتغييره، أو اختر «الشعار كاملًا». واختر خلفية (تأتي ألوان شعارك أولًا) والهامش الداخلي والشكل؛ وتتحدّث المعاينات أثناء العمل.
- انقر «تنزيل الكل (ZIP)»، وضع الملفات في المجلد الجذر لموقعك، ثم انقر «نسخ HTML» والصق الوسوم في قسم <head> من صفحتك.
الميزات
- favicon.ico بأيقونات 16 و32 و48 بكسل، إضافة إلى أيقونات favicon بصيغة PNG بمقاسي 16 و32 بكسل
- apple-touch-icon.png (180 بكسل) وأيقونات Android Chrome (192 و512 بكسل)
- ملف site.webmanifest باسم تطبيقك ولون السمة، ووسوم HTML لقسم <head>
- يعثر تلقائيًا على الرمز في الشعار العريض؛ اسحب المربع لاستخدام جزء آخر، أو احتوِ الشعار كاملًا
- الخلفية: شفافة، أو ألوان شعارك، أو أي لون؛ وهامش داخلي من 0 إلى 30%؛ وشكل مربع أو مستدير الزوايا أو دائري
- معاينات مباشرة لكل المقاسات، ولعلامة تبويب في المتصفح وللشاشة الرئيسية، بالوضعين الفاتح والداكن
- يبدأ من PNG أو SVG أو JPG أو WebP أو ICO، وكل الملفات في ملف ZIP واحد
هل تبقى بياناتي خاصة؟
نعم. يُنشئ محرك صور WebAssembly الأيقونات في متصفحك؛ فلا يغادر شعارك ولا الملفات جهازك أبدًا. ويبقى الشعار في هذا المتصفح إلى أن تزيله من القائمة.
الأسئلة الشائعة
ما مقاسات favicon التي أحتاجها؟
أربعة ملفات تغطي كل شيء تقريبًا: favicon.ico بمقاسات 16 و32 و48 بكسل لعلامات تبويب المتصفح والإشارات المرجعية واختصارات Windows؛ وapple-touch-icon.png بمقاس 180 بكسل للشاشات الرئيسية في iPhone وiPad؛ وملفا PNG بمقاسي 192 و512 بكسل، مُدرجان في site.webmanifest، لـ Android وتطبيقات الويب القابلة للتثبيت. ويحتوي ملف ZIP عليها كلها، إضافة إلى ملفي PNG بمقاسي 16 و32 بكسل للمتصفحات التي تفضّل PNG.
كيف أضيف favicon إلى صفحة HTML؟
ضع الملفات في المجلد الجذر لموقعك بحيث يفتح العنوان /favicon.ico، ثم انقر «نسخ HTML» والصق الوسوم في قسم <head> من كل صفحة. تبحث المتصفحات عن /favicon.ico حتى دون أي وسم؛ أما الوسوم فتضيف مقاسات PNG وأيقونة Apple وملف manifest.
لماذا لأيقونة apple-touch-icon.png خلفية؟
لأن أجهزة iPhone وiPad تعرض البكسلات الشفافة بالأسود وتدوّر الزوايا بنفسها، لذا تكون أيقونة Apple دائمًا مربعًا كاملًا معتمًا: بلون خلفيتك، أو بالأبيض إن كانت الخلفية شفافة. أما الأيقونات الأخرى فتحتفظ بشفافيتها وشكلها.
هل يمكنني استخدام شعار بصيغة SVG؟
نعم. يرسم متصفحك ملف SVG بمقاسه الأصلي، أو بمقاس 1024 بكسل إن كان أصغر، وتُنشأ كل أيقونة منه. أما ملف SVG الذي يرتبط بملفات أخرى (صور أو خطوط أو أوراق أنماط) فلا يمكن رسمه كاملًا كصورة، لذا تخبرك الأداة بذلك بدل إنشاء أيقونات ناقصة؛ فصدّره بصيغة PNG، أو ضمّن صوره فيه، أولًا.
استبدلت أيقونة favicon لكن المتصفح لا يزال يعرض القديمة. لماذا؟
لأن المتصفحات تحتفظ بأيقونات favicon في ذاكرة التخزين المؤقت مدة طويلة. أعد تحميل الصفحة بـ Ctrl+F5 (أو Cmd+Shift+R على Mac)، أو افتح الموقع في نافذة خاصة، لترى الأيقونة الجديدة.