Hướng dẫn thay Favicon cho Blogger

Bạn có để ý thấy mỗi khi mở một tab trình duyệt, bên cạnh tiêu đề trang web thường có một biểu tượng nhỏ? Đó chính là Favicon.

💡 Favicon là gì?
Favicon là viết tắt của "Favorite Icon". Nó giống như một logo rút gọn của website. Vì kích thước hiển thị rất nhỏ (thường là 16x16 pixel), Favicon thường chỉ chứa biểu tượng (icon) và lược bỏ hoàn toàn phần chữ để người dùng dễ nhận diện thương hiệu.

Mặc định, Blogger sẽ để Favicon là chữ "B" màu cam. Để website của bạn trông chuyên nghiệp và mang đậm dấu ấn cá nhân, việc thay đổi biểu tượng này là bước đầu tiên không thể bỏ qua.

BƯỚC 1: CHUẨN BỊ ẢNH FAVICON

Trước khi upload, bạn cần chuẩn bị một file ảnh đáp ứng các tiêu chuẩn sau:

  • Định dạng: Khuyên dùng .ico hoặc .png (nền trong suốt).
  • Kích thước: Hình vuông (tỷ lệ 1:1). Blogger yêu cầu kích thước chuẩn tối thiểu nên là 100KB trở xuống.

Nếu bạn chưa có icon, bạn có thể:

  1. Tải các icon miễn phí tại IconFinder hoặc Flaticon.
  2. Sử dụng công cụ RealFaviconGenerator để chuyển đổi ảnh logo bất kỳ sang định dạng chuẩn cho web.

BƯỚC 2: CÀI ĐẶT TRÊN BLOGGER

1. Truy cập cài đặt

Đăng nhập vào trang quản trị Blogger -> Chọn menu Cài đặt (Settings) bên tay trái. Tại phần "Cơ bản", bạn tìm và nhấn vào dòng Biểu tượng trang web (Favicon).

Vị trí cài đặt Favicon trong Blogger

2. Upload hình ảnh

Một cửa sổ mới hiện ra, bạn nhấn Chọn tệp (Choose File) -> Tìm đến file ảnh Favicon bạn đã chuẩn bị -> Nhấn Lưu (Save).

Giao diện Upload Favicon

Để kiểm tra xem ảnh đã lên chưa, bạn có thể truy cập đường dẫn: domain-cua-ban.com/favicon.ico.

Kiểm tra kết quả Favicon

BƯỚC 3: XỬ LÝ SỰ CỐ THƯỜNG GẶP

Dưới đây là những vấn đề mà người dùng Blogger thường xuyên gặp phải sau khi thay đổi Favicon:

1. Đã lưu nhưng Favicon không đổi?

Nguyên nhân: Do trình duyệt lưu Cache (bộ nhớ đệm) của icon cũ để tải trang nhanh hơn.

Khắc phục:

  • Nhấn tổ hợp phím Ctrl + F5 để tải lại trang và xóa Cache.
  • Hoặc mở trang web bằng Tab ẩn danh (Ctrl + Shift + N) để kiểm tra.
  • Chờ vài tiếng đến 24h để Google cập nhật.

2. Template Hardcode (Can thiệp Code)

Một số giao diện (Template) tải về từ bên ngoài thường bị người thiết kế gán cứng link Favicon trong code HTML, khiến việc thay đổi trong Cài đặt không có tác dụng.

Khắc phục:

Vào Chủ đề (Theme) -> Chỉnh sửa HTML. Tìm thẻ <head> và dán đoạn code sau vào ngay phía dưới:

<!-- Code Favicon chuẩn --> <link href='/favicon.ico' rel='icon' type='image/x-icon'/>

3. Favicon bị mờ, nhòe?

Mặc định Blogger hay ép ảnh về size 16x16 hoặc 32x32 pixel, khiến icon bị vỡ hạt trên các màn hình độ phân giải cao (Retina, điện thoại). Để icon sắc nét, bạn nên dùng ảnh PNG chất lượng cao và khai báo thêm code sau vào trong thẻ <head>:

<!-- Hỗ trợ icon độ nét cao --> <link href='LINK_ANH_CUA_BAN_32x32.png' rel='icon' sizes='32x32' type='image/png'/> <link href='LINK_ANH_CUA_BAN_192x192.png' rel='apple-touch-icon'/>

(Thay LINK_ANH_CUA_BAN bằng đường link ảnh bạn đã upload lên Google Photos hoặc host ảnh khác).

Lưu ý: Favicon đẹp giúp tăng độ tin cậy cho website rất nhiều. Hãy cố gắng thiết kế một biểu tượng đơn giản, ít chi tiết để khi thu nhỏ lại người dùng vẫn nhìn rõ được.