طريقة الاستخدام
- 1ارفع صورة الشعار، أو اكتب حرفًا أو إيموجي.
- 2اختر لون الخلفية ولون الخط والحواف الدائرية في وضع النص.
- 3نزّل ملفات PNG بالمقاسات المختلفة وfavicon.ico وsite.webmanifest.
- 4انسخ كود HTML وضعه داخل وسم head.
ما الملفات التي تحصل عليها؟
صور PNG بمقاسات 16 و32 و48 بكسل للمتصفح، و180 بكسل لأيقونة Apple Touch على الآيفون، و192 و512 بكسل لأندرويد والتطبيقات التقدمية PWA، وملف favicon.ico حقيقي يضم عدة مقاسات، وملف site.webmanifest، وكود HTML جاهز للربط.
لماذا يهم Favicon؟
تظهر الأيقونة في تبويبات المتصفح والمفضلة وعلى شاشة الجوال عند إضافة الموقع، كما يعرضها Google بجانب اسم موقعك في نتائج البحث على الجوال. أيقونة واضحة تزيد التعرف على علامتك وثقة الزائر.
نصائح للتصميم
في مقاس 16 بكسل لا تظهر التفاصيل الدقيقة، لذا استخدم رمزًا بسيطًا أو الحرف الأول من اسم العلامة بتباين قوي. الحرف العربي يعمل جيدًا أيضًا إذا كان واضحًا وسميكًا.
الأسئلة الشائعة
ما مقاس favicon المناسب؟
لا يوجد مقاس واحد؛ المتصفحات تستخدم 16 و32، وآبل 180، وأندرويد 192 و512. الأداة تنشئها كلها.
هل أحتاج ملف ICO؟
المتصفحات الحديثة تقبل PNG، لكن ملف favicon.ico في جذر الموقع ما زال مفيدًا للتوافق مع البرامج والمتصفحات القديمة.
غيّرت الأيقونة لكن القديمة ما زالت تظهر، لماذا؟
المتصفحات تخزن الأيقونة مؤقتًا لفترة طويلة. امسح ذاكرة المتصفح أو افتح الموقع في نافذة خاصة.
النتائج غير مرضية؟
تواصل مع Webin Agency لمواقع سريعة متوافقة مع السيو، ومتاجر إلكترونية، وإدارة إعلانات Google.