16. Favicon Trong HTML

Favicon là một biểu tượng nhỏ được hiển thị trên tab trình duyệt, thanh địa chỉ và danh sách trang web yêu thích. Đây là một phần nhận diện quan trọng cho trang web của bạn. Để thêm favicon vào trang web, bạn cần sử dụng thẻ <link> trong phần <head> của tệp HTML. Dưới đây là cách sử dụng favicon trong HTML:

Chuẩn Favicon:Sử dụng ảnh với định dạng .ico và đặt tệp .ico tại cùng thư mục với tệp HTML. Thẻ <link> sẽ được thêm vào trong phần <head>:html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Thêm Favicon vào HTML</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <!-- Nội dung trang web -->
</body>
</html>

Favicon từ ảnh PNG hoặc JPEG:

Đối với ảnh PNG hoặc JPEG, bạn cần sử dụng thẻ <link> với rel="shortcut icon" và type="image/png" hoặc type="image/jpeg":

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Thêm Favicon từ ảnh PNG</title>
    <link rel="shortcut icon" href="favicon.png" type="image/png">
</head>
<body>
    <!-- Nội dung trang web -->
</body>
</html>

Favicon thường có kích thước 16×16 pixel hoặc 32×32 pixel.
Có thể sử dụng các công cụ trực tuyến để tạo favicon từ hình ảnh chưa định dạng .ico.
Để đảm bảo tương thích trên các trình duyệt, nên cung cấp các định dạng ảnh khác nhau (PNG, JPEG) cùng với định dạng .ico.

Khi bạn thêm favicon vào trang web, biểu tượng sẽ xuất hiện trong thanh tab của trình duyệt khi trang web được mở.

Leave a Comment Cancel Reply