أيقونة المفضلة Favicon: تعريفها – شروطها – كيفية إنشاء أيقونة مميزة

ما هي أيقونة المفضلة Favicon: شعار صغير يظهر في علامات تبويب المتصفح وأشرطة الإشارات المرجعية ويهدف لتمثيل الموقع الإلكتروني أو النشاط التجاري المقترن به.

قبل نحو عام تقريبًا، طبّقت غوغل نسق إظهار نتائج بحث الأجهزة المحمولة على نظيرتها التقليدية (سطح المكتب). وإضافةً إلى أيقونة المفضلة Favicon، تضمن التحديث الجديد جانبين آخرين:

1️⃣ الروابط: في كثير من الحالات، تُظهر غوغل مسارات التنقل -وهي مجموعة روابط تساعد المستخدم في فهم التدرج الهرمي لموقعك والتنقل خلاله- في نتائج البحث بدلاً من إظهار عنوان الروابط الكاملة لمواقع الويب.
لم يعد نسق الإظهار يفرّق بين HTTP و HTTPS. وتحولت الروابط من اللون الأخضر المرئي بسهولة ? اللون الأسود الذي تصعب رؤيته!

2️⃣ وسم الإعلان: تظهر وسوم الإعلانات “ad labeling” في نفس موضع أيقونة المفضلة ضمن نتائج البحث، غير أنها تكون سوداء اللون وهو نوع من الاندماج في سطر عنوان URL. مع مرور الوقت، يُتوقع أن يتحول وسم الإعلان الأسود للونٍ فاتح بطريقة تُشبه كيفية جعل غوغل ألوان خلفية إعلانات غوغل أدسنس أفتح بمرور الوقت!

ويمكننا تخمين أن يؤدي هذا التغيير إلى زيادة نسبة النقر إلى الظهور (CTR) للإعلانات مع خفض نسبة النقر إلى الظهور (CTR) لنتائج البحث، على الأقل حتى يعتاد المستخدمون رؤية الرموز المفضلة وعدم التفكير فيها على أنها إعلانات.

كيف تعامل المجتمع التقني مع التعديلات الجديدة؟

انتقد موقع Verge شكل صفحة نتائج محرك البحث “SERP”. في حين عبّر بعض الأشخاص -في Reddit- عن كرههم التصميم الجديد لأنه يُشتت الانتباه وبسبب سوء التباين في ألوان عناوين الويب (المُشار إليه أعلاه).

وأخيرًا، ظنّ الكثير من الناس أن نتائج البحث الأولى ليست سوى إعلانات!

كيف تستخدم أيقونة المفضلة Favicon في عملية احتيال؟!

أؤمن أن الكثير من مواقع التصيد الاحتيالي (Phishing) ستستخدم نطاقات فرعية “مُحرّفة” عن مواقع العلامة التجارية (التي يحاولون تقليدها)، إلى جانب أيقونات المفضلة ذاتها لتلك المواقع، وذلك بهدف الظهور بمظهر أصيل.

يا للهول! هذا احتمال وارد بالفعل، فهل من حل؟!

شخصيًا، لن أعيد هيكلة موقع موجود بناءً على نسق/تنسيق نتائج البحث الحالي، ولكن إذا كنت أقوم ببناء موقع جديد تمامًا، فقد أفضّل وضعه في الجذر (أي بدون WWW)، وبالتالي ستغدو كلمات اسم النطاق أقرب بكثير لأيقونة المفضلة.

إرشادات غوغل حول أيقونة المفضلة

? يجب أن يكون كلًا من (ملف أيقونة المفضلة) و(الصفحة الرئيسية) قابلين للوصول بواسطة عناكب غوغل.
? حبذا لو جعلت أيقونة المفضلة لموقعك تمثيلًا مرئيًا لعلامتك التجارية، وذلك لمساعدة المستخدمين على التعرف بسرعة على موقعك عند تصفحهم نتائج البحث.
? تذكر أن تجعل أبعاد أيقونة المفضلة من مضاعفات الرقم (48.، على سبيل المثال: 48×48 بكسل / 96×96 بكسل/ 144 × 144 بكسل وما إلى ذلك. وبالطبع بلاحقة SVG.
? ستعمل غوغل على تغيير أبعاد أيقونة المفضلة لموقعك إلى 16×16 بكسل لاستخدامها في نتائج البحث، لذا تأكد من وضوحها عند هذه الدقة. ملاحظة: لا تستخدم أيقونة المفضلة بهذا المقاس مسبقًا.
? يجب أن يكون عنوان الويب لأيقونة المفضلة ثابتًا.
? لن تعرض غوغل أي أيقونة مفضلة تعتبرها غير ملائم، بما في ذلك المواد الإباحية أو الرموز التي تحض على الكراهية (على سبيل المثال، الصليب المعقوف 卐). إذا اُكتشف هذا النوع من الصور داخل رمز مفضل، فستستبدله غوغل برمز افتراضي.

نصائح شخصية لصنع أيقونة المفضلة المتميزة

بالإضافة إلى ما سبق، أعتقد أنه من المنطقي تقديم بعض النصائح الأخرى لتحسين أيقونات المفضلة.

⬛️ حافظ على اتساق أيقونات المفضلة لديك عبر أقسام موقعك إذا كنت تحاول تقديم تصور ثابت للعلامة التجارية.
⬜️ كما يقول المثل، الأقل هو الأكثر. لذا نؤمن أن 16×16 بكسل مساحة صغيرة، لذا إذا حاولت نقل الكثير من المعلومات بداخلها، فمن المحتمل أن ينتهي بك الأمر لإنشاء شكل مُبهم لا يعرفه أحد تقريبًا.
⬛️ ربما يكون من المنطقي تضمين الحرف الأول من اسم موقع ما أو عنصر واجهة مستخدم شعار مبسط باعتباره أيقونة مفضلة، ولكن من الصعب تضمين كلاهما وإلا تحوّلت أيقونة المفضلة إلى فوضى!
⬜️ استخدم أيقونة مفضلة ملون على خلفية بيضاء بدلًا من أيقونة مفضلة بيضاء على خلفية ملونة، لأن وجود خلفية ملونة يعني تبديد المساحة النادرة لرسم الإطار (border).
⬛️ يمنحك استخدام الشكل المربع مقابل الدائرة مساحة أكبر للعمل بها.
⬜️ حتى إذا كان احتوى شعارك على خط مائل، فالأفضل تجنب استخدامه في أيقونة المفضلة (لجعل الحرف يبدو أكثر وضوحًا).

بعض أيقونات المفضلة التي أحبها (ومُبرر حُبي لها)?

تمكنت الشركة من وضع كلمة Citi ضمن تلك المساحة الضيقة، مع إبقاء شكل الأيقونة مميزًا ولا يمكن نسيانه.

استغلال رائع للمساحة عبر وضع حرف N، وألوان الشعار أنيقة، ويمكنك أن تشعر وكأن أيقونة المفضلة سهم يشير نحو اليمين.

استخدام نمط الخط العريض “Bold” خيار يوحي بالقوة فعلًا.

صنعت المنصة أيقونة مفضلة لا تُنسى فقط من خلال استخدامها جزء صغير من الاسم، ولاحظوا معي أيضًا حُسن اختيارهم للألوان.
بمناسبة الحديث عن لينكدإن، هل تعلم أن المنصة تشمّر عن ذراعيها وتعتزم منافسة منصات العمل الحرّ؟

بعض أيقونات المفضلة الأخرى لا تُنسى والتي أحبها: Twitter و Amazon و eBay و Paypal و Google Play و CNBC.

بعض أيقونات المفضلة التي أكرهها (ومُبرر كُرهي)?

من الصعب قراءة حرف W!

حشرت الشركة كلًا من الشعار والأحرف الأربع -التي تُشكل اختصار اسم الشركة- ضمن مساحة صغيرة! (هذا هو شكلها الحقيقي بأبعاد 16×16بكسل)

استخدمت الشركة أيقونات مفضلة غير المتسقة عبر خدماتها (وبحروف مائلة أيضًا!). تحتوي بعضها كلمة Yahoo كاملة في حين كان البعض الآخر عبارة عن حرف Y! بخط مائل فحسب.

في الختام

إذا لم يكن لديك أيقونة مفضلة لموقعك/مدونتك، فستعرض (غوغل) كرة أرضية مملة ? بجوار روابطك في نتائج البحث. الحل؟ ننصح بـ Real Favicon Generator كأداة جيدة لإنشاء (أيقونة مفضلة) رائعة وبأحجام مختلفة.

ترجمة بتصرف كبير لتدوينة Favicon SEO

تدوينة عميقة، أظنها ستُعجبك: ابدأ أولًا مع مدونة، ثم ابنِ شركة، وبعدها إمبراطورية