HTML Favicon
Biểu tượng yêu thích là một hình ảnh nhỏ được hiển thị bên cạnh tiêu đề trang trong tab trình duyệt.
Cách thêm một Favicon trong HTML
Bạn có thể sử dụng bất kỳ hình ảnh nào bạn thích làm biểu tượng yêu thích của mình. Bạn cũng có thể tạo biểu tượng yêu thích của riêng mình trên các trang web như https://favicon.cc .
Mẹo: Biểu tượng yêu thích là một hình ảnh nhỏ, vì vậy nó phải là một hình ảnh đơn giản với độ tương phản cao.
Hình ảnh biểu tượng yêu thích được hiển thị ở bên trái của tiêu đề trang trong tab trình duyệt, như sau:
Để thêm biểu tượng yêu thích vào trang web của bạn, hãy lưu hình ảnh biểu tượng yêu thích của bạn vào thư mục gốc của máy chủ web hoặc tạo một thư mục trong thư mục gốc được gọi là hình ảnh và lưu hình ảnh biểu tượng yêu thích của bạn trong thư mục này. Tên phổ biến cho hình ảnh favicon là "favicon.ico".
Tiếp theo, thêm một <link>phần tử vào tệp "index.html" của bạn, sau <title>phần tử, như sau:
Thí dụ
<!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>
Bây giờ, hãy lưu tệp "index.html" và tải lại trong trình duyệt của bạn. Tab trình duyệt của bạn bây giờ sẽ hiển thị hình ảnh biểu tượng yêu thích của bạn ở bên trái tiêu đề trang.
Hỗ trợ định dạng tệp Favicon
Bảng sau đây cho thấy hỗ trợ định dạng tệp cho hình ảnh biểu tượng yêu thích:
| Browser | ICO | PNG | GIF | JPEG | SVG |
|---|---|---|---|---|---|
| Edge | Yes | Yes | Yes | Yes | Yes |
| Chrome | Yes | Yes | Yes | Yes | Yes |
| Firefox | Yes | Yes | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes | Yes | Yes |
| Safari | Yes | Yes | Yes | Yes | Yes |
Tóm tắt chương
- Sử dụng phần tử HTML
<link>để chèn biểu tượng yêu thích
Thẻ liên kết HTML
| Tag | Description |
|---|---|
| <link> | Defines the relationship between a document and an external resource |
Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .