مولّد Favicon

حوّل شعارًا واحدًا إلى مجموعة favicon كاملة: كل مقاسات PNG، وملف ICO متعدد المقاسات، وملف manifest، ووسوم HTML للصقها في عنصر head بصفحتك.

أفلت ملفاتك هنا

⁦.png, .jpg, .jpeg, .webp, .svg⁩ · حتى 20 م.ب

اختيار الملفات

كيفية إنشاء أيقونة Favicon

1
إضافة الشعار
أضف شعارك بصيغة PNG أو JPG أو WebP أو SVG، بحجم يصل إلى 20 ميغابايت. الصورة المربعة هي الأنسب، لكن الأداة تتعامل مع أي شكل.
2
اختيار طريقة جعل الصورة مربعة
اختر القص إلى مربع من وسط الصورة، أو احتواء الصورة كاملة داخل المربع مع ملء الجانبين بلون تختاره.
3
تنزيل مجموعة الأيقونات في أرشيف ZIP
نزّل أرشيفًا يضم ثمانية ملفات، أو تسعة مع أيقونة Android من نوع maskable: ملف ICO، وأربعة مقاسات PNG، وملف manifest، ومقتطفًا جاهزًا لعنصر head.

محتوى الأرشيف ووظيفة كل ملف فيه

يضم الملف favicon.ico ثلاث صور في حاوية واحدة بمقاسات 16 و32 و48 بكسل، وما زالت المتصفحات تطلبه من جذر الموقع. والملفان icon-16.png وicon-32.png هما البديلان الحديثان، ويُشار إليهما صراحة حتى لا تحتاج المتصفحات التي تفضّل PNG إلى فتح ملف ICO أصلًا. أما apple-touch-icon.png بمقاس 180 بكسل فيستخدمه iOS حين يضيف أحدهم موقعك إلى شاشته الرئيسية. والملفان icon-192.png وicon-512.png هما المقاسان اللذان يجب أن يذكرهما ملف manifest لتطبيق الويب التقدمي. ويربط manifest.json هذين الملفين باسم تطبيقك ولون السمة، أما head-snippet.html فهو كتلة وسوم link وmeta الجاهزة للصق في صفحتك كما هي، دون تخمين لأسماء الخصائص أو مسارات الملفات.

لماذا لا يحتفظ apple-touch-icon بالشفافية أبدًا

لا يضع iOS أيقونة الشاشة الرئيسية الشفافة فوق خلفية مناسبة، بل يملأ الفراغات باللون الأسود، فيتحول الشعار المرتب إلى مربع داكن. لذلك يُسطَّح هذا الملف وحده دائمًا: تُدمج قناة ألفا في لون الخلفية الذي اخترته، أو في الأبيض إن تركت الخلفية شفافة. أما بقية المقاسات فتحتفظ بالشفافية إذا كانت موجودة في الصورة الأصلية وطلبتها، لأن الشفافية هي المطلوبة تمامًا في علامة تبويب المتصفح أو في اختصار على سطح المكتب. وإذا حددت لون خلفية بدلًا من ذلك، فإنه يُطبق على كل المقاسات بالتساوي لتبقى المجموعة متسقة.

مصدر متجه يعني أيقونات حادة

حين يكون المصدر ملف SVG، يُرسم كل مقاس من الصورة المتجهة مباشرة بدل تصغيره من صورة نقطية كبيرة واحدة. ويظهر الفرق أكثر ما يظهر في مقاس 16 بكسل: الشعار المصغَّر يتحول إلى كتلة مشوشة، أما المرسوم من جديد فيحتفظ بخطوطه. ويُنظَّف ملف SVG قبل رسمه: تُحذف البرامج النصية ومعالجات الأحداث وأي إشارة إلى خادم خارجي، كما تفعل أداة «تحويل SVG إلى PNG» لدينا. أما المصدر النقطي فيُجعل مربعًا أولًا، ثم يُصغَّر بإعادة أخذ العينات بمرشح Lanczos، وهو الأكثر حدة بين الخيارات العملية لتصغير الرسوم.

يبقى شعارك على جهازك

فك الترميز وتغيير الحجم وترميز PNG وحاوية ICO وأرشيف ZIP، كل ذلك يُبنى داخل علامة التبويب هذه في متصفحك. لا يُرفع أي شيء، وهذا أمر له قيمته حين يكون الشعار لعلامة تجارية لم تُطلق بعد. أما معظم مولّدات favicon على الإنترنت فتأخذ نسخة من شعارك إلى خوادمها قبل أن تعيد إليك أي شيء.

الأسئلة الشائعة

ما المقاسات التي تضمها المجموعة؟

ملفات PNG بمقاسات 16 و32 و180 و192 و512 بكسل، إضافة إلى ملف favicon.ico يضم المقاسات 16 و32 و48 في ملف واحد. ونسخة 48 بكسل موجودة داخل ملف ICO فقط، حيث يستخدمها Windows لعرض الاختصارات بحجم أكبر؛ ولا تأتي على هيئة ملف PNG منفصل، إذ لا يطلبها شيء على الويب.

لماذا لا توجد شفافية في apple-touch-icon؟

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

ما هي أيقونة maskable؟

يقص Android أيقونات التطبيقات بشكل يختاره الجهاز: دائرة، أو squircle (شكل بين الدائرة والمربع)، أو مربع بزوايا مستديرة. وتُبقي أيقونة maskable كل محتواها داخل المساحة الوسطى التي تشغل 80% منها، فلا يُقطع منها شيء مهم أيًا كان الشكل المطبق. فعّل هذا الخيار لتحصل على icon-512-maskable.png وعلى إدخال ثالث في ملف manifest تكون فيه قيمة purpose هي maskable.

هل أحتاج إلى ملف manifest.json؟

فقط إن أردت أن يكون موقعك قابلًا للتثبيت كتطبيق ويب تقدمي، أو أن تتحكم في لون واجهة المتصفح على Android. كلفته ملف واحد ووسم link واحد، ولا ضرر منه إن لم تستخدم هذه الميزات أبدًا، لذلك يأتي ضمن المجموعة افتراضيًا وفيه اسم تطبيقك ولون السمة.

هل يمكنني البدء من ملف SVG؟

نعم، وهو المصدر الأنسب. يُرسم كل مقاس من الصورة المتجهة بدقته الخاصة بدل إعادة أخذ العينات من صورة نقطية واحدة، فتبقى المقاسات الصغيرة واضحة. ويُنظَّف ملف SVG أولًا: تُحذف البرامج النصية ومعالجات الأحداث وأي إشارات خارجية قبل رسمه.

أين أضع الوسوم التي تنشئها الأداة؟

داخل عنصر head في صفحاتك. أما ملفات PNG وICO وmanifest فتوضع في جذر موقعك حتى تعمل المسارات الواردة في المقتطف. وإن كنت تقدّمها من مجلد فرعي، فعدّل قيم href في head-snippet.html لتطابق مكانها.

لماذا تبدو أيقونتي ضبابية؟

السبب في أغلب الحالات صغر الصورة الأصلية. تُبنى المجموعة كلها من نسخة رئيسية بمقاس 512 بكسل، فإذا كان المصدر أصغر من نحو 260 بكسل وجب تمديده للوصول إلى هذا المقاس، فتبدو المقاسات الكبيرة غير حادة. ابدأ بصورة لا تقل عن 512×512، أو بملف SVG، فتخرج المجموعة كلها حادة. أما المصدر الأصغر من 32 بكسل فيُرفض مباشرة، إذ لا يوجد فيه ما يمكن العمل عليه.

هل يُرفع الشعار إلى خادم؟

لا. لا تغادر الصورة متصفحك أبدًا: يُفك ترميزها ويُغيَّر حجمها وتُرمَّز وتُجمع في ملف ICO وتُضغط في أرشيف ZIP محليًا، ثم يُسلَّم إليك الأرشيف من الذاكرة.