Favicon không hiển thị - Hướng dẫn khắc phục sự cố
Bạn đã tải lên biểu tượng yêu thích nhưng tab vẫn hiển thị hình ảnh địa cầu chung hoặc biểu trưng cũ. Hướng dẫn này sẽ trình bày các nguyên nhân phổ biến nhất — bộ nhớ đệm, đường dẫn sai, tệp bị thiếu và thẻ <link> xung đột — theo thứ tự bạn nên kiểm tra chúng.
Trình duyệt lưu trữ các favicon mạnh mẽ hơn hầu hết các nội dung khác. Làm mới cứng (Ctrl+Shift+R hoặc Cmd+Shift+R) sẽ sửa nhiều cảnh báo sai. Nếu không thành công, hãy thêm chuỗi truy vấn phiên bản một lần: /favicon.ico?v=2.
Xác nhận tệp tồn tại tại URL mà trình duyệt yêu cầu. Mở /favicon.ico trực tiếp trong tab mới. 404 có nghĩa là tệp không được triển khai ở nơi bạn nghĩ - phổ biến với các bản dựng SPA chỉ phục vụ XXH1XX.
Kiểm tra đường dẫn <link rel="icon"> href của bạn. Đường dẫn tuyệt đối (/favicon.ico) hoạt động trên mọi trang; đường dẫn tương đối (favicon.ico) phá vỡ các tuyến lồng nhau như /blog/post.
Nếu bạn sử dụng CDN, hãy xóa đường dẫn favicon sau khi triển khai. Một số CDN lưu vào bộ nhớ đệm phản hồi 404 cho /favicon.ico khi tệp bị thiếu trong yêu cầu đầu tiên.
Nhiều thẻ <link rel="icon"> có thể gây nhầm lẫn cho các trình duyệt cũ hơn. Đặt favicon.ico trước, sau đó là các biến thể PNG/SVG với thuộc tính loại và kích thước rõ ràng.
WordPress, Shopify và các máy chủ tĩnh đều chèn các thẻ riêng của chúng. Xem nguồn trang và tìm kiếm rel="icon" — thẻ trùng lặp hoặc bị ghi đè là nguyên nhân thường xuyên.
Cảnh báo nội dung hỗn hợp HTTPS chặn URL favicon HTTP trên các trang bảo mật. Phục vụ mọi biểu tượng qua HTTPS.
Để phát triển cục bộ, một số trình duyệt từ chối cập nhật favicon cho đến khi bạn xóa dữ liệu trang web cho localhost.
Cách hoạt động
- 1
Xác minh URL tệp
Mở /favicon.ico trong tab mới — mong đợi là 200, không phải 404.
- 2
Kiểm tra thẻ <head>
Xem nguồn; xác nhận một liên kết favicon.ico chuẩn và không có lỗi chính tả.
- 3
Xóa bộ nhớ đệm một lần
Thêm ?v=2 vào href, triển khai, làm mới cứng, sau đó xóa truy vấn nếu muốn.
Thử ngay
Kiểm tra favicon trực tiếp của bạn
Công cụ kiểm tra favicon trực tiếpCâu hỏi thường gặp
Tại sao favicon của tôi hoạt động cục bộ nhưng không hoạt động trong sản xuất?+
Các bản dựng sản xuất thường xuất ra thư mục con hoặc tiền tố CDN. Xác minh đường dẫn đã triển khai khớp với <link> href của bạn và tệp đó có được đưa vào đầu ra của bản dựng hay không.
Mất bao lâu để Google cập nhật favicon của tôi trong kết quả tìm kiếm?+
Google có thể mất vài ngày đến vài tuần sau khi thu thập lại dữ liệu. Đảm bảo biểu tượng có kích thước tối thiểu là 48×48, hình vuông và có thể truy cập công khai tại một URL ổn định.
Chế độ chặn quảng cáo hoặc quyền riêng tư có ẩn favicon không?+
Hiếm khi có biểu tượng của bên thứ nhất. Proxy favicon của bên thứ ba có thể bị chặn; các biểu tượng tự lưu trữ trên miền của bạn không bị ảnh hưởng.
Tôi có nên xóa bộ đệm favicon của trình duyệt không?+
Xóa dữ liệu trang web cho miền của bạn trong cài đặt trình duyệt hoặc kiểm tra trong cửa sổ riêng tư với bộ đệm bị tắt.