كيف تصنع Favicon
لصنع أيقونة موقع، أضف شعارك أعلاه، أو اكتب حرفًا أو إيموجي، ثم اضبط المظهر ونزّل ملف ZIP. تعرض المعاينات الأيقونة بكل مقاس حقيقي وفي تبويب المتصفح، في الوضعين الفاتح والداكن.
- اختر المصدر. يعمل شعار PNG أو SVG بأفضل شكل؛ وأي صورة أخرى تُوضع داخل مربع. ليس لديك شعار؟ استخدم حرفًا أو إيموجي على خلفية ملونة.
- اضبط المظهر. لون الخلفية أو شفافة، والشكل (مستدير أو مربع أو دائرة)، ومقدار الهوامش حول الصورة.
- نزّل. يعطيك خيار تنزيل كل الأيقونات الحزمة الكاملة؛ أما favicon.ico فقط فيعطيك ملفًا واحدًا فقط.
محتويات حزمة Favicon
| الملف | المقاس | يستخدمه |
|---|---|---|
favicon.ico | 16 و32 و48 بكسل | كل المتصفحات وWindows ونتائج البحث |
favicon-16x16.png, favicon-32x32.png | 16 و32 بكسل | تبويبات المتصفح والمفضلة |
apple-touch-icon.png | 180 بكسل | الشاشة الرئيسية في iPhone وiPad |
android-chrome-192x192.png, -512x512.png | 192 و512 بكسل | الشاشة الرئيسية في Android وتطبيقات الويب المثبتة |
site.webmanifest | - | يحدد أسماء الأيقونات وألوانها لـ Android وتطبيقات الويب |
favicon-html.txt | - | الوسوم التي تلصقها في صفحاتك |
تحصل أيقونة Apple دائمًا على خلفية صلبة وزوايا مربعة: فجهاز iPhone يقوم بتدوير الزوايا بنفسه ويعرض المناطق الشفافة باللون الأسود.
أضف Favicon إلى موقعك
- فك ضغط الحزمة وارفع الملفات إلى المجلد الرئيسي لموقعك، بجوار صفحتك الرئيسية، بحيث يفتح الرابط
yoursite.com/favicon.icoالأيقونة. - الصق وسوم HTML (الظاهرة أعلاه وفي
favicon-html.txt) داخل<head>في صفحاتك. - أعد التحميل بعد مسح الذاكرة المؤقتة. تحتفظ المتصفحات بالأيقونات القديمة، لذا فإن نافذة التصفح الخاص هي أسرع طريقة للتحقق.
في WordPress يمكنك بدلًا من ذلك تعيين أيقونة 512 بكسل كأيقونة للموقع في أداة التخصيص، وسيُنشئ بقية المقاسات تلقائيًا.
نصائح لأيقونة واضحة
- بسّط. عند 16 بكسل يتحول الشعار المفصّل إلى بقعة غير واضحة. استخدم رمز شعارك أو حرفه الأول بدلًا من الشعار الكامل مع النص.
- استخدم التباين. تكون التبويبات فاتحة أو داكنة بحسب سمة المتصفح - تحقق من المعاينتين.
- انتبه للهوامش. الهوامش الأقل تجعل الأيقونة أكبر في التبويب؛ والهوامش الأكبر قليلًا تبدو أفضل على الشاشة الرئيسية للهاتف.
تحتاج إلى ملف .ico واحد بمقاس مختلف؟ يحفظ محول الصور أي صورة بصيغة ICO.
الأسئلة الشائعة
كيف أصنع أيقونة موقع (favicon)؟
أضف شعارك أو أي صورة مربعة في المربع الموجود بهذه الصفحة، أو اكتب حرفًا أو إيموجي. اضبط الخلفية والهوامش والشكل، ثم نزّل ملف ZIP الذي يضم جميع مقاسات الأيقونات مع كود HTML لإضافته إلى موقعك.
ما المقاسات التي تحتاجها أيقونة الموقع؟
ملف favicon.ico بنسخ 16 و32 و48 بكسل يغطي المتصفحات وWindows؛ وأيقونة apple-touch-icon بمقاس 180 بكسل تغطي iPhone وiPad؛ وأيقونتا 192 و512 بكسل تغطيان Android وتطبيقات الويب المثبتة. وتجد جميعها في الحزمة.
كيف أضيف الأيقونة إلى موقعي؟
ارفع الملفات الموجودة في ملف ZIP إلى المجلد الرئيسي لموقعك بحيث يفتح favicon.ico على yoursite.com/favicon.ico. ثم الصق وسوم HTML داخل قسم head في صفحاتك.
لماذا لا تظهر أيقونتي الجديدة؟
تحتفظ المتصفحات بالأيقونات في الذاكرة المؤقتة لفترة طويلة. افتح رابط الأيقونة مباشرة، وأعد تحميله، أو جرّب نافذة التصفح الخاص. وقد يستغرق تحديثها في نتائج البحث أسابيع.
هل يمكنني صنع أيقونة من نص أو إيموجي؟
نعم. اختر "حرف أو إيموجي"، واكتب حرفًا أو حرفين، ثم اختر الألوان. إنها طريقة سريعة للحصول على أيقونة أنيقة بدون شعار.
هل يتم رفع صورتي؟
لا. تُنشأ جميع الأيقونات داخل متصفحك، ولا تغادر صورتك جهازك أبدًا.