HTML Favicon
Favicon бол хөтчийн таб (browser tab) дахь хуудасны гарчгийн хажууд харагддаг жижиг зураг юм.
HTML дээр Favicon хэрхэн нэмэх вэ #
Та өөрийн хүссэн дурын зургийг favicon болгон ашиглаж болно. Мөн та https://www.favicon.cc зэрэг сайтууд дээр өөрийн favicon-ыг үүсгэж болно.
Зөвлөмж: Favicon нь жижиг зураг тул өндөр ялгаралтай (high contrast), энгийн зураг байх ёстой.
Favicon зураг нь хөтчийн таб дээрх хуудасны гарчгийн зүүн талд дараах байдлаар харагдана:
Веб сайтдаа favicon нэмэхийн тулд favicon зургаа веб серверийнхээ үндсэн директор (root directory)-т хадгалах, эсвэл үндсэн директорт images нэртэй хавтас үүсгэж, favicon зургаа энэ хавтсанд хадгалаарай. Favicon зургийн нийтлэг нэр нь “favicon.ico” юм.
Дараа нь “index.html” файлдаа <title> элементийн ард <link> элементийг дараах байдлаар нэмнэ үү:
Жишээ
HTML
<!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” файлыг хадгалаад хөтөч дээрээ дахин ачаална уу. Таны хөтчийн таб одоо хуудасны гарчгийн зүүн талд таны favicon зургийг харуулах ёстой.
Favicon Файлын Форматын Дэмжлэг #
Дараах хүснэгтэд favicon зурагт зориулсан файлын форматын дэмжлэгийг харуулав:
| Хөтөч | ICO | PNG | GIF | JPEG | SVG |
| Edge | Тийм | Тийм | Тийм | Тийм | Тийм |
| Chrome | Тийм | Тийм | Тийм | Тийм | Тийм |
| Firefox | Тийм | Тийм | Тийм | Тийм | Тийм |
| Opera | Тийм | Тийм | Тийм | Тийм | Тийм |
| Safari | Тийм | Тийм | Тийм | Тийм | Тийм |
Бүлгийн Дүгнэлт #
- Favicon оруулахын тулд HTML
<link>элементийг ашиглана.
Дасгал? #
Favicon-ыг аль HTML элементэд тодорхойлдог вэ?
<img>элемент<body>элемент<link>элемент<style>элемент
HTML Link Шошго #
| Шошго | Тайлбар |
<link> | Баримт бичгийн болон гадны нөөц хоорондын хамаарлыг тодорхойлно |
