HTML - Thêm Favicon: Hướng dẫn cho người mới bắt đầu

Favicon là gì?

Hãy bắt đầu hành trình của chúng ta vào thế giới favicons với một câu hỏi đơn giản: Bạn có bao giờ để ý những biểu tượng nhỏ bên cạnh tiêu đề trang web trong thanh tab của trình duyệt không? Đó, các bạn ơi, chính là favicon!

HTML - Adding Favicon

Favicon, viết tắt của "favorite icon", là một hình ảnh nhỏ đại diện cho một trang web. Nó giống như một logo nhỏ xuất hiện ở nhiều nơi khác nhau:

Trong thanh địa chỉ của trình duyệt
Bên cạnh tiêu đề trang trên thanh tab của trình duyệt
Trong danh sách đánh dấu
Trên màn hình chính của điện thoại khi bạn lưu một trang web

Favicon có thể nhỏ, nhưng chúng đóng vai trò quan trọng trong việc xây dựng thương hiệu và trải nghiệm người dùng. Chúng giúp người dùng nhanh chóng nhận diện trang web của bạn giữa nhiều tab hoặc đánh dấu mở.

Cú pháp để thêm Favicon

Bây giờ chúng ta đã biết favicon là gì, hãy học cách thêm một favicon vào trang web của mình. Cú pháp rất đơn giản:

<link rel="icon" href="path/to/your/favicon.ico" type="image/x-icon">

Hãy phân tích này:

<link>: Đây là thẻ HTML được sử dụng để xác định một liên kết giữa tài liệu và tài nguyên ngoại bộ.
rel="icon": Thuộc tính này chỉ định mối quan hệ giữa tài liệu hiện tại và tài nguyên được liên kết. Trong trường hợp này, nó là một biểu tượng.
href="path/to/your/favicon.ico": Đây là nơi bạn chỉ định đường dẫn đến tệp favicon của mình.
type="image/x-icon": Thuộc tính này chỉ định loại MIME của tài liệu được liên kết.

Bước để thêm Favicon vào Trang Web

Thêm favicon vào trang web của bạn dễ như trở bàn tay! Chỉ cần làm theo các bước sau:

Tạo hoặc lấy hình ảnh favicon của bạn.
Lưu favicon trong thư mục gốc của trang web của bạn hoặc trong thư mục hình ảnh.
Thêm liên kết favicon vào phần <head> của tài liệu HTML.

Dưới đây là một ví dụ hoàn chỉnh:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trang Web Tuyệt Vời Của Tôi</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
<h1>Chào mừng bạn đến với Trang Web Tuyệt Vời Của Tôi!</h1>
</body>
</html>

Trong ví dụ này, chúng ta đã đặt tệp favicon.ico trong cùng thư mục với tệp HTML của mình. Nếu bạn đặt nó trong thư mục hình ảnh, bạn sẽ sử dụng href="images/favicon.ico" thay vì.

Danh sách các kích thước Favicon

Favicon có nhiều kích thước khác nhau để phù hợp với các thiết bị và trường hợp sử dụng khác nhau. Dưới đây là bảng các kích thước favicon phổ biến:

Kích thước	Sử dụng
16x16 px	Favicon mặc định, hiển thị trong thanh tab trình duyệt
32x32 px	Thanh tác vụ Windows
48x48 px	Biểu tượng shortcut trên desktop Windows
64x64 px	Menu Start Windows
152x152 px	Biểu tượng touch (cho thiết bị iOS)
192x192 px	Biểu tượng màn hình chính Android

Mẹo chuyên nghiệp: Để đảm bảo favicon của bạn sắc nét trên tất cả các thiết bị, hãy tạo một hình ảnh có độ phân giải cao (như 256x256 px) và sau đó thu nhỏ nó xuống các kích thước này.

Hỗ trợ của Trình duyệt cho các Định dạng Tệp Favicon khác nhau

Không phải tất cả các trình duyệt đều alike, đặc biệt là khi nói đến hỗ trợ favicon. Dưới đây là bảng hiển thị các định dạng tệp được hỗ trợ bởi các trình duyệt lớn:

Định dạng Tệp	Chrome	Firefox	Safari	Edge	Internet Explorer
ICO	✓	✓	✓	✓	✓
PNG	✓	✓	✓	✓	✗
GIF	✓	✓	✓	✓	✗
JPEG	✓	✓	✓	✓	✗
SVG	✓	✓	✗	✓	✗

Như bạn có thể thấy, định dạng ICO được hỗ trợ rộng rãi nhất. Tuy nhiên, các trình duyệt hiện đại cũng hỗ trợ các định dạng hình ảnh phổ biến hơn như PNG, dễ dàng làm việc hơn.

Để đảm bảo khả năng tương thích tối đa, bạn có thể cung cấp nhiều định dạng:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png">

Bằng cách này, các trình duyệt hỗ trợ PNG sẽ sử dụng định dạng đó, trong khi các trình duyệt cũ hơn sẽ sử dụng định dạng ICO.

Kết luận

Và thế là bạn đã biết cách thêm favicon vào trang web của mình, các nhà phát triển web non trẻ! Đây là một chi tiết nhỏ, nhưng nó có thể tạo ra sự khác biệt lớn trong cách trang web của bạn trông chuyên nghiệp và hoàn chỉnh.

Nhớ rằng, trong phát triển web, cũng như trong cuộc sống, thường là những điều nhỏ bé mới quan trọng. Một favicon được chọn kỹ lưỡng có thể là điểm nhấn cuối cùng cho trang web tuyệt đẹp của bạn!

Tiếp tục luyện tập, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với nó! Ai biết được, có lẽ favicon tiếp theo bạn tạo ra sẽ là cho một trang web thay đổi thế giới. Chúc các bạn may mắn với việc编码!

Credits: Image by storyset