كيفية إنشاء أيقونة موقع Favicon
المقاسات والصيغ والشيفرة التي تحتاجها لأيقونة موقع تظهر في كل مكان.
أيقونة الموقع (Favicon) هي الأيقونة الصغيرة التي تظهر في علامة تبويب المتصفح، وفي المفضلة، وبجوار موقعك في نتائج بحث Google على الهاتف. غيابها يجعل الموقع يبدو غير مكتمل، والأيقونة الضبابية أسوأ. إنشاء أيقونة جيدة يستغرق بضع دقائق.
ابدأ بالتصميم المناسب
تُعرض أيقونة الموقع بحجم قد يصل إلى 16 في 16 بكسل فقط، لذا لن يكون الشعار الكامل مع الاسم المكتوب مقروءًا. استخدم علامة بسيطة: الرمز الموجود في شعارك، أو حرفًا واحدًا، أو شكلًا بارزًا بلون علامتك التجارية. اختبرها بتصغيرها إلى ربع حجمها على الشاشة: إن ظللت تميّز ما هي، فستنجح.
ابدأ من صورة مربعة لا تقل عن 512 في 512 بكسل، ويُفضّل أن تكون PNG بخلفية شفافة. إذا لم يكن شعارك مربعًا، اقتصّه إلى مربع مع تثبيت النسبة على 1:1.
الملفات التي تحتاجها
| الملف | المقاس | يستخدمه |
|---|---|---|
| favicon.ico | يحتوي على نسخ بمقاس 16 و32 و48 بكسل | المتصفحات، والأنظمة القديمة، والطلب الافتراضي للمسار /favicon.ico |
| أيقونة PNG | 32 في 32 و192 في 192 | المتصفحات الحديثة، والشاشات الرئيسية في Android |
| apple-touch-icon.png | 180 في 180 | اختصارات الشاشة الرئيسية في iPhone وiPad |
تستخدم Google Search أيقونة موقعك في النتائج أيضًا. يجب أن تكون مربعة بمقاس 48 في 48 بكسل على الأقل، وأن تكون قابلة للزحف على موقعك.
إنشاء ملف ICO
أفلت صورة PNG المربعة في أداة تحويل PNG إلى ICO. تنتج الأداة ملف .ico حقيقيًا يحتوي على المقاسات الصغيرة التي تطلبها المتصفحات. ولنسخ PNG، غيّر مقاس الصورة المربعة نفسها إلى 180 و192 و32 بكسل.
إضافتها إلى موقعك
ارفع ملف favicon.ico إلى المجلد الجذر لموقعك حتى يمكن الوصول إليه على yoursite.com/favicon.ico، وأضف هذه الأسطر داخل وسم head في صفحاتك:
<link rel="icon" href="/favicon.ico" sizes="any"> <link rel="icon" type="image/png" href="/ar/icon-192.png" sizes="192x192"> <link rel="apple-touch-icon" href="/ar/apple-touch-icon.png">
في WordPress، انتقل إلى Appearance ثم Customize ثم Site Identity، وارفع صورة مربعة بصفتها Site Icon؛ وسينشئ WordPress المقاسات نيابة عنك. ولكل من Shopify وWix وSquarespace إعداد خاص بأيقونة الموقع في إعدادات الموقع أو القالب.
عندما لا تظهر الأيقونة الجديدة
تحتفظ المتصفحات بأيقونات المواقع في ذاكرتها المؤقتة بعناد. افتح الموقع في نافذة تصفح خاصة، أو زر yoursite.com/favicon.ico مباشرة وحدّث الصفحة. قد تستغرق Google أيامًا أو أسابيع لتحديث الأيقونة في نتائج البحث، بعد أن تعيد الزحف إلى صفحتك الرئيسية.
أخطاء شائعة
- استخدام الشعار الكامل بنص صغير، فيتحول إلى لطخة عند 16 بكسل.
- أيقونة بيضاء على خلفية شفافة، فتختفي في علامات التبويب ذات الألوان الفاتحة.
- توفير ملف صغير بمقاس 16 بكسل فقط، فيبدو ضبابيًا على الشاشات عالية الدقة.
- نسيان الملف في /favicon.ico، الذي تطلبه بعض المتصفحات وبرامج الزحف بغض النظر عما تذكره الصفحة.