Cách thêm biểu tượng trang web trong HTML

Học cách thêm biểu tượng trang web (Favicon) trong HTML.

Cách thêm biểu tượng trang web trong HTML

Biểu tượng trang web (favicon) là 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 biểu tượng trang web. Bạn cũng có thể tạo biểu tượng trang web của mình trên các trang web như https://favicon.cc.

Lưu ý:Biểu tượng trang web là một hình ảnh nhỏ, vì vậy nó nên là một hình ảnh đơn giản với độ tương phản cao.

Biểu tượng trang web hiển thị ở bên trái tiêu đề trang trong tab trình duyệt, như sau:

Ví dụ về biểu tượng trang web

Để thêm biểu tượng trang web vào trang web của bạn, hãy lưu hình ảnh biểu tượng trang web 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 tên là images trong thư mục gốc và lưu hình ảnh biểu tượng trang web của bạn ở đây. Tên thường gọi của hình ảnh biểu tượng trang web là "favicon.ico".

tiếp theo, trong tệp "index.html" của bạn: <title> thêm một yếu tố sau yếu tố <link> Các yếu tố, như sau:

<!DOCTYPE html>
<html>
<head>
  <title>Titile Trang My</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>
<h1>Đây là một tiêu đề.</h1>
<p>Đây là một đoạn văn.</p>
</body>
</html>

Hãy thử trực tiếp.

Hiện tại, lưu tệp "index.html" và tải lại nó trong trình duyệt. Tab trình duyệt của bạn hiện nên hiển thị biểu tượng trang web của bạn ở bên trái của tiêu đề trang.