Nội dung bài viết
Favicon là gì?
Có thể bạn đã thấy biểu tượng Favicon nhiều lần, nhưng lại không biết đến tên gọi hay định nghĩa của nó. Favicon là biểu tượng không thể thiếu khi xây dựng một website. Favicon là một hình icon được hiển thị ở phía góc trên cùng của một tab trình duyệt. Đây là một dạng rút gọn của logo được thiết kế với kích thước chuẩn là 16×16 pixels. Khi người dùng truy cập vào một website, họ sẽ thấy biểu tượng Favicon như một logo đại diện cho website đó. Favicon nhằm mục đích giúp người đọc dễ dàng nhận biết được thương hiệu riêng.
Favicon là gì? Favicon là biểu tượng của một website
Nhiều người không chú ý đến biểu tượng website này, tuy nhiên nó mang lại lợi ích vô cùng lớn cho website. Cùng BKNS tìm hiểu về lợi ích của Favicon với website ngay dưới đây.
Những lợi ích của Favicon với website
Sau khi đã biết định nghĩa Favicon là gì, bạn cần biết tại sao website cần có Favicon? Website cần có Favicon bởi những lợi ích mà nó đem lại:
- Favicon được xem là một biểu tượng của website, theo đó đây là điểm khác biệt với những website khác để làm nên dấu ấn thương hiệu. Trang web có Favicon giúp người dùng dễ dàng nhận dạng và ghi nhớ thương hiệu của bạn, vì hình ảnh bao giờ cũng khắc sâu trong trí nhớ.
- Trong SEO, Favicon là một công cụ hỗ trợ giúp xây dựng và nhận diện thương hiệu doanh nghiệp. Bên cạnh đó, website có Favicon sẽ có thứ hạng tìm kiếm cao hơn.
- Favicon giúp người dùng dễ dàng nhận định tab đang mở trong trình duyệt. Những icon nhỏ này giúp bạn không bị nhầm lẫn khi mở nhiều tab trong cùng một trình duyệt.
Favicon giúp người dùng phân biệt các tab, nhận diện thương hiệu
Favicon không những giúp người dùng tiện lợi nhận diện tab trên cửa sổ trình duyệt, mà còn giúp cho máy tìm kiếm đề xuất website của bạn trên thứ hạng tốt hơn. Vì vậy, khi xây dựng một website mới, bạn nên chú trọng thiết kế Favicon nổi bật, cuốn hút để thương hiệu được tăng nhận diện trên công cụ tìm kiếm.
Cách tạo Favicon cho website
Sau khi đã biết Favicon là gì và những lợi ích của Favicon với website thì bạn muốn tạo Favicon cho website của mình. Sau đây là cách tạo Favicon đơn giản cho website:
Cách tạo Favicon đơn giản cho website
Favicon có thể thiết kế theo nhiều định dạng ảnh, phổ biến như png, jpg, gif,… Tuy nhiên, với Favicon bạn nên sử dụng định dạng .ico.
Upload file ảnh và tạo định dạng .ico
- Bước 1: Thiết kế một file ảnh có kích thước 512 x 512 px với định dạng ảnh bất kỳ như png, jpg, gif,…
- Bước 2: Truy cập vào trang web: //www.favicon-generator.org/. Upload file ảnh của bạn lên trang web và ấn tạo Favicon. Download ảnh vừa tạo đã được chuyển sang định dạng .ico.
- Bước 3: Upload file ảnh có định dạng .ico lên host chứa website của bạn.
- Bước 4: Chèn mã HTML để tạo Favicon bằng cách chèn đoạn mã sau vào <head> </head> thuộc trang web.
Chèn mã HTML để tạo Favicon
Lưu ý khi thiết kế Favicon cho website
Để thiết kế Favicon đúng chuẩn cho website, bạn cần lưu ý một vài điểm dưới đây:
- Ảnh thiết kế làm Favicon nên định dạng PNG để hình ảnh giữ được chất lượng tốt nhất.
- Kích thước file không vượt quá 100kB.
- Sự phát triển của màn hình hiển thị trên các thiết bị di động, TV, laptop,… khiến bạn cần có một Favicon có kích thước lớn hơn để hiển thị hình ảnh sắc nét nhất. Kích thước tiêu chuẩn nên có của một Favicon là 512×512px.
Hướng dẫn cách tạo Favicon cho website
Bước 1: Thiết kế file ảnh để làm Favicon
Để có thể tạo được file này, trước bạn cần thiết kế ra một file ảnh, ảnh đó sẽ có một trong những kích thước cơ bản sau: 16 x 16px; 32 x 32px; 48 x 48px; 64 x 64px.
Tuy nhiên, như đã chia sẻ bên trên, bạn hoàn toàn có thể sử dụng kích thước lớn hơn dù sẽ làm ảnh hưởng đến tốc độ tải trang web. Một số website hiện nay thiết kế Favicon với kích thước lên đến 512 x 512 px nhằm tạo ra hình ảnh có chất lượng sắc nét nhất và hiển thị tốt trên các thiết bị di động, TV, laptop,..
Bước 2: Chuyển file hình ảnh vừa tạo sang định dạng .ico
Bạn có thể sử dụng một số phần mềm chỉnh sửa ảnh để chuyển định dạng cho ảnh. Nếu không có phần mềm, bạn có thể sử dụng một số công cụ online bằng cách truy cập vào trang web này.
Kế tiếp hãy tải file ảnh của bạn lên sau đó ấn tạo Favicon. Sau khi xong, bạn hãy tải về với định dạng .ico
Tuy nhiên, để chất lượng ảnh tốt nhất, bạn có thể chọn định dạng PNG, tuy nhiên một số trình duyệt cũ như Internet Explorer sẽ không hỗ trợ định dạng này, do đó bạn cần phải cân nhắc thật kỹ. Ngoài ra, kích thước file không được quá 100kb.
Bước 3: Tải file Favicon lên host chứa website của bạn
Sau khi đã tải file Favicon có định dạng .ico về, bạn đã có thể đưa lên host thông qua File Manager hay FTP để tiến hành cài đặt Favicon cho website.
Bước 4: Chèn đoạn mã HTML để hoàn tất thiết lập Favicon
Truy cập vào website và chèn đoạn mã sau vào phần <head> … </head>
<link type=”image/x-icon” href=’Đường dẫn tới file .ico’ rel=”shortcut icon”/>
Như vậy, bạn đã hoàn tất thiết kế Favicon cho website của mình rồi đấy.
Hy vọng qua bài viết trên sẽ giúp bạn biết được Favicon là gì cũng như các bước để tạo chúng. Favicon là một biểu tượng nhỏ nhưng lại đóng vai trò khá quan trọng đối với nhận diện thương hiệu nên bạn đừng bao giờ bỏ qua phần này trong website của mình nhé!
Một vài lưu ý khi thiết kế Favicon cho website
Cùng xem qua những lưu ý khi thiết kế cho website đúng chuẩn, trong phần cuối cùng của bài viết nhé.
- Định dạng của Favicon nên là PNG. Định dạng này sẽ giúp bạn giữ được chất lượng hình ảnh tốt nhất thậm chí trước đó bạn đã nén ảnh.
- Kích thước file phải bé hơn 100 KB.
- Hiện nay kích thước Favicon tiêu chuẩn nên là 512×512 px. Bởi vì sự phát triển của màn hình hiển thị Retina của Apple. Hay màn hình 4K của các thiết bị di động thì bạn cần một Favicon có kích thước lớn hơn để hiển thị hình ảnh sắc nét nhất có thể.
Nguồn: Tổng hợp và tham khảo
- https://www.bkns.vn/favicon-la-gi.html
- https://www.semtek.com.vn/favicon-la-gi/
- https://wiki.tino.org/favicon-la-gi/
