Favicon trên website là gì? Cách hiển thị Favicon trên web

website icon

Website icon là gì? Nó có tác dụng gì đối với website? Các bạn hãy cùng với Web Khởi Nghiệp tìm hiểu trong bài viết dưới đây nhé.

Website icon là gì?

Website icon là một trong những tên gọi khác của Favicon (Favorite Icon), đây là một hình ảnh nhỏ hiển thi ở bên trái của Title (tiêu đề) trang web trên tab trình duyệt. Mỗi website đều có một icon riêng biệt dùng để phân biệt nhau, nên đôi lúc nó còn được gọi là tab icon, shortcut icon, URL icon hoặc bookmark icon

website icon 1

Kích thước chuẩn của Favicon là bao nhiêu?

Kích thước của Favicon có rất nhiều, có thể kể đến:

  • 16×16 pixel (khuyến nghị nên dùng), 32×32, 48×48 hoặc 64×64.
  • Bạn cũng có thể dùng các Favicon có kích thước lớn hoặc bé hơn; tuy nhiên, làm như vậy sẽ làm cho ảnh hiển thị không được đẹp, thậm chí là có thể làm hao phí dung lượng của web chỉ để tải được Favicon
  • Kích thước của Favicon cần phải nhỏ hơn 100kb

favicon

Tìm hiểu về định dạng của Favicon

Định dạng của Favicon có rất nhiều như: png, gif, jpeg, svg; tuy nhiên, định dạng phổ biến nhất mà các trình duyệt tự động xác minh là ico (favicon.ico)

website icon 2

Tầm quan trọng của Favicon đối với website

Giúp cho trang web nổi bật trên tab trình duyệt

Cách đây vài năm về trước, thì Favicon gần như không được chú trọng; thế nhưng giờ đây, nó là một phần không thể thiếu của 1 website. Một trang web mà không có favicon thì sẽ trông rất tẻ nhạt và thiếu đi sức hút.

favicon 2

Giúp người dùng có thể phân biệt các trang web với nhau

  • Bạn có thắc mắc là khi mở nhiều tab trên trình duyệt thì làm cách nào để có thể phân biệt được các trang web với nhau không? Và favicon chính là giải pháp giúp bạn phân biệt được các trang web với nhau.
  • Giúp bạn tiết kiệm được diện tích trên trình duyệt, bạn có thể mở cùng lúc hàng chục tab trên trình duyệt, mà vẫn có thể phân biệt được các trang web với nhau đấy.
  • Hoặc khi bạn tìm được một trang web hay, và muốn đánh dấu (bookmarks) lại, thì favicon cũng giúp bạn có thể dễ dàng nhận ra các trang web đang có trong danh sách đánh dấu

website icon 3

Hỗ trợ cho việc SEO website, xây dựng thương hiệu

Hình ảnh đẹp sẽ giúp cho bộ não của chúng ta ghi nhớ nó một các dễ dàng, và favicon cũng có một vai trò tương tự như vậy. Nó giúp ích rất nhiều trong việc SEO cũng như xây dựng thương hiệu cho website và cho cửa hàng của bạn

favicon 3

Cách tạo Favicon cho website

Để tạo một favicon đặc biệt cho website thì phải làm thế nào? Bạn cần thực hiện theo các bước sau:

Bước 1 – Thiết kế một file ảnh với kích thước chuẩn của Favicon

Thông thường logo của website sẽ đươc lấy để làm favicon; tuy nhiên, đối với 1 vài trường hợp favicon sẽ được thiết kế lại để giúp gọn hơn nếu logo quá dài hoặc quá phức tạp, mà vẫn phải đảm bảo được sự liên kết với logo và thương hiệu.

Bước 2 – Đổi định dạng của file hình ảnh thành .ico

Tiếp theo, bạn có thể chọn một trong những tool online dưới đây để tiến hành chuyển đổi định dạng hình ảnh sang .ico:

Sau đấy, bạn làm theo hướng dẫn trên trang chuyển đổi mà bạn chọn, vậy là bạn đã có được một favicon với định dạng .ico rồi đấy, sau đấy bạn chỉ cần tải nó về máy tính và chuyển sang bước tiếp theo thôi

Bước 3 – Upload Favicon lên host web

Bạn thực hiện upload file favicon vừa tạo lên thư mục gốc của website (public_html).

Bước 4 – Nhúng đoạn mã HTML để hiển thị Favicon

Sau đấy bạn chèn đoạn mã dưới đây vào trong cặp thẻ <head></head> của trang web

<link type=”image/x-icon” href=’Đường dẫn tới file .ico’ rel=”shortcut icon”/>

Trên đây là bài viết về website icon là gì? Cũng như tác dụng của favicon đối với website? Hy vọng sau khi đoc xong bài viết này bạn sẽ có thể làm được.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

0792.189.189