Học HTML, CSS từ Zero Tới Hero
- Liên kết file CSS
- Thêm favicon
- Cách thêm favicon cho trang web
- Tối ưu favicon cho nhiều thiết bị
Trang web tạo Favicon: https://www.favicon-generator.org
Liên kết file CSS
Trường hợp sử dụng phổ biến nhất của thẻ <link> là để liên kết với một file CSS ở bên ngoài (CSS external). Bạn sẽ rất hay bắt gặp ở phần khai báo trong thẻ <head>.
Thêm favicon
Ngoài liên kết với file CSS, thẻ <link> còn được sử dụng để thêm favicon cho một trang web.
Cách thêm favicon cho trang web
Favicon viết tắt của Favorite Icon, là biểu tượng xuất hiện trên thanh tab của trình duyệt, giúp người dùng dễ dàng nhận diện website.
Ví dụ:
<link rel="icon" href="favicon.ico" type="image/x-icon">
Thuộc tính rel, viết tắt của relationship, là thuộc tính bắt buộc. Thuộc tính type thể hiện kiểu của file được thể hiện trong thuộc tính href nhưng không bắt buộc. Trong trường hợp bạn quên không thêm vào, trình duyệt sẽ tự động hiểu. Thêm vào sẽ giúp tăng tính tương thích và tăng hiệu quả xử lý của trình duyệt.
Thuộc tính href viết tắt của Hypertext Reference, dùng để tham chiếu tới một tài nguyên, là thuộc tính bắt buộc khi thêm favicon hoặc liên kết file CSS.
Tối ưu favicon cho nhiều thiết bị
Kích thước trung bình của favicon là 16x16px. Vì vậy, không được sử dụng hình ảnh quá lớn.
Favicon không chỉ hiển thị ở thanh tab của trình duyệt. Giả sử, bạn truy cập vào một trang web ở trên điện thoại, bạn hoàn toàn có thể liên kết lưu thành một biểu tượng ở màn hình chính điện thoại.
Nếu sử dụng kích thước bé quá sẽ làm ảnh vỡ, xấu.
Trong thực tế, các nhà phát triển thường tạo ra nhiều kích thước ảnh phù hợp với nhiều kích thước thiết bị.
Sử dụng Favicon.ico & App Icon Generator, bạn có thể tạo icon phù hợp với nhiều thiết bị.
Trong phạm vi bài này chỉ tìm hiểu đơn giản về tình huống sử dụng của thẻ link để liên kết file CSS và thêm favicon cho trang web. Bạn sẽ giới thiệu thêm các tình huống sử dụng khác của thẻ <link> trong các bài tiếp theo.
Nhận xét