Icon trên thanh tiêu đề của trang web được gọi là favicon. Nó giúp người dùng dễ dàng nhận diện ra trang web của bạn trên thanh tiêu đề. Để không bị lẫn vào vô số các trang khác đang cùng được mở.
Định nghĩa về favicon
Favicon được hiểu là một biểu tượng không thể thiếu trong việc xây dựng một website. Đây được xem là biểu tượng phổ biến mà nhiều người dùng sử dụng. Favicon được hiển thị ở góc trên cùng của tab khi truy cập trình duyệt. Người dùng sẽ nhìn thấy các biểu tượng này như những logo đại diện cho chính website của mình.Khi bạn mở nhiều tab trên trình duyệt, thanh tiêu đề có thể bị ngắn lại. Tuy nhiên, favicon vẫn được ưu tiên hiển thị. Nó giúp người dùng dễ dàng nhận diện ra trang web của bạn trên thanh tiêu đề. Để không bị lẫn vào vô số các trang khác đang cùng được mở.
Các định dạng của Favicon
Favicon thường là file ảnh có kích thước nhỏ, dạng vuông như 16 x 16 pixels, 20 x 20 pixels, 24 x 24 pixels…Bạn có thể dùng nhiều định dạng ảnh khác nhau. Tuy nhiên, chúng ta nên dùng một trong 2 loại phổ biến là *.ico hay *.png
Favicon nên là ảnh rõ nét, không bị nhòe. Bởi vì nó rất bé, nên chúng ta nên dùng những ảnh có đường nét đơn giản, ít chi tiết. Bạn cũng nên sử dụng màu sắc nổi bật, để làm nổi hơn
Tạo ảnh favicon cho trang web
Trường hợp bạn chưa có sẵn ảnh để làm favicon, bạn có thể sử dụng các công cụ để sinh ảnh tự động. Bạn có thể sử dụng logo để tạo favicon cho thống nhất.Khi đã có ảnh nguồn, bạn truy cập trang tạo icon tự động xiconeditor.com
Chọn mục Import để tải ảnh của bạn lên và chỉnh sửa tùy ý.
Bạn có thể chọn kích thước theo một số tiêu chuẩn có sẵn như 64x64, 32x32, 24x24, 16x16.
Bạn cũng có thể xem trước ảnh trước khi quyết định tải xuống.
Sau khi đã ưng ý với ảnh, bạn cần tải xuống để sẵn sàng đưa vào trang web
Tạo icon trên thanh tiêu đề của trang web
Trước tiên, hãy chuyển ảnh icon sang thư mục gốc trong ứng dụng web của bạn. Đó thường là thư mục đang chứa các file htmlNếu không muốn đặt icon ở thư mục gốc, bạn có thể điều chỉnh đường dẫn chi tiết ở phần sau
Chúng ta dùng thẻ <link> đặt trong <head> để hiển thị ảnh này.
Thuộc tính href chính là đường dẫn và tên file icon.
Ví dụ như sau:
Mã:
<head>
<!-- Các thẻ khác trong head -->
<link rel='shortcut icon' href='favicon.ico' />
<title>Tạo icon trên thanh tiêu đề của trang web</title>
</head>OK, lưu code của bạn và mở trang html trên trình duyệt.
Nếu ảnh chưa hiển thị, bạn hãy kiểm tra lại đường dẫn cho chính xác.
Ngoài ra các bạn có thể tham khảo thêm kiến thức lập trình tại FPT Software Academy
Chúc bạn thành công !!!
