عندما تتجول في بحر من علامات التبويب المفتوحة ، كيف يمكنك العثور بسرعة على تلك التي تحتاجها؟ أراهن أنه باستخدام Favicons – الرمز الصغير الذي يظهر بجوار عنوان الموقع في علامة التبويب المتصفح.
لا تظهر Favicons قصيرة في “الرموز المفضلة” ، إلا في علامات تبويب المتصفح ؛ ستجدها أيضًا بجوار الإشارات المرجعية ونتائج التاريخ وأشرطة البحث وشاشات متصفح الهاتف المحمول واختصارات الشاشة الرئيسية و SERPs.
غالبًا ما يتم التغاضي عن Favicons عندما إنشاء موقع ويب، لكن يمكنهم إحداث تأثير كبير على شعور موقع الويب الخاص بك. في هذه المقالة ، سنغطي سبب حاجتك إلى Favicon مخصص ، وكيفية إنشاء واحدة ، وكيفية إضافتها إلى موقع الويب الخاص بك.
لماذا يجب أن تضيف موقعًا فافيكون إلى موقع الويب الخاص بك؟
Favicons هي واحدة من تلك الأشياء الصغيرة التي تحدث فرقًا كبيرًا. هنا لماذا:
- Favicons يحسن تجربة المستخدم: يساعد Favicons الأشخاص على الانتقال بسرعة إلى موقع الويب الخاص بك عندما يكون لديهم علامات تبويب متعددة. كما يسمح للزائرين بالتعرف على موقعك في نتائج البحث. هذا يرفع على الفور تجربة موقع الويب ويمكّن الأشخاص من العثور على موقع الويب الخاص بك بسهولة كلما احتاجوا.
- يعزز الفافيكون الاعتراف بالعلامة التجارية: يجعل Favicons موقع الويب الخاص بك على الفور في غابة من علامات التبويب أو Serps. سيبدأ الزوار قريبًا في ربط موقع الويب الخاص بك وتذكره بموقعك المخصص المخصص ، بغض النظر عن الجهاز الذي يقومون به. إذا كنت قد استخدمت تكرارًا لشعارك ، فإن Favicons ستعزز أيضًا هوية علامتك التجارية وتسمح لك بالحفاظ على العلامات التجارية المتسقة عبر قنوات التسويق.
- Favicons يقدم موقع الويب الخاص بك بعض المصداقية: يمكن أن تجعل موقع Favicons عام (مثل علامة Globe) موقعًا غير مكتمل أو غير مكتمل. من ناحية أخرى ، يمكن لـ Favicons المخصصة أن تجعل موقعًا يبدو أكثر موثوقية ومهنية.
أنت تعرف الآن لماذا يعد Favicons إضافة أساسية لرفع أي موقع ويب. يجعل WordPress توصيلها بموقعك بسهولة ، أيضًا – المزيد عن ذلك في الأقسام القادمة.
هل يؤثر Favicons على جهود كبار المسئولين الاقتصاديين لموقع الويب الخاص بك؟
ليس مباشرة ، لا ، ولكن لا يزال المميتون تأثير كبار المسئولين الاقتصاديين. كيف؟ تزحف Google على موقع الويب الخاص بك ويبحث عن ملف Favicon لتحديد موقع الويب الخاص بك. يقوم زوار موقع الويب الخاص بك بنفس الشيء-فهم يكتشفون Favicons المألوفة في نتائج البحث ، مما يؤدي إلى معدل نقرة أفضل.
لا تأخذ كلامي من أجل ذلك: أ شارك المدون على Reddit أنهم شهدوا انخفاضًا في حركة المرور العضوية لأن Google لم تكن تعرض Favicon في SERPs.
كيفية إنشاء موقع Favicon لموقع الويب الخاص بك في ثلاث خطوات
هناك الكثير من النصائح المتضاربة والمربكة حول إنشاء ملفوف فافيكون – هل يجب أن تستخدم SVG أو PNG؟ هل 16 × 16 هو الحجم الأيمن أو 48 × 48؟ إليك دليل خطوة بخطوة يخترق الضوضاء ويزيل ما تحتاجه حقًا لمعرفته:
الخطوة 1: تصميم Favicon الخاص بك
من الناحية المثالية ، فإن Favicon هو متغير شعارك. هذا يضمن أن هوية علامتك التجارية تظل متسقة ولا تنسى. إذا لم يكن موقع الويب الخاص بك يحتوي على شعار ، فيمكنك إما استئجار مصمم جرافيك لإنشاء واحد لك أو DIY باستخدام أدوات تصميم الرسومات مثل canva أو فوتوشوب.
بمجرد أن يكون لديك شعار ، يمكنك تصديره بالحجم الأيمن (512 × 512) مباشرة من Canva أو Photoshop. أو يمكنك أيضًا تحميل شعارك إلى أداة مولد FAVICON لتحويلها إلى فافيكون. فيما يلي قائمة تضم خمسة مولدات فافيكون مفيدة:
توفر هذه الأدوات أيقونات Favicon الخاصة بك في كل من تنسيقات PNG و ICO. على سبيل المثال ، في RealFavicOngerator ، يمكنك تحميل صورتك ، ومعرفة كيف يظهر Favicon عبر أجهزة مختلفة ، وتنزيل حزمة Favicon الخاصة بك. يمكنك أيضًا تخصيص كيفية ظهور Favicon على المتصفحات ذات السمات المظلمة التي تم تمكينها.
نصيحة: استخدم خلفية شفافة ل Favicons الخاص بك حتى تمتزج بسلاسة مع خلفيات المتصفح. إذا لم يكن شعارك شفافًا بالفعل ، فإن أداة مثل remove.bg يمكن أن تساعدك على جعل الخلفية تختفي في ثوان.
الخطوة 2: قم بتحسين حجم وتنسيقك FAVICON
إذا كان لديك بنيت موقع الويب الخاص بك باستخدام WordPress، تحتاج إلى التأكد من تلبية إرشادات صور أيقونة الموقع.
- نسبة العرض إلى الارتفاع: يجب أن تكون Favicon صورة مربعة.
- أبعاد: بالنسبة لمواقع الويب الخاصة بـ WordPress ، يجب أن يكون حجمك Favicon ما لا يقل عن 512 × 512 بكسل.
- نوع الملف: يدعم WordPress أي تنسيق Favicon صالح – أكثر أنواع الملفات شيوعًا هي PNG و SVG.
هل يجب أن تستخدم PNG أو SVG؟ ذلك يعتمد.
- تعني SVG “رسومات المتجهات القابلة للتطوير” ، مما يعني أن FAVICON في تنسيق SVG سيتم صنعه من المسارات والأشكال ، وليس وحدات البكسل. هذه الميزة تجعلها قابلة للتطوير بلا حدود ، دون أن تفقد جودة Favicon الواضحة. تكمن المشكلة في أن SVG غير مدعوم بالكامل للمحترفين من قبل جميع المتصفحات.
- من ناحية أخرى ، لا يتم دعم PNG على نطاق واسع من قبل جميع المتصفحات والأجهزة ، بل من الأسهل أيضًا استخدامها نظرًا لأن معظمنا قد استخدم هذا التنسيق بالفعل.
إذا كنت تريد أن تفهم المستعرضات التي تدعم تنسيقات Favicon ، توجه إلى هل يمكنني استخدام لحل كل شكوكك على الفور. يمكنك معرفة إصدارات المتصفح التي تتوافق مع تنسيقات PNG و SVG.
ملحوظة: بناءً على متصفح المستخدم وجهازه ، ستظهر Favicon بأحجام مختلفة. على سبيل المثال ، تظهر Favicons عادة في 96 × 96 أبعاد في اختصار سطح المكتب. أقصر بعد هو 16 × 16. اختر favicon الذي يظل في حالة جيدة بمجرد تقلصه إلى تلك الأبعاد. من الجيد أيضًا البقاء على اطلاع إرشادات Google لضمان عرض Favicon على النحو الأمثل في علامات التبويب Serps ومستعرض.
الخطوة 3: أضف ملف Favicon إلى موقع الويب الخاص بك
إذا كنت تستخدم WordPress ، فهناك طريقتان سهلين لإضافة Favicon إلى موقع الويب الخاص بك:
- باستخدام إعدادات WordPress العامة.
- باستخدام WordPress Customizer.
دعنا نغطي كل طريقة.
باستخدام إعدادات WordPress العامة
هذه هي الطريقة الأسرع والأكثر وضوحًا لإضافة موقع Favicon إلى موقع WordPress الخاص بك. كل ما عليك فعله هو التأكد من أن لديك مربعًا 512 × 512 بكسل Favicon – سوف يهتم WordPress بالباقي.
- في لوحة معلومات موقعك ، انتقل إلى إعدادات → عام.
- انقر على “”اختر أيقونة موقع” زر.
- قم بتحميل ملف جديد أو اختيار واحد من مكتبة الوسائط الحالية.
- انقر فوق “تعيين رمز موقع“زر بعد اختيار صورتك. إذا احتاجت Favicon إلى زراعة المحاصيل ، فسيطلب منك WordPress ضبط أبعاد الصورة.
يمكنك رؤية معاينة لـ Favicon بعد حفظ التغييرات:
باستخدام مخصص WordPress
على غرار الطريقة السابقة ، يعد استخدام WordPress Customizer طريقة بسيطة جدًا لتحميل Favicon.
- في لوحة معلومات موقعك ، انتقل إلى مظهر → تخصيص.
- انقر فوق “هوية الموقع.“
- في الأسفل ، ستجد “”حدد أيقونة الموقع“زر لتحميل Favicon الخاص بك.
- يمكنك أيضًا قصور صورتك إذا كنت بحاجة إلى التحميل.
هناك طريقة أخرى لإضافة Favicon إلى أي موقع (بغض النظر عما إذا كان على WordPress أم لا) هي تعديل ملفات رمز السمة. اتبع هذه الخطوات:
- قم بتحميل ملف أو مكتبة الوسائط الخاصة بمنشئ موقع الويب الخاص بك.
- انسخ عنوان URL للملف الذي تم تحميله.
- أدخل القطعة التالية من الكود داخل من HTML الخاص بك:
<head>
…
<link rel="icon" href="https://yoursite.com/favicon.png" type="image/x-icon">
<link rel="shortcut icon" href="https://yoursite.com/favicon.png" type="image/x-icon">
…
</head>ومع ذلك ، لا أوصي باستخدام هذه الطريقة لأن معظم بناة مواقع الويب لديهم طرق أسهل لتحميل Favicon ، ويمكن أن يعبّر العبث بالرمز وظائف موقع الويب الخاص بك ومظهره إذا لم تكن حريصًا.
ثلاثة أفضل الممارسات لتصميم ممارسات فافيكون رائعة لموقع الويب الخاص بك
فيما يلي بعض أفضل الممارسات التي يجب عليك اتباعها لضمان أن تبدو FAVICON محترفة وتحمل موثوقية:
1. اجعل الأمر بسيطًا
لا تستخدم شعارات مفصلة بشكل مفرط تحتوي على الكثير من النص أو العناصر. إذا كان لديك اسم شركة كبير ، على سبيل المثال ، لا توضح الاسم الكامل. اجعله موجزًا وقصره على خطاب أو اختصار. لماذا؟ Favicon هو أيقونة صغيرة – فأنت تريد التأكد من أنها مرئية بوضوح عبر جميع المتصفحات والأجهزة. استخدم رمزًا جريئًا واضحة ويمكن التعرف عليه بسهولة.
2. فحص اللون الخاص بك favicon
مع مجموعة متنوعة جديدة من المتصفحات وزيادة شعبية الوضع المظلم ، تأكد من أن Favicon تبدو رائعة ضد جميع أنواع الخلفيات. اختبره على خلفيات بيضاء ورمادية وسوداء. إن الحفاظ على شفافتك الشفافة عن طريق إزالة الخلفية يساعد أيضًا هنا.
3. اختبر Favicon بعد التحميل
تحقق من كيفية ظهور Favicon على المتصفحات المختلفة والأجهزة المحمولة وأجهزة iPad ومراتيل الإشارات المرجعية وعلامات التبويب المثبتة. إذا كان مشوهًا في أي جهاز أو متصفح ، واستكشاف الأخطاء وإصلاحها وإعادة ضبط البعد إلى المقياس الصحيح.
صغيرة ولكنها قوية
Favicon هو تفاصيل صغيرة يمكن أن تحدث تأثيرًا كبيرًا على هوية العلامة التجارية وتجربة المستخدم لموقع الويب الخاص بك. نأمل أن ساعدك هذا المقال على فهم كيفية إنشاءها بسرعة وإعطاء موقع الويب الخاص بك البولندية التي يستحقها.
Favicons ليسوا الشيء الوحيد الذي يرفع تجربة موقع الويب الخاص بك. سرعة سريعة وواجهة مستخدم نظيفة تقطع شوطًا طويلاً. ابدأ مع WordPress.com ((أو ترحيل موقع الويب الخاص بك الحالي) لأداء موقع الويب الممتاز ، والصيانة ، والاستضافة المدارة ، والأمان ، وأكثر من ذلك بكثير.
