إضافة أيقونة (favicon) لموقعك

الأيقونة (favicon) هي الصورة الصغيرة في تبويب المتصفح وفي المفضلة. في 2011 كان ذلك يعني ملف favicon.ico واحدًا (وملفًا إضافيًا غير متحرك، لأن Internet Explorer لم يكن يدعم الأيقونات المتحركة). اليوم، تغطي ثلاثة ملفات صغيرة كل شيء تقريبًا:

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

• favicon.ico للمتصفحات القديمة والأدوات التي تبحث عنه تلقائيًا.
• icon.svg للمتصفحات الحديثة: ملف واحد حاد في كل الأحجام.
• apple-touch-icon.png (‏180×180) لأجهزة iPhone وiPad عندما يحفظ أحدهم موقعك على الشاشة الرئيسية.

ضع الأسطر داخل <head> والملفات في جذر موقعك. محركات البحث أيضًا تستخدم ملف الأيقونة في النتائج، لذلك الملف الحقيقي أفضل من أيقونة مضمّنة داخل الصفحة.