شرح كيفية وضع صورة favicon ليظهر على معظم الأجهزة

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

في هذا الشرح السريع سنتعرف على ايقونة favicon التي تظهر بجانب اسم الموقع في الشريط العلوي للمتصفح كالتالي


في برنامج المنتدى الملف favicon.ico موجود في مجلد المنتدى ارفع الملف الخاص بموقعك بدل منه وسيظهر مكانه في شريط المتصفح
ولكن المتصفحات تتطور وتزداد المتطلبات لتظهر صورة موقعك عليها بالشكل المناسب هذا مثال لمتصفح كروم على نظام أندرويد


انظر كيف تظهر صورة الفيسبوك واليوتيوب لأنها مواقع أضافت معرفات جديدة ل favicon

طريقة إضافة صورة الموقع بدل أول حرف من النطاق

يكفي أن ترفع صورة اسمها
apple-touch-icon.png
لمجلد منتداك بالأبعاد 180x180

ثم تدخل للوحة الإدارة وتحرر القالب
headinclud

وتبحث عن

<link rel="shortcut icon" href="{$ForumAdress}favicon.ico" />

وتضيف تحتها

<link rel="apple-touch-icon" href="{$ForumAdress}apple-touch-icon.png" />

ثم تحفظ القالب

إذا لا يوجد لديك ملف favicon.ico يمكنك رفع صورة بالأبعاد 16x16 لمجلد المنتدى وتحرر القالب headinclud

وتستبدل

<link rel="shortcut icon" href="{$ForumAdress}favicon.ico" />

ب

<link rel="icon" href="{$ForumAdress}favicon.png" type="image/x-icon" />

وتحفظ القالب

عند رفع صورة بدل صورة ل favicon قد يتأخر تحديثها بسبب حفظ السابقة بكاش السيرفر والمتصفح وإذا كنت تستعمل cloudflare ستتأخر أكثر لتسريع ظهور الجديدة ادخل لصفحة التحكم بكلاود فلير وامسح الملف من الكاش.

مواقع مفيدة
موقع يتيح لك رفع صورة وينتج لك ملفات favicon والأكواد لتضيفها في الهيدر لدعم أغلبية المتصفحات على مختلف الأجهزة.
<cite>www.favicon-generator.org/</cite>
وموقع آخر
<cite>realfavicongenerator.net/</cite>

دمتم بخير