صانع أيقونة الموقع (Favicon)
أنشئ أيقونة موقعك من صورة أو شعار أو من حرف أو إيموجي: ملف favicon.ico وأيقونات آبل وأندرويد وملف manifest وكود HTML جاهز للنسخ.
تعمل هذه الأداة دون اتصال بالإنترنت.
ملفك لا يغادر جهازك
حرف أو حرفان يعطيان أفضل وضوح بحجم ١٦ بكسل.
كود HTML لقسم head
<link rel="icon" href="/favicon.ico" sizes="16x16 32x32 48x48"> <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">
ضع الملفات في جذر الموقع (بجانب الصفحة الرئيسية) وألصق هذا الكود داخل وسم head.
يظهر في خيار «الإضافة إلى الشاشة الرئيسية» في أندرويد.
محتوى site.webmanifest
{
"name": "",
"short_name": "",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#0f766e",
"background_color": "#ffffff",
"display": "standalone"
}
طريقة الاستخدام
١. اختر إنشاء الأيقونة من «حرف أو إيموجي» أو من «صورة أو شعار».
٢. اضبط النص والألوان أو اختر صورة الشعار، ثم حدّد الشكل (مربع أو زوايا مستديرة أو دائرة) والمسافة عن الحافة.
٣. تُنشأ الأيقونات بكل الأحجام فوراً؛ تأكد من وضوح معاينة ١٦ بكسل لأنها الحجم الظاهر في تبويب المتصفح.
٤. نزّل كل الملفات في ملف ZIP، وضعها في جذر الموقع، وألصق كود HTML في قسم head من صفحاتك.
نصائح لأيقونة واضحة
- التفاصيل لا تظهر بحجم ١٦ بكسل؛ استخدم الحرف الأول من اسم العلامة التجارية أو رمزاً مبسطاً من الشعار بدلاً من الشعار كاملاً.
- اجعل التباين كبيراً بين لون النص ولون الخلفية لتظهر الأيقونة في الوضعين الفاتح والداكن للمتصفح.
- إذا كان الشعار شفافاً فاترك مسافة صغيرة عن الحافة حتى لا يلتصق بأطراف أيقونة أندرويد.
الأسئلة الشائعة
ما هي أيقونة الموقع (Favicon) وأين تظهر؟
هي الأيقونة الصغيرة للموقع التي تظهر في تبويب المتصفح وشريط الإشارات المرجعية ونتائج بحث جوجل على الهاتف وعلى الشاشة الرئيسية للهاتف عند إضافة الموقع إليها.
لماذا أحتاج favicon.ico وملفات PNG معاً؟
ملف ICO هو الصيغة الأقدم والأكثر توافقاً، وتقرؤه المتصفحات من جذر الموقع حتى من دون كود HTML. أما ملفات PNG فضرورية للشاشات عالية الدقة والآيفون (apple-touch-icon) وأندرويد.
ما الأحجام الموجودة داخل favicon.ico؟
ثلاثة أحجام: ١٦ و٣٢ و٤٨ بكسل في ملف واحد، ويختار ويندوز والمتصفح الحجم المناسب منها.
لماذا خلفية أيقونة آبل بيضاء؟
يعرض الآيفون الأجزاء الشفافة من أيقونة الشاشة الرئيسية باللون الأسود ويجعل زواياها مستديرة بنفسه، لذلك تُنشأ apple-touch-icon دائماً مربعة ومن دون شفافية.