كيفية الاستخدام
- اختر «أحرف» واكتب حرفًا أو حرفين وحدد ألوانهما، أو اختر «صورة» وحدد شعارًا (يُفضّل أن يكون مربعًا وبحجم 512 px على الأقل).
- تحقّق من معاينات جميع الأحجام، ولا سيما 16 و32 px، التي تظهر في ألسنة المتصفح.
- نزّل ملف ZIP وحمّل ملفاته إلى المجلد الجذر لموقعك.
- الصق وسوم HTML في قسم head بصفحاتك، وعدّل الاسم في site.webmanifest إذا لزم الأمر.
كيف تعمل الأداة
تبحث المتصفحات والأجهزة عن الأيقونات في مواضع مختلفة. تتضمن المجموعة التي تُنشأ هنا الملفات الشائعة: favicon.ico بصور بأحجام 16 و32 و48 px لألسنة المتصفح والإشارات المرجعية والبرامج القديمة التي تطلب /favicon.ico تلقائيًا؛ وملفات PNG بحجمَي 16 و32 px المشار إليها بوسوم link؛ وأيقونة apple-touch-icon بحجم 180 × 180 تُستخدم عند إضافة أحدهم موقعك إلى الشاشة الرئيسية على iPhone أو iPad؛ وأيقونات بحجمَي 192 و512 px يُشار إليها من site.webmanifest للشاشات الرئيسية على Android وتطبيقات الويب القابلة للتثبيت.
يخزّن ملف favicon.ico الأيقونات بصيغة PNG داخل حاوية ICO، ويمكن لجميع المتصفحات الحالية وWindows Vista والإصدارات الأحدث قراءته. تُنشأ ملفات ICO وZIP باستخدام كود في هذه الصفحة، ولا يُرسل أي شيء إلى خادم.
تحتاج الأحجام الصغيرة إلى تصميم بسيط: فالخطوط الرفيعة والنصوص الصغيرة تختفي عند مقاس 16 × 16 بكسل، لذا يكون الحرف العريض أو الشعار المبسط أوضح من شعار كامل يتضمن كلمات. تُصغّر الصورة على عدة مراحل عالية الجودة. وتُضاف دائمًا خلفية بلون ثابت إلى apple-touch-icon، لأن iOS يعرض المناطق الشفافة باللون الأسود، كما يدوّر زوايا الأيقونة بنفسه.
بعد تحميل أيقونات جديدة، قد تستمر المتصفحات في عرض الأيقونة القديمة لبعض الوقت بسبب التخزين المؤقت المكثف. غالبًا ما يساعد التحديث القسري أو فتح /favicon.ico مباشرةً.
أمثلة
أيقونة حرف لمشروع جديد
كتابة "TG" بحروف بيضاء على مربع أخضر داكن بزوايا مستديرة تمنحك أيقونة واضحة تظل مقروءة عند مقاس 16 × 16 px في لسان المتصفح، من دون الحاجة إلى تصميم شعار.
إنشاء أيقونة من شعار موجود
يؤدي استخدام شعار PNG بحجم 1024 × 1024 وخلفية شفافة مع خيار ملاءمة الصورة كاملةً إلى إنشاء أيقونات شفافة للألسنة وأيقونة apple-touch-icon بخلفية بلون علامتك التجارية.
شعار عريض
في شعار نصي بعرض 1200 × 300، لا يُبقي خيار الاقتصاص من الوسط إلا على الأحرف الوسطى. أما ملاءمة الصورة كاملةً فتعرض كل شيء بحجم صغير؛ وعادةً ما يبدو استخدام شعار منفصل ومربع أفضل.
الأسئلة الشائعة
هل ما زلت بحاجة إلى favicon.ico؟
ما زال مفيدًا. تطلب بعض المتصفحات وقارئات الخلاصات والأدوات الملف /favicon.ico من جذر الموقع حتى من دون وسم link. وتستخدم المتصفحات الحديثة أيضًا أيقونات PNG المشار إليها في HTML.
أين أضع الملفات؟
حمّل الملفات إلى المجلد الجذر لموقعك، بجوار الصفحة الرئيسية، لكي تعمل المسارات /favicon.ico والمسارات الأخرى في HTML. إذا استخدمت مجلدًا فرعيًا، فغيّر المسارات في وسوم link وفي site.webmanifest.
لماذا ما زالت الأيقونة القديمة تظهر؟
تخزّن المتصفحات أيقونات المواقع مؤقتًا بشكل منفصل ولفترة طويلة. جرّب التحديث القسري، أو افتح /favicon.ico في لسان جديد، أو تحقّق من نافذة خاصة. كما أن إعادة تسمية الملفات، مثل favicon-v2.ico، تفرض إعادة تحميلها.
هل تنشئ هذه الأداة أيقونة favicon بصيغة SVG؟
لا. ينشئ الأداة ملفات PNG وICO، وهي تعمل في كل مكان. إذا كان لديك شعار SVG بالفعل، فيمكنك إضافته بنفسك باستخدام وسم link ذي النوع image/svg+xml، إلى جانب هذه الملفات.
الخصوصية
تُنشأ الأيقونات وملفا ICO وZIP في متصفحك. لا تُرفع صورتك أو نصك ولا تُخزّن ولا تُضمّن في بيانات التحليلات.