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

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

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

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

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

إشارة:تعتبر أيقونة الموقع صورة صغيرة، لذا يجب أن تكون صورة بسيطة ذات درجة تباين عالية.

تظهر أيقونة الموقع في يسار عنوان الصفحة في علامة التبويب الخاصة بالمتصفح، مثل ما يلي:

مثال للايقونة لموقع الويب

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

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

<!DOCTYPE html>
<html>
<head>
  <title>عنوان صفحتي</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>هذا عنوان.</h1>
<p>هذا فقرة.</p>
</body>
</html>

جربها بنفسك

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