سكربت اضافة لوجو لموقعك
مثلا في ايقونة موقع وليس في داخل موقع
سكربت اضافة ايقونة لموقعك
يمكنك إضافة أيقونة للموقع عن طريق السطر البرمجي التالي:
<link rel="icon" href="https://example.com/favicon.png">
لاحظ استخدام عنصر link مع rel بقيمة icon ثم نمرر مسار الصورة عن طريق href.
لاحقة الصورة يفضل png أو icon.
يمكنك أن تقوم بتغير أيقونة الصفحة من خلال العنصر link كما وضح وائل في التعليق السابق، ويمكنك تغير هذه الأيقونة حتى بعد تحميل الصفحة من خلال جافاسكريبت، وهنا مثال بإستخدام jQuery:
$("link[rel*='icon']").attr("href", "favicon.png")
سيقوم الكود السابق بتغير الأيقونة إلى صورة معينة، ويمكن تعديل الكود لتغيرها عند وصول إشعار معين كما في مواقع التواصل فيسبوك و تويتر.
إن لم تكن تستعمل jQuery فيمكنك أن تقوم بإستخدام JavaScript فقط للقيام بهذا الأمر، كالتالي:
document.querySelector("link[rel*='icon']").href = "favicon.ico";
الكود السابق يؤدي نفس المهمة بدون الحاجة إلى مكتبات.
كما توجد مكتبات أخرى تعطيك المزيد من التحكم مثل مكتبة favicons
يمكنك أن تضيف رابط الصورة بدلًأ من favicon.ico في الكود، كالتالي:
document.querySelector("link[rel*='icon']").href = "https://image.similarpng.com/very-thumbnail/2020/12/Illustration-of-Google-icon-on-transparent-background-PNG.png";
وستجد أن أيقونة الموقع قد تغيرت إلى صورة Google
لاحظ أن رأس الصفحة Head يجب أن يحتوي على عنصر link خاص بالأيقونة، كالتالي على سبيل المثال:
<link rel="icon" href="/images/favicon.png">
وذلك لأن كود JavaScript السابق يقوم بالتعديل على هذا العنصر لتغير الأيقونة في أي وقت بعد تحميل الصفحة.
التعليقات