Favicon là gì? Tìm hiểu Tổng quát về Cách Tạo Favicon

Favicon là gì? Chắc chắn thuật ngữ này còn khá xa lạ đối với nhiều người và không phải ai cũng biết những lợi ích tuyệt vời mà chúng đem lại cho trang web. Hôm nay, hãy cùng công ty thiết kế website Nhật Nam Media tìm hiểu về Favicon cũng như cách tạo Favicon chuẩn chỉnh nhất 2022 nhé!

Contents

Favicon là gì? Những định dạng và kích thước cần biết

Favicon là gì?

Favicon chính là từ viết tắt của Favorite icon là những biểu tượng icon được hiển thị ở phía góc trên cùng của một tab trình duyệt nào đó. Khi bạn truy cập vào một trang web, các bạn sẽ thấy được biểu tượng Favicon – logo đại diện cho thương hiệu/trang web đó.

Thông qua những biểu tượng đó, người dùng có thể nhận diện được thương hiệu/ sản phẩm/ dịch vụ của các bạn. Trong WordPress, Favicon được thiết kế theo kích thước chuẩn 16 x 16 pixels và được gọi là biểu tượng website.

Những định dạng và kích thước chuẩn cần biết

Định dạng của Favicon

Định dạng phổ biến của Favicon ngoài .ico ra còn có dạng gif, jpeg, svg, png. Đa số các trình duyệt website sẽ tự động xác định các file favicon.ico trong thư mục gốc của trang web và đặt chúng làm biểu tượng của trang web.

Kích thước chuẩn cuả Favicon

Những kích thước chuẩn của Favicon trên trang web: 16×16 pixel, 32×32 pixel, 48×48 pixel hoặc 64×64 pixel và file nên nhỏ hơn 100kb
Các bạn cũng có thể sử dụng kích thước lớn hơn những chúng có thể khiến lãng phí dung lượng tải trang web, hình ảnh hiển thị không được đẹp

Xem thêm Hướng dẫn Đăng Ký Website với Bộ Công Thương 100% Được Duyệt

Tại sao trang web cần Favicon?

Tại sao website lại cần sử dụng Favicon, sau đây sẽ là những lý do mà chúng lại trở thành một phần không thể thiếu của các trang web:

Hiểu đơn giản thì những Favicon đẹp
Favicon sẽ giúp cho website của bạn trở nên thu hút, bắt mắt hơn nhiều so với những trang web không có Favicon
Quan trọng là chúng giúp cho người dùng Internet phân biệt được đâu là tab của bạn, đâu là trang web của người khác trong phần bookmark/ trình duyệt

Những lợi ích của Favicon mang lại cho trang web

Hỗ trợ cho SEO: trong quá trình xây dựng bộ nhận diện thương hiệu, Favicon chính là biểu tượng trang web của bạn. Chúng tạo nên dấu ấn thương hiệu, giúp khách hàng phân biệt được thương hiệu, sản phẩm của bạn so với đối thủ cạnh tranh. Ngoài ra, Favicon cũng sẽ xuất hiện trong kết quả của công cụ tìm kiếm.
Xác định được tab mở trong trình duyệt: thông qua icon mà người sử dụng sẽ không bị nhầm lẫn giữa các tab được mở.
Giúp trang web nổi bật, thu hút: sự xuất hiện của Favicon giúp cho trang web của bạn trở nên sinh động, ấn tượng, thu hút người dùng internet
Ghi điểm trong mắt khách hàng: với sự đầu tư chuyên nghiệp có tính thẩm mỹ của website, khách hàng sẽ đánh giá cao và có thiện cảm hơn về doanh nghiệp, thương hiệu, sản phẩm của bạn.

Cách tạo Favicon cho trang web

Sau khi tìm hiểu về những thông tin cơ bản và sự quan trọng của Favicon đối với trang web, chúng ta hãy cùng nhau theo dõi cách bước tạo Favicon đơn giản ngay sau đây nhé:

Xem thêm Web Services là gì? Tìm hiểu tổng quan về Web Services

Trước khi bắt đầu, các bạn nên sử dụng file có định dạng là i.co nhé.

Bước 1: Các bạn hãy thiết kế 1 file hình ảnh theo chuẩn kích thước Favicon. Chúng sẽ giúp Favicon hiển thị tương thích và đẹp nhất.

Bước 2: Truy cập vào website và đăng tải file hình ảnh lên để tạo Favicon. Website sẽ cung cấp cho bạn một đường link download ảnh đó đã được chuyển sang file định dạng i.co.

Bước 3: Tải file đó về và tiến hành giải nén, tạo tên là favicon. ico.

Bước 4: Chèn đoạn mã HTML vào trong phần <head> </head> của website để tạo Favicon.

Cách thêm Favicon cho WordPress

Đối với WordPress phiên bản 4.3 thì việc bạn thêm Favicon sẽ khá đơn giản và dễ thực hiện.

Bước 1: Click vào Appearance và chọn Customize, nhấn vào tab Site Identity. Tại phần nhận dạng website ở tùy biến sẽ cho người dùng có thể thay đổi tiêu đề trang, tùy lựa chọn của bạn rằng có muốn để chúng hiển thị ở tiêu đề hay không.

Bước 2: Song song, chúng cũng cho phép các bạn tải lên biểu tượng cho website của mình

Bước 3: Điều chỉnh kích thước của hình ảnh mà bạn đăng tải lên, nếu chúng vượt quá kích thước thì Wordpess sẽ giúp bạn cắt, làm giảm size đến khi phù hợp với kích thước chuẩn.

Bước 4: Ra ngoài trang chính của website để kiểm tra xem Favicon đã hoạt động hay chưa. Đồng thời, bạn cũng có thể kiểm tra bằng điện thoại bằng cách chọn mục “Add to homescreen”.

Xem thêm Javascript là gì? Tổng quan về JS cho người mới bắt đầu

Những lưu ý khi thiết kế Favicon

Nên sử dụng định dạng PNG vì chúng sẽ giúp bạn giữ được hình ảnh với chất lượng tốt nhất, kể cả khi đã nén ảnh
Kích thước file Favicon không nên vượt quá 100kB
Kích thước chuẩn Favicon hiện nay là 512x512px. Với kích thước như vậy thì độ hiển thị sẽ sắc nét nhất.

Trên đây là những nội dung liên quan đến Favicon và các bước hướng dẫn để tạo Favicon đơn giản nhất. Hi vọng những thông tin trên của Nhật Nam Media sẽ giúp ích cho các bạn. Chúc các bạn thành công và hãy theo dõi chúng mình nhé!