Favicon là gì?
Favicon là một biểu tượng nhỏ hoặc tập hợp các biểu tượng liên quan đến một trang web, trang web hoặc ứng dụng web. Nó được hiển thị trong các tab trình duyệt và thanh dấu trang. Các ví dụ bên dưới hiển thị các favicon cho Google, Reddit và Squarespace trong tab trình duyệt.
Dưới đây là một số biểu tượng yêu thích từ một số trang web phổ biến được hiển thị trên thanh dấu trang của Chrome.
Favicon được sử dụng để làm gì?
Biểu tượng favicon được sử dụng để giúp người dùng dễ dàng nhận dạng trực quan các trang web, trang web và ứng dụng web trong các tab trình duyệt, dấu trang, phím tắt và thanh địa chỉ. Điều quan trọng là phải có biểu tượng favicon cho trang web của bạn để nhận diện thương hiệu, nhờ đó người dùng có thể dễ dàng nhận dạng trang web của bạn trong các tab trình duyệt và dấu trang của họ.
Tên gọi khác của favicon là gì?
Một số tên gọi khác của favicon là biểu tượng trình duyệt, biểu tượng yêu thích, biểu tượng phím tắt, biểu tượng tab, biểu tượng URL và biểu tượng dấu trang. Từ favicon là viết tắt của "biểu tượng yêu thích" và bắt nguồn từ tính năng "Favorites" của Internet Explorer mà hầu hết các trình duyệt hiện đại gọi là "bookmarks".
Định dạng tệp favicon phổ biến là gì?
ICO - favicon.ico
Các định dạng favicon phổ biến nhất là ICO, PNG và SVG, nhưng có các định dạng bổ sung cho các trình duyệt hoặc thiết bị cụ thể. Định dạng tệp ICO được Microsoft phát triển và là định dạng tệp gốc cho favicon. Định dạng này độc đáo vì nó cho phép nhiều hình ảnh nhỏ trong cùng một tệp. Điều này có lợi vì các biểu tượng nhỏ cần thiết cho favicon ở định dạng ICO (16x16, 32x32 và 48x48 pixel) có thể được thu nhỏ và tối ưu hóa độc lập. Ở kích thước nhỏ, bạn không thể dựa vào trình duyệt để tự động thay đổi kích thước biểu tượng của mình theo cách tối ưu. Định dạng ICO được hỗ trợ bởi tất cả các trình duyệt và đây là định dạng duy nhất mà IE5 đến IE10 hỗ trợ.
PNG - favicon.png
Định dạng PNG là một định dạng tốt vì đây là định dạng mà hầu hết mọi người đều quen dùng và không yêu cầu bất kỳ công cụ đặc biệt nào để tạo. Với màn hình hiện đại có độ phân giải cao, vấn đề ban đầu về kích thước biểu tượng nhỏ đối với độ phân giải nhỏ không còn tồn tại nữa. Đối với các trình duyệt hỗ trợ định dạng favicon PNG, chất lượng của favicon hiển thị trong tab trình duyệt hoặc thanh dấu trang thường cao hơn định dạng ICO. Nhược điểm của định dạng PNG là nó không tương thích với IE5 đến IE10.
SVG - favicon.svg
Định dạng SVG có lợi thế hơn định dạng PNG và ICO, nhưng vẫn chưa có hỗ trợ trình duyệt tuyệt vời. Các tệp SVG rất nhẹ và có thể mở rộng vô hạn. Điều này có nghĩa là chất lượng hình ảnh tuyệt vời mà không phải hy sinh thời gian tải đối với các hình ảnh nặng. Chỉ Chrome, Firefox và Opera hỗ trợ favicon định dạng SVG.
Kích thước favicon phổ biến là gì?
Điều quan trọng cần lưu ý là biểu tượng yêu thích của bạn phải là hình vuông.
Đối với định dạng ICO, kích thước được khuyến nghị là 16x16, 32x32 và 48x48 pixel.
Đối với định dạng PNG, kích thước được khuyến nghị là 16x16 và 32x32, nhưng trình duyệt sẽ chấp nhận bất kỳ hình ảnh PNG vuông nào.
Biểu tượng yêu thích có ảnh hưởng đến tối ưu hóa công cụ tìm kiếm hoặc SEO không?
Sự hiện diện của favicon có thể gián tiếp ảnh hưởng đến SEO. Một số công cụ tìm kiếm, chẳng hạn như DuckDuckGo, hiển thị favicon trong kết quả tìm kiếm. Một favicon bắt mắt có thể giúp tăng tỷ lệ nhấp qua (CTR) trên các công cụ tìm kiếm này. Ngoài ra, favicon là điều bắt buộc để xây dựng nhận diện thương hiệu và lòng tin vào thương hiệu. Một favicon bị thiếu có thể khiến người dùng mất lòng tin vào trang web và tăng tỷ lệ thoát.
Tạo ra favicon
Truy cập https://favicon.io/
hoặc các bạn có thể sử dụng các trình chỉnh sửa ảnh chuyển nghiệp như Photoshop, sau đó xuất file ra định dạng .ico
Một cách khác để nhanh tạo Favicon nhanh gọn, chúng ta có thể tìm kiếm các icon dưới dạng .svg tại https://www.iconfinder.com hoặc các nguồn trên Internet. Sau đó tiến hành chỉnh sửa lại.
Sau đó, bạn truy cập vào https://realfavicongenerator.net, upload file SVG lên để công cụ này tạo favicon.
Hướng dẫn thay favicon cho Blogger
Sau khi đăng nhập vào trang quản trị Blogger, ở menu bên trái, các bạn di chuyển đến mục Cài đặt. Sau đó bên dưới nội dung Mã theo dõi Google Analytics, các bạn nhấn chọn Biểu tượng trang web.
Upload Favicon
Trong trang popup nổi lên, các bạn chọn tệp và upload lên tệp favicon.ico đã chuẩn bị sẵn ở phần trên.
Lưu ý là dung lượng tệp không quá 100KB và kích thước là 32×32.
Lưu và kiểm tra
Cuối cùng, sau khi upload thành công các bạn nhấn Lưu để tắt popup và kiểm tra lại kết quả. Để kiểm tra kết quả, các bạn truy cập vào đường dẫn /favicon.ico.
Thắc mắc
Favicon không thay đổi trên trang
Sau khi cập nhật, thông thường phải mất một khoảng thời gian để các công cụ tìm kiếm cập nhật Favicon mới của bạn.
Ngoài ra thì nếu bạn kiểm tại đường dẫn /favicon.ico đã thấy cập nhật Icon mới nhưng trên trang chủ thì không. Hiện tượng này xảy ra có thể nguyên do template bạn đang sử dụng đã hardcode Favicon trong template.
Để khắc phục, các bạn hãy vào chỉnh sửa template để đổi. Thêm hoặc dùng đoạn code sau trong thẻ <head>:
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
Favicon của mình bị nhòe
Mặc định Blogger chỉ hỗ trợ Favicon kích thước 16×16. Các Favicon sau khi upload lên đều bị chuyển đổi về kích thước này.
Để khắc phục hiện tượng này, chúng ta hãy thêm Favicon ở định dạng .png với kích thước lớn hơn trong phần thẻ <head>. Các bạn tham khảo đoạn mã bên dưới.
<link href='/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='.../apple-touch-icon.png' rel='apple-touch-icon'/>
<link href='.../favicon-32x32.png' rel='icon' sizes='32x32' type='image/png'/>
<link href='.../favicon-16x16.png' rel='icon' sizes='16x16' type='image/png'/>