Favicon là gì? Làm thế nào để tạo favicon ấn tượng cho website?

1196
12-09-2020
Favicon là gì? Làm thế nào để tạo favicon ấn tượng cho website?

Nếu bạn đang sở hữu một website thì sẽ thật thiếu sót nếu không biết Favicon là gì. Favicon tuy chỉ là một chi tiết nhỏ nhưng sẽ góp phần thể hiện tính chuyên nghiệp và nhận diện thương hiệu cho website của bạn. Vì tầm quan trọng đó, hãy cùng Bizfly Cloud tìm hiểu favicon là gì, làm thế nào để tạo một favicon sang chảnh cho website của bạn nhé!

Vậy favicon là gì?

Favicon - Viết tắt của từ favorite icon, là một hình ảnh hay biểu tượng nhỏ nằm ở đầu mỗi tab trên trình duyệt web như một logo đại diện cho mỗi website. Nó còn được gọi là biểu tượng của trang web (website icon), biểu tượng của tab (tab icon) hay bookmark (bookmark icon)… Thông thường favicon cũng chính là logo của thương hiệu nhưng ở dạng rút gọn, không có tagline, không tên thương hiệu mà chỉ có phần hình ảnh/chữ viết chính của logo. Nói dài dòng linh tinh chỉ thêm phần khó hiểu, chi bằng xem hình lung linh cho rõ tường minh bạn nhé:

Favicon là gì? Làm thế nào để tạo favicon ấn tượng cho website? - Ảnh 1.

Vậy favicon là gì?

Định dạng của favicon là gì? Có nhiều định dạng như png, jpeg, gif… nhưng định dạng ico là phổ biến nhất và cũng là mặc định. Favicon có kích thước thường là 16x16, 32x32, 48x48 (pixels)... Trước đây, nhiều người không quan tâm lắm về favicon, nhưng ngày nay nó đã trở thành một phần khá quan trọng với mỗi website. Vì sao vậy?


Vai trò của favicon là gì?

Tuy favicon chỉ là một hình ảnh nhỏ trên tab hay bookmark trình duyệt nhưng lại có vai trò "siêu to khổng lồ":

- Theo nghiên cứu mới nhất từ NASA, người dùng thường mở nhiều tab cùng lúc trên trình duyệt. Vậy phải làm sao để họ dễ dàng nhận ra tab trang web của bạn nếu không có một icon nổi bật trên đó. Như vậy bạn đã nhận ra vai trò của favicon là gì rồi đúng không nào? Nó giúp người dùng dễ dàng tìm thấy trang web của bạn mà không cần phải kiểm tra từng tab. Tương tự như trong bookmark hay lịch sử tìm kiếm thì user cũng dễ dàng tìm thấy website của bạn nếu nó có favicon ấn tượng.

- Bên cạnh đó, favicon cũng là một phần của bộ nhận diện thương hiệu cho website, cho công ty bạn. Vì nó luôn đi cùng với trang web của bạn trên mọi mặt trận như tab, bookmark, history hay trên các kết quả tìm kiếm… Do đó, một website icon nổi bật sẽ giúp để lại ấn tượng trong tâm trí khách hàng và dễ dàng ghi nhớ, phân biệt với các website khác của đối thủ.

- Một trong những vai trò quan trọng nhất của favicon là gì? Có lẽ là hỗ trợ cho việc SEO website. Tab icon là một trong những yếu tố để đánh giá website của SEOquake. Hơn nữa, biểu tượng này cũng xuất hiện trong kết quả của các công cụ tìm kiếm. Nếu website của bạn có icon đẹp mắt, chuyên nghiệp và thể hiện được thương hiệu thì chắc hẳn khách hàng sẽ click vào site của bạn thay vì của đối thủ. Từ đó giúp gia tăng thứ hạng website của bạn.

Favicon là gì? Làm thế nào để tạo favicon ấn tượng cho website? - Ảnh 2.

Favicon trên các kết quả tìm kiếm


Favicon là gì? Làm thế nào để tạo favicon ấn tượng cho website? - Ảnh 3.

Website không có favicon sẽ thiếu chuyên nghiệp

- Cuối cùng, favicon giúp khách hàng phần nào đánh giá mức độ chuyên nghiệp và thẩm mỹ của website. Những trang web không có favicon hoặc có nhưng "bị dính phèn" sẽ không tạo được ấn tượng cho người xem.

Với những vai trò trên thì chắc chắn bạn cần biết cách tạo một favicon ấn tượng cho website của mình…

>> Có thể bạn quan tâm: Tại sao tốc độ website rất quan trọng đối với doanh thu bán hàng?

Lưu ý khi sử dụng Favicon

Dưới đây là một số lưu ý để bạn có thể thiết kế Favicon đúng chuẩn cho website:

  • Ảnh thiết kế Favicon nên để ở định dạng PNG, đảm bảo hình ảnh với chất lượng tốt nhất
  • Kích thước của file không vượt quá 100kB
  • Favicon cần có kích thước đủ lớn để có thể hiển thị hình ảnh sắc nét trên màn hình hiển thị trên các thiết bị di động, TV, laptop,... Kích thước của một Favicon tiêu chuẩn là 512x512 pixel.

Vậy cách để tạo ra một favicon là gì?

Để tạo một tab icon cho website bạn thực hiện theo các bước sau:

Bước 1: Thiết kế file ảnh làm favicon

Bạn nên nhớ rằng một trong những vai trò quan trọng của favicon là gì? Đó là để nhận diện thương hiệu và giúp người dùng dễ phân biệt khi đang mở nhiều tab. Vì vậy sử dụng logo làm favicon sẽ là lựa chọn đúng đắn. Tuy nhiên không nên lấy những phần tên website hay tagline mà chỉ lấy phần hình ảnh chính mang tính nhận diện thương hiệu. Bạn có thể thiết kế file này trên Photoshop, AI hay các trang web design online như Canva…

Bạn nên thiết kế hình ảnh dạng vuông vức với kích thước 16x16 (kích thước chuẩn nhất) hay 32x32, 64x64 (pixels)… Lưu ảnh dưới dạng jpeg, png, gif, hoặc bmp… Tuy nhiên, nếu bạn để ý thì đa phần các website chuyên nghiệp đều có favicon không có nền trắng. Tức là bạn nên lưu file ở dạng png để xóa những phần trống thừa thãi trên hình ảnh, như vậy trông nó sẽ "bớt phèn" hơn.

Bước 2: Chuyển file sang định dạng ico

Nếu sử dụng các định dạng file ảnh khác png và ico thì icon sẽ không thể hiển thị với transparent background. Còn với png thì một số trình duyệt phiển bản cũ như Internet Explorer sẽ không hỗ trợ, vì vậy ico là định dạng tốt nhất nên dùng. Bạn có thể tìm những trang web hỗ trợ convert file sang ico như convertio, online convert free hay favicon generator… Tiếp đến bạn upload file ảnh vừa thiết kế lên và tiến hành chuyển đổi. Cuối cùng tải về file ico.

Bước 3: Tiến hành upload file

Tiến hành upload file vừa tải về lên thư mục gốc (host) website bằng cách sử dụng File Manager hay FTP… Trong phần <head>  ... </head> của website, bạn hãy nhập đoạn code sau vào:

<link type="image/x-icon" href="Đường dẫn tới file .ico của bạn" rel="shortcut icon"/>

Chỉ với vài đường quyền cơ bản là bạn đã có thể tạo cho website của mình một tab icon. Như vậy, mấu chốt trong việc tạo favicon là gì? Chính là nằm ở khâu thiết kế, website icon của bạn có chuyên nghiệp và tạo ấn tượng hay không là nhờ vào tư duy thẩm mỹ của người design.

Trên đây là một vài kiến thức cơ bản về favicon. Hy vọng bài viết đã giúp bạn hiểu rõ favicon là gì và làm thế nào để tạo ra nó, hãy theo dõi Bizfly Cloud để cập nhật những bài viết bổ ích về công nghệ nhé!

Theo Bizfly Cloud tìm hiểu

>> Có thể bạn quan tâm: Chiến lược "Traffic nào, CDN nấy" giúp doanh nghiệp tăng tốc độ website cho thị trường mục tiêu

TAGS: Favicon
SHARE