آموزش HTML - فاوآیکون

فاوآیکون HTML مخفف عبارت "نماد موردعلاقه" است. این تصویر کوچکی است که در زبانه مرورگر، درست قبل از عنوان صفحه نمایش داده می‌شود. فاوآیکون با استفاده از تگ <link> و ویژگی "rel=icon" تعریف می‌شود.

فاوآیکون HTML چیست؟

فاوآیکون تصویر کوچکی است که وب‌سایت شما را نشان می‌دهد و به کاربران کمک می‌کند آن را در میان چندین زبانه، نشانک و نتیجه جستجو تشخیص دهند. این تصویر می‌تواند در قالب‌های مختلفی مانند ICO، PNG، GIF، JPEG یا SVG باشد؛ اما قالب ICO بیشترین پشتیبانی را دارد. اگر تاکنون از وب‌سایتی بازدید کرده‌اید و نماد کوچکی را در کنار عنوان صفحه در زبانه مرورگر خود دیده‌اید، در واقع یک فاوآیکون مشاهده کرده‌اید.

نمایش تصویری فاوآیکون

تصویر زیر نشان می‌دهد که فاوآیکون در زبانه مرورگر چگونه نمایش داده می‌شود:

در تصویر بالا، می‌توانیم فاوآیکون وب‌سایت رسمی tutorialspoint را در بالای هر زبانه مشاهده کنیم.

نحوه افزودن فاوآیکون در HTML

می‌توانید با استفاده از تگ <link> و تنظیم ویژگی rel روی مقدار "icon"، یک فاوآیکون به صفحه وب اضافه کنید. تگ <link> یک عنصر سرصفحه است؛ بنابراین باید داخل تگ <head> قرار بگیرد.

نحو

می‌توانید فاوآیکون را به شکل زیر به صفحه وب اضافه کنید:

<head>
  <link rel="icon" href="path_to_favicon.ico" type="image/x-icon">
</head>

مراحل افزودن فاوآیکون به صفحه وب

برای افزودن فاوآیکون، باید مراحل ساده زیر را دنبال کنیم:

مرحله ۱ - یک تصویر برای فاوآیکون خود ایجاد کنید یا تصویری را انتخاب کنید. اندازه‌های رایج آن می‌توانند 16x16 یا 32x32 پیکسل باشند. چند ابزار آنلاین برای ایجاد فاوآیکون وجود دارد که از جمله آن‌ها می‌توان به "Favicon.io" و "ionos.com" اشاره کرد.

مرحله ۲ - تصویر فاوآیکون را ذخیره کنید و آن را در پوشه وب‌سایت بارگذاری کنید. مطمئن شوید که تصویر در قالبی قابل‌شناسایی برای مرورگرها، مانند PNG، GIF یا ICO، باشد.

مرحله ۳ - اکنون از عنصر <link> استفاده کنید. این عنصر به مرورگر می‌گوید تصویر فاوآیکون را از کجا پیدا کند. به یاد داشته باشید که تگ <link> در بخش سرصفحه، یعنی داخل تگ <head> سند HTML قرار می‌گیرد.

مثال

مثال زیر نحوه ایجاد یک فاوآیکون در HTML را نشان می‌دهد. در این مثال از قالب تصویر PNG استفاده می‌کنیم:

<!DOCTYPE html>
<html>
<head>
   <title>Tutorialspoint</title>
   <link rel = "icon" type = "image/png" href = "images/faviconTP.png">
</head>
<body>
   <h1>Adding Favivon</h1>
   <p>This is an example of including favicon to the web page.</p>
   <p> Favicon will be displayed in the browser tab to the left of the page title.</p>
</body>
</html>

خروجی

کد HTML بالا نتیجه زیر را ایجاد می‌کند:

آیا می‌توان برای صفحات مختلف یک وب‌سایت، فاوآیکون‌های متفاوتی تعریف کرد؟

بله، می‌توان برای صفحات مختلف یک وب‌سایت، فاوآیکون‌های متفاوتی اضافه کرد. برای این کار باید تصاویر فاوآیکون مربوط به صفحات مختلف را با استفاده از تگ <link> (همان‌طور که در بالا توضیح داده شد) در بخش head تعریف کنید.

مثال

قطعه‌کدهای زیر را برای صفحات مختلف در نظر بگیرید:

برای صفحه وب ۱:

<head>
  <title>Page Title 1</title>
  <link rel="icon" href="favicon1.ico" type="image/x-icon">
</head>

برای صفحه وب ۲:

<head>
  <title>Page Title 2</title>
  <link rel="icon" href="favicon2.ico" type="image/x-icon">
</head>

ابعاد و اندازه‌های فاوآیکون

در ادامه، فهرستی از اندازه‌های مختلف فاوآیکون‌ها آمده است:

پشتیبانی مرورگرها از قالب‌های مختلف فایل فاوآیکون

جدول زیر قالب‌های مختلف فایل فاوآیکون را که مرورگرهای گوناگون از آن‌ها پشتیبانی می‌کنند، نشان می‌دهد: