Biểu tượng yêu thích HTML
Favicon là một hình ảnh nhỏ hiển thị bên cạnh tiêu đề trang trong tab trình duyệt.
Cách thêm Favicon vào HTML
Bạn có thể sử dụng bất kỳ hình ảnh nào bạn thích làm favicon. Bạn cũng có thể tạo favicon của riêng mình trên các trang web như https://www.favicon.cc .
Mẹo: Favicon là một hình ảnh nhỏ nên nó phải là một hình ảnh đơn giản có độ tương phản cao.
Hình ảnh favicon được hiển thị ở bên trái 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ó tên là hình ảnh và lưu hình ảnh biểu tượng yêu thích của bạn vào thư mục này. Tên phổ biến cho hình ảnh favicon là "favicon.ico".
Tiếp theo, thêm phần tử <link>
vào tệp "index.html" của bạn, sau phần tử <title>
, như sau:
Ví 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 nó 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 favicon của bạn ở bên trái tiêu đề trang.
Hỗ trợ định dạng tệp Favicon
Bảng sau đây hiển thị hỗ trợ định dạng tệp cho hình ảnh favicon:
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 favicon
Bài tập HTML
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.