Cách thực hiện - Thêm Favicon trong HTML
Tìm hiểu cách thêm favicon vào HTML.
Cách thêm Favicon vào 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.
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://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.