Hướng dẫn thay Favicon cho Blogger


Favicon là một biểu tượng nhỏ hiển thị ở góc trên cùng của mỗi tab khi chúng ta truy cập vào trình duyệt. Để hiểu đơn giản, favicon là một dạng rút gọn của logo; favicon không chứa chữ mà chỉ có biểu tượng.

Thực tế, favicon là thể rút gọn của logo. Mục đích của việc sử dụng favicon là để giúp người đọc nhận biết thương hiệu riêng một cách dễ dàng hơn. Bởi lẽ kích thước của favicon khá hạn chế nên chữ sẽ được lược bỏ đi và chỉ có biểu tượng được hiển thị. Còn Logo thường được thiết kế bao gồm chữ dạng Tagline hay Title của website. 

Bước 1: Tạo favicon

Để tạo hoặc thiết kế Favicon, 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.

Bước 2: Thay favicon cho Blogger

Cài đặt

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. Upload Blogger Favicon

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

Bên dưới là tổng hợp một số thắc mắc thường gặp của các bạn khi thay favicon cho Blogger.

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'/>