كيفية إضافة أيقونة الموقع في HTML

تعلم كيفية إضافة أيقونة الموقع في HTML (Favicon).

كيفية إضافة أيقونة الموقع في HTML

أيقونة الموقع (favicon) هي الصورة الصغيرة التي تظهر بجانب عنوان الصفحة في علامة التبويب المتصفح.

يمكنك استخدام أي صورة تحبها كأيقونة الموقع. يمكنك أيضًا إنشاء أيقونة موقع الخاصة بك على مواقع مثل https://favicon.cc.

نصيحة:أيقونة الموقع هي صورة صغيرة، لذا يجب أن تكون صورة بسيطة ذات توضيح عالي.

تظهر أيقونة الموقع على اليسار من عنوان الصفحة في علامة التبويب المتصفح، كما هو موضح أدناه:

مثال على أيقونة الموقع

لإضافة أيقونة الموقع إلى موقعك، قم بحفظ صورة أيقونة الموقع في مجلد جذر خادم الويب، أو أنشئ مجلدًا جديدًا يُدعى images في الجذر، وأحفظ صورة أيقونة الموقع هنا. اسم الصورة الأكثر شيوعًا هو "favicon.ico".

ثم، في ملف "index.html"، في <title> أضف عنصرًا جديدًا بعد <link> العناصر، كما هو موضح أدناه:

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

جربها بنفسك

الآن، احفظ ملف "index.html"، واعيد تحميله في المتصفح. يجب أن يظهر رمز موقعك على اليسار من عنوان الصفحة في علامة التبويب المتصفح.