Thời gian gần đây, khá nhiều website gặp tình trạng mất Favicon hoặc hiển thị không ổn định trên kết quả tìm kiếm Google (SERP). Tình trạng này xảy ra ngay cả với các trang website thương hiệu lớn hay các website thương mại điện tử.
Dưới đây, DTT Agency phân tích một vài nguyên nhân và cách giúp xử lý dứt điểm vấn đề này, dựa trên kinh nghiệm thực tế đã triển khai thành công trên nhiều dự án.
1. Biểu Hiện Thường Gặp Của Lỗi Favicon
-
Favicon hiển thị đúng khi mở trên Browser nhưng không hiện trên SERP.
-
Google hiển thị icon mặc định của nền tảng CMS (Ví dụ: Các site chạy Haravan, Shopify, WordPress hay bị fallback về logo mặc định của hãng).
-
Hiển thị không đồng nhất: URL này có favicon, URL khác lại không.
-
Đã đổi favicon mới, trình duyệt cá nhân đã cập nhật nhưng Google vẫn lưu hoặc hiển thị icon cũ.
-
Trên iPhone, Android và Desktop hiển thị các icon khác nhau hoặc bị lệch kích thước.
2. Nguyên Nhân Khiến Favicon Lỗi Trên SERP
Nguyên nhân 1: Khai báo quá đơn giản, thiếu thông số
Thông thường, DTT hay gặp nhiều website chỉ khai báo 1 dòng duy nhất như thế này:
[< link rel="shortcut icon" href="favicon.png" type="image/png" >]
Cách này chưa tối ưu vì:
-
Chỉ dùng 1 file duy nhất, không khai báo kích thước cụ thể. Google khuyến nghị kích thước Favicon phải là bội số của 48x48px (48x48, 96x96, 144x144...).
-
Thiếu khai báo dành riêng cho Apple Touch Icon (hiển thị trên iOS).
-
Thiếu file manifest chuẩn cho thiết bị Android/PWA. Khi thiếu thông số rõ ràng, Googlebot sẽ tự đi quét tìm các icon khác có trong source HTML hoặc tự nhận diện một icon mặc định bất kỳ.
Nguyên nhân 2: Trùng lặp đường dẫn favicon.ico mặc định của CMS
Một số nền tảng (như Haravan, Shopify, WordPress) luôn tự sinh hoặc redirect ngầm đường dẫn [https://domain.com/favicon.ico](https://domain.com/favicon.ico). Dù bạn đã thay favicon mới trong giao diện (Theme), Googlebot vẫn có thể quét trúng đường dẫn gốc mặc định này và ưu tiên hiển thị logo của CMS đó.
Nguyên nhân 3: Tốc độ cập nhật Cache của Google rất chậm
Bộ nhớ đệm (cache) lưu trữ favicon của Google cập nhật chậm hơn nhiều so với cache của trình duyệt cá nhân. Do đó, dù bạn đã đổi và thấy sự thay đổi trên máy tính, Google SERP vẫn sẽ giữ hình ảnh cũ trong một khoảng thời gian chờ Googlebot quay lại cập nhật.
3. Quy Trình 7 Bước Xử Lý Dứt Điểm Lỗi Không Hiển Thị Favicon
Bước 1: Chuẩn bị bộ Favicon đa kích thước chuẩn SEO
Tuyệt đối không nên chỉ dùng 1 file duy nhất. Hãy chuẩn bị trọn bộ các file dưới đây để đáp ứng cho toàn bộ thiết bị và Googlebot:
-
favicon.ico (Multi-size / ICO): Dành cho trình duyệt cũ & hệ thống mặc định.
-
favicon-48.png (48x48px / PNG): Kích thước chuẩn hiển thị trực tiếp trên kết quả tìm kiếm Google (SERP).
-
favicon-96.png (96x96px / PNG): Dành cho thiết bị có mật độ điểm ảnh cao (Retina).
-
favicon-192.png (192x192px / PNG): Dành cho giao diện Android / PWA.
-
favicon-512.png (512x512px / PNG): Dành cho Android / PWA (Hiển thị icon kích thước lớn).
-
apple-touch-icon-180.png (180x180px / PNG): Dành riêng cho iPhone/iPad khi người dùng lưu web ra màn hình chính.
-
favicon-master.svg (Vector / SVG): Bản gốc chất lượng cao, nét trên mọi kích thước màn hình.
Lưu ý khi thiết kế/resize Favicon:
-
Logo phải nằm chính giữa khung hình, không để viền hoặc khoảng trắng quá lớn xung quanh.
-
Không làm logo bị méo tỷ lệ.
-
Kiểm tra độ tương phản, đặc biệt khi hiển thị trên nền trắng hoặc chế độ Dark Mode của trình duyệt.
-
Nếu logo thương hiệu có chữ quá nhỏ, nên tạo một phiên bản rút gọn (chỉ lấy phần biểu tượng) để hiển thị tốt ở kích thước 48×48.
Bước 2: Upload bộ file lên nền tảng CMS
Tải toàn bộ các file đã chuẩn bị lên thư mục tài nguyên (Assets/Media) của website. Sau khi upload, hãy mở trực tiếp từng URL trên trình duyệt để kiểm tra.
Mỗi URL cần đáp ứng các tiêu chí:
-
Trả về mã trạng thái HTTP 200 (Thành công).
-
Không bị chuyển hướng (Redirect) sai mục đích.
-
Hình ảnh mở bình thường, không yêu cầu quyền đăng nhập để xem.
-
Không bị lỗi định dạng (MIME type).
Bước 3: Khai báo bộ mã chuẩn trong thẻ
Mở file chỉnh sửa giao diện (ví dụ: header.php, theme.liquid), tìm phần thẻ
(nên đặt ngay sau thẻ hoặc viewport) và dán bộ khai báo đầy đủ bên dưới. Nhớ thay thế phần đường dẫn bằng URL thực tế của bạn:
HTML
Bước 4: Rà soát & Xóa bỏ các khai báo rác/trùng lặp
Tránh tình trạng trong source code tồn tại đồng thời bộ khai báo mới và các thẻ code cũ. Hãy tìm và xóa bỏ các dòng tương tự như:
HTML
Việc để nhiều thẻ trỏ về các file khác nhau sẽ khiến Googlebot bị loạn và chọn ngẫu nhiên, gây ra lỗi hiển thị không đồng nhất.
Bước 5: Kiểm tra lại toàn bộ source code
-
Kiểm tra View Source (Ctrl + U): Tìm từ khóa
faviconhoặcapple-touch-icon. Đảm bảo chỉ xuất hiện duy nhất bộ mã mới bạn vừa cấu hình, không dư thừa code cũ hay lỗi cú pháp. -
Kiểm tra qua DevTools (F12 -> Network): Tải lại trang, tìm các file favicon đang được gọi, xác nhận chúng được tải thành công (Status 200).
-
Kiểm tra chéo: Kiểm tra ở nhiều loại trang khác nhau (Trang chủ, Danh mục, Sản phẩm, Bài viết) để đảm bảo mọi trang đều dùng chung một bộ khai báo.
Bước 6: Xử lý vấn đề đường dẫn mặc định /favicon.ico
Như đã đề cập, một số CMS tự redirect đường dẫn [domain.com/favicon.ico](https://domain.com/favicon.ico) về icon hệ thống. Nếu bạn không thể ghi đè file này trên hosting/server, đừng quá lo lắng. Việc khai báo đầy đủ bộ thẻ ở Bước 3 đã cung cấp đủ tín hiệu mạnh để Googlebot ưu tiên nhận diện.
CẢNH BÁO: Tuyệt đối KHÔNG sử dụng file robots.txt để chặn truy cập vào đường dẫn /favicon.ico. Việc làm này có thể khiến Googlebot đánh giá website có vấn đề và bỏ qua luôn việc thu thập dữ liệu icon của toàn trang.
Bước 7: Chủ động khai báo với Google
Việc Google cập nhật Favicon trên SERP có thể mất từ vài ngày đến vài tuần. Để thúc đẩy quá trình này, bạn hãy truy cập vào Google Search Console -> Sử dụng tính năng Kiểm tra URL (URL Inspection) cho Trang chủ -> Bấm Yêu cầu lập chỉ mục (Request Indexing) để mời Googlebot ghé thăm và cào lại dữ liệu nhanh hơn.
Những Yếu Tố KHÔNG Liên Quan (Không Cần Chỉnh Sửa)
Lỗi Favicon chập chờn hoàn toàn không liên quan đến các phần sau, bạn không cần tốn thời gian can thiệp vào chúng để sửa lỗi này:
-
Schema Markup (Product, Breadcrumb...).
-
Thẻ Open Graph (OG Meta), Twitter Cards.
-
Thẻ Canonical, Hreflang.
-
File
robots.txt(cứ để nguyên mặc định).
DTT Agency hy vọng với các thông tin trên, các anh em có thể fix được lỗi favicon chập chờn hoặc không hiển thị trên google. Hoặc nếu còn thắc mắc hay cần hỗ trợ vấn đề gì có thể liên hệ trực tiếp qua website để DTT Agency chúng mình hỗ trợ sớm nhất nhé.
Tác giả: Hữu Thắng Software - 0901936983
