Favicon không hiển thị? Hướng dẫn khắc phục sự cố

Bắt đầu bằng cách xác nhận tệp thực sự tải trên miền trực tiếp của bạn. Dán URL của bạn vào trình kiểm tra favicon để xem liệu các biến thể /favicon.ico, PNG và đường dẫn biểu tượng apple-touch có trả về 200 hay 404 hay không. Nếu trình kiểm tra không tìm thấy gì thì trình duyệt cũng sẽ như vậy.

Trình duyệt lưu trữ các favicon một cách tích cực — đôi khi trong nhiều ngày. Sau khi tải biểu tượng mới lên, hãy làm mới cứng (Ctrl+Shift+R / Cmd+Shift+R) hoặc thêm ?v=2 vào URL favicon của bạn một lần để xóa bộ đệm. Chế độ ẩn danh là cách kiểm tra độ tỉnh táo nhanh nhất.

Đường dẫn sai là nguyên nhân phổ biến nhất tiếp theo. <link rel="icon"> phải trỏ đến một URL tồn tại sau khi triển khai. Một tệp trong /public trên máy của bạn sẽ vô dụng nếu quá trình sản xuất phục vụ từ thư mục con CDN hoặc một thư mục gốc khác.

Nếu favicon.ico bị thiếu hoặc bị hỏng, các phím tắt Windows và trình duyệt cũ sẽ hiển thị biểu tượng trống. Tạo lại tệp .ico nhiều kích thước từ PNG hoặc SVG của bạn — tệp .png đã đổi tên không phải là ICO hợp lệ.

Google Search có thể mất vài ngày hoặc vài tuần để làm mới favicon SERP sau khi bạn sửa tệp. Googlebot-Image phải thu thập dữ liệu biểu tượng có thể truy cập được liên kết từ trang chủ của bạn, ít nhất là 48×48. Kiểm tra Search Console và robots.txt nếu biểu tượng tab hoạt động nhưng Google vẫn hiển thị biểu tượng cũ.

Đối với các vấn đề về định dạng và kích thước, hãy gửi dự phòng favicon.ico nhiều kích thước cộng với PNG. Xem hướng dẫn giải thích về định dạng favicon và kích thước favicon tốt nhất của chúng tôi nếu bạn không chắc chắn nên triển khai tệp nào.