Khi lướt 1 trang web các bạn để ý trên phía góc trái trên tab trình duyệt có icon nhỏ trong đẹp mà không biết nó là cái quái gì? và không biết nó sử dụng ra sao? Vâng bài viết này Chiasefree hướng dẫn các bạn thêm Favicon vào trang web cũng như tìm hiểu về Favicon là gì nhé.
Nội dung chính
Favicon là gì?
Favicon (/ˈfæv.ɪˌkɒn/; viết tắt của Favorite – icon ), còn được gọi là icon lối tắt(shortcut), icon trang web, icon tab, icon URL hoặc icon dấu trang, là một tệp chứa một hoặc nhiều icon nhỏ, được liên kết với một trang web hoặc trang web cụ thể. Một nhà thiết kế web có thể tạo một icon như vậy và tải nó lên một trang web (hoặc trang web) bằng một số phương tiện, và các trình duyệt web đồ họa sau đó sẽ sử dụng nó.
Các trình duyệt cung cấp hỗ trợ icon yêu thích thường hiển thị icon yêu thích của trang trong thanh địa chỉ của trình duyệt (đôi khi trong lịch sử) và bên cạnh tên của trang trong danh sách dấu trang. Các trình duyệt hỗ trợ giao diện tài liệu theo thẻ thường hiển thị icon yêu thích của trang bên cạnh tiêu đề của trang trên tab và các trình duyệt dành riêng cho trang web sử dụng icon yêu thích làm icon trên màn hình.
Lịch sử Favicon
Vào tháng 3 năm 1999, Microsoft phát hành Internet Explorer 5, hỗ trợ Favicon lần đầu tiên. Ban đầu, favicon là một tệp có tên favicon.ico được đặt trong thư mục gốc của một trang web. Nó được sử dụng trong mục yêu thích (dấu trang) của Internet Explorer và bên cạnh URL trong thanh địa chỉ nếu trang đã được đánh dấu. Một tác dụng phụ là số lượng khách truy cập đã đánh dấu trang có thể được ước tính bằng các yêu cầu của icon yêu thích. Tác dụng phụ này không còn hoạt động nữa, vì tất cả các trình duyệt hiện đại đều tải tệp icon yêu thích để hiển thị trên thanh địa chỉ web của chúng, bất kể trang đó có được đánh dấu hay không.
Các bạn có thể tham khảo thêm tài liệu về Favicon tại wikipedia cách chi tiết hơn.
Sử dụng favicon cho trình duyệt
Hỗ trợ định dạng tệp
Bảng sau minh họa hỗ trợ định dạng tệp hình ảnh cho biểu tượng favicon.
Tạo favicon online định dạng png hoặc .ico
Có rất nhiều trang tạo ra file favicon online miễn phí điển hình như : favicon.io , favicon.io và cuối cùng là trang favicon-generator mình khuyên các bạn nên sử dụng nó vì chất lượng ảnh rất sắt nét.
Cách sử dụng favicon
Việc sử dụng favicon rất đơn giản chỉ cần thêm vào sau thẻ
Các bước thiết lập Favicon:
Bước 1: Trước tiên bạn cần thiết kế một file ảnh riêng với các kích thước sau: 16×16 pixels, 32×32 pixels, 48×48 pixels…vv
Bước 2: Sau đó, bạn truy cập vào đường link https://www.favicon-generator.org/ để upload file ảnh mình vừa tạo để tạo favicon.
Bước 3: Download file favicon rồi up lên host website của mình.
Bước 4: Chèn đoạn mã HTML vào phần của trang web.
|
1 2 3 4 5 6 |
<!DOCTYPE html> <html lang="en-US"> <head> <link rel="icon" type="image/png" href="http://example.com/myicon.png"> </head> </html> |
Hướng dẫn thêm Favicon cho WordPress và Blogger
Thêm favicon cho WordPress
Để thêm favicon cho mã nguồn WordPress các bạn làm theo hướng dẫn sau.
Bước 1: Upload favicon.ico mà bạn đã tạo ở trên vào thư mục public_html hoặc bất cứ thư mục nào bạn muốn.
Bước 2: chèn mã bên dưới vào sau thẻ
|
1 2 |
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="icon" href="/favicon.ico" type="image/x-icon"> |
Hoặc bạn có thể vào Apperance -> Customize -> Site Identity – > tại mục Site Icon các bạn nhấn Select site icon sau đó upload file favicon.ico lên rồi nhấn Skip cropping
Thêm favicon cho Blogger
Đối với blogger bạn chỉ cần thực hiện vài thao tác đơn giản không dùng bất cứ đoạn mã nào.
Bước 1: Bạn đăng nhập vào blogger.com -> Cài đặt -> ở mục Cơ bản chọn biểu tượng trang web
Bước 2: Bấm vào chọn tệp -> upload file favicon.ico lên -> bấm Lưu
Nhấn F5 load trang web lại xem kết quả ok chưa nhé
Lời kết
Kết thúc bài viết này các bạn đã biết cách thêm favicon vào website WordPress hoặc Blogger chưa? Nếu trong quá trình thực hiện gặp lỗi gì thì đừng ngại để lại comment bên dưới nhé. Chúc các bạn thành công.
Add Comment