Favicon là gì? Hướng dẫn thêm Favicon vào trang Web chi tiết

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ề nhé.

Favicon là gì? Hướng dẫn thêm Favicon vào trang Web chi tiết
Favicon là gì? Hướng dẫn thêm Favicon vào trang Web chi tiết

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.

Favicon là gì? Hướng dẫn thêm Favicon vào trang Web chi tiết
Bảng 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.

Favicon là gì? Hướng dẫn thêm Favicon vào trang Web chi tiết
favicon-generator hướng dẫn thêm vào website

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.

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ẻ

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

nhấn Select site icon sau đó upload file favicon.ico
favicon đã hiển thị trên trình duyệt web

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 

chọn cài đặt -> 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é

 

favicon trên trang chiasefree.com

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.

Bạn nghĩ sao về bài viết này?
+1
0
+1
0
+1
0
+1
0
+1
0


Lưu ý:
→ Vui lòng bình luận bằng tiếng Việt có dấu.
→ Hãy dùng tên và email thật của bạn khi comment.
→ Không sử dụng keyword trong ô Name.
→ Nếu có ý định Spam link thì hãy quên đi nhé.
→ Tất cả bình luận đều được kiểm duyệt vì thế hãy cẩn thận trước khi comment.
Xin cám ơn!

Add Comment

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.