لماذا يحتاج موقعك إلى favicon؟
أيقونة favicon هي الرمز الصغير الذي يظهر في تبويب المتصفح، المفضلة، بعض معاينات البحث، وأحيانًا عند حفظ الموقع على شاشة الهاتف. حجمها صغير، لكنها تساعد الزائر على تمييز موقعك بسرعة وسط الكثير من التبويبات.
أسهل طريقة لإنشائها هي البدء بصورة واضحة ثم استخدام مولد Favicon. الأداة تحول صورة واحدة إلى أحجام الأيقونات القياسية التي يحتاجها موقع حديث.
ابدأ بصورة مناسبة
استخدم صورة مربعة قدر الإمكان. رمز بسيط، علامة من الشعار، حرف واضح، أو أيقونة تطبيق تعمل أفضل من شعار طويل مليء بالتفاصيل. عند حجم 16×16 أو 32×32 تختفي التفاصيل الصغيرة بسرعة.
قبل إنشاء favicon راجع هذه النقاط:
- التصميم واضح وهو صغير.
- الخلفية والتصميم بينهما تباين كاف.
- الأيقونة لا تعتمد على كلمات صغيرة.
- العنصر الأساسي في منتصف الصورة.
- الصورة ليست ضبابية قبل التصغير.
إذا كانت الصورة تحتاج قصًا أو تعديلًا بسيطًا، جهزها أولًا باستخدام محرر الصور، ثم استخدم النسخة المربعة النهائية في مولد favicon.
أنشئ الأحجام القياسية
افتح مولد Favicon، ارفع الصورة، ثم أنشئ مجموعة الأيقونات. حزمة favicon الجيدة تحتوي على أكثر من حجم لأن المتصفحات والأجهزة لا تستخدم حجمًا واحدًا دائمًا.
الأحجام الصغيرة تناسب تبويبات المتصفح. والأحجام الأكبر تفيد الاختصارات والشاشات عالية الدقة. إنشاء كل الأحجام مرة واحدة يمنع خطأ استخدام أيقونة صغيرة في كل مكان.
أضف كود HTML
بعد إنشاء الأيقونات، انسخ كود HTML الخاص بالروابط وضعه داخل قسم head في موقعك. هذا يخبر المتصفح بمكان ملفات الأيقونة المناسبة.
إذا كان موقعك يستخدم قالبًا عامًا، أضف الكود في ملف القالب حتى يظهر favicon في كل الصفحات. وبعد النشر افتح الموقع وحدث الصفحة. أحيانًا يحتفظ المتصفح بالأيقونة القديمة في الكاش، لذلك جرب التحديث القوي أو نافذة خاصة إذا لم تظهر فورًا.
أخطاء شائعة
أكثر خطأ شائع هو استخدام شعار عريض. قد يبدو جميلًا في رأس الموقع، لكنه يصبح غير مقروء كأيقونة صغيرة. الأفضل استخدام رمز مبسط من الشعار.
خطأ آخر هو ضعف التباين. رمز داكن على خلفية شفافة أو داكنة قد يختفي في الوضع الليلي. اختبر الأيقونة على خلفيات فاتحة وداكنة.
كذلك لا تغير favicon كثيرًا. الأيقونة جزء من ذاكرة الزائر عن موقعك. غيّرها عند تغيير الهوية البصرية، وليس مع كل تجربة تصميم صغيرة.
قائمة مراجعة أخيرة
قبل الانتهاء، تأكد أن الأيقونة واضحة بالأحجام الصغيرة، وأن الملفات مرفوعة في المكان الصحيح، وأن كود HTML موجود في الموقع.
لإنجاز سريع، جهز صورة مربعة، افتح مولد Favicon، أنشئ الأحجام القياسية، ثم أضف كود HTML إلى موقعك.