Favicon là gì? Chắc chắn thuật ngữ này còn khá xa lạ đối với nhiều người và không phải ai cũng biết những lợi ích tuyệt vời mà chúng đem lại cho trang web. Hôm nay, hãy cùng công ty thiết kế website Nhật Nam Media tìm hiểu về Favicon cũng như cách tạo Favicon chuẩn chỉnh nhất 2022 nhé!
Contents
Favicon là gì? Những định dạng và kích thước cần biết
Favicon là gì?
Favicon chính là từ viết tắt của Favorite icon là những biểu tượng icon được hiển thị ở phía góc trên cùng của một tab trình duyệt nào đó. Khi bạn truy cập vào một trang web, các bạn sẽ thấy được biểu tượng Favicon – logo đại diện cho thương hiệu/trang web đó.
Thông qua những biểu tượng đó, người dùng có thể nhận diện được thương hiệu/ sản phẩm/ dịch vụ của các bạn. Trong WordPress, Favicon được thiết kế theo kích thước chuẩn 16 x 16 pixels và được gọi là biểu tượng website.
Những định dạng và kích thước chuẩn cần biết
Định dạng của Favicon
- Định dạng phổ biến của Favicon ngoài .ico ra còn có dạng gif, jpeg, svg, png. Đa số các trình duyệt website sẽ tự động xác định các file favicon.ico trong thư mục gốc của trang web và đặt chúng làm biểu tượng của trang web.
Kích thước chuẩn cuả Favicon
- Những kích thước chuẩn của Favicon trên trang web: 16×16 pixel, 32×32 pixel, 48×48 pixel hoặc 64×64 pixel và file nên nhỏ hơn 100kb
- Các bạn cũng có thể sử dụng kích thước lớn hơn những chúng có thể khiến lãng phí dung lượng tải trang web, hình ảnh hiển thị không được đẹp
Tại sao trang web cần Favicon?
Tại sao website lại cần sử dụng Favicon, sau đây sẽ là những lý do mà chúng lại trở thành một phần không thể thiếu của các trang web:
- Hiểu đơn giản thì những Favicon đẹp
- Favicon sẽ giúp cho website của bạn trở nên thu hút, bắt mắt hơn nhiều so với những trang web không có Favicon
- Quan trọng là chúng giúp cho người dùng Internet phân biệt được đâu là tab của bạn, đâu là trang web của người khác trong phần bookmark/ trình duyệt
Những lợi ích của Favicon mang lại cho trang web
- Hỗ trợ cho SEO: trong quá trình xây dựng bộ nhận diện thương hiệu, Favicon chính là biểu tượng trang web của bạn. Chúng tạo nên dấu ấn thương hiệu, giúp khách hàng phân biệt được thương hiệu, sản phẩm của bạn so với đối thủ cạnh tranh. Ngoài ra, Favicon cũng sẽ xuất hiện trong kết quả của công cụ tìm kiếm.
- Xác định được tab mở trong trình duyệt: thông qua icon mà người sử dụng sẽ không bị nhầm lẫn giữa các tab được mở.
- Giúp trang web nổi bật, thu hút: sự xuất hiện của Favicon giúp cho trang web của bạn trở nên sinh động, ấn tượng, thu hút người dùng internet
- Ghi điểm trong mắt khách hàng: với sự đầu tư chuyên nghiệp có tính thẩm mỹ của website, khách hàng sẽ đánh giá cao và có thiện cảm hơn về doanh nghiệp, thương hiệu, sản phẩm của bạn.
Cách tạo Favicon cho trang web
Sau khi tìm hiểu về những thông tin cơ bản và sự quan trọng của Favicon đối với trang web, chúng ta hãy cùng nhau theo dõi cách bước tạo Favicon đơn giản ngay sau đây nhé:
Trước khi bắt đầu, các bạn nên sử dụng file có định dạng là i.co nhé.
Bước 1: Các bạn hãy thiết kế 1 file hình ảnh theo chuẩn kích thước Favicon. Chúng sẽ giúp Favicon hiển thị tương thích và đẹp nhất.
Bước 2: Truy cập vào website và đăng tải file hình ảnh lên để tạo Favicon. Website sẽ cung cấp cho bạn một đường link download ảnh đó đã được chuyển sang file định dạng i.co.
Bước 3: Tải file đó về và tiến hành giải nén, tạo tên là favicon. ico.
Bước 4: Chèn đoạn mã HTML vào trong phần <head> </head> của website để tạo Favicon.
<link rel=”shortcut icon” href=”đường dẫn ảnh”/>
Cách thêm Favicon cho WordPress
Đối với WordPress phiên bản 4.3 thì việc bạn thêm Favicon sẽ khá đơn giản và dễ thực hiện.
Bước 1: Click vào Appearance và chọn Customize, nhấn vào tab Site Identity. Tại phần nhận dạng website ở tùy biến sẽ cho người dùng có thể thay đổi tiêu đề trang, tùy lựa chọn của bạn rằng có muốn để chúng hiển thị ở tiêu đề hay không.
Bước 2: Song song, chúng cũng cho phép các bạn tải lên biểu tượng cho website của mình
Bước 3: Điều chỉnh kích thước của hình ảnh mà bạn đăng tải lên, nếu chúng vượt quá kích thước thì Wordpess sẽ giúp bạn cắt, làm giảm size đến khi phù hợp với kích thước chuẩn.
Bước 4: Ra ngoài trang chính của website để kiểm tra xem Favicon đã hoạt động hay chưa. Đồng thời, bạn cũng có thể kiểm tra bằng điện thoại bằng cách chọn mục “Add to homescreen”.
Những lưu ý khi thiết kế Favicon
- Nên sử dụng định dạng PNG vì chúng sẽ giúp bạn giữ được hình ảnh với chất lượng tốt nhất, kể cả khi đã nén ảnh
- Kích thước file Favicon không nên vượt quá 100kB
- Kích thước chuẩn Favicon hiện nay là 512x512px. Với kích thước như vậy thì độ hiển thị sẽ sắc nét nhất.
Trên đây là những nội dung liên quan đến Favicon và các bước hướng dẫn để tạo Favicon đơn giản nhất. Hi vọng những thông tin trên của Nhật Nam Media sẽ giúp ích cho các bạn. Chúc các bạn thành công và hãy theo dõi chúng mình nhé!
Bài viết liên quan