Kiểm tra Favicon

Tóm tắt (TL;DR)

Why: Một favicon bị lỗi không chỉ là mất icon; nó gây ra lỗi 404 trong log server và làm giảm sự chuyên nghiệp của thương hiệu.
Phân tích toàn diện: Công cụ này hoạt động như một trình duyệt để xác minh favicon.ico, PNG icons, Apple Touch Icons và Web Manifests.
Kết quả cụ thể: Nhận báo cáo chi tiết về khả năng truy cập file, sai lệch kích thước và tính hợp lệ của định dạng.

Tại sao cần kiểm tra favicon?

Cài đặt favicon có vẻ đơn giản—upload file, thêm thẻ tag—nhưng thực tế rất dễ xảy ra lỗi ngầm. Các hệ sinh thái trình duyệt hiện đại (Desktop, Android, iOS) đều có yêu cầu khác nhau.

Browser Caching: Trình duyệt lưu cache favicon rất lâu, thường che giấu các lỗi triển khai mà khách truy cập mới (và công cụ tìm kiếm) sẽ gặp phải.
Chuẩn phân mảnh: Bạn cần nhiều hơn chỉ favicon.ico. Thiết bị Apple tìm apple-touch-icon. Android và PWA tìm site.webmanifest.
Cấu hình Server: Đường dẫn đúng trong HTML sẽ vô nghĩa nếu server trả về 403 Forbidden hoặc sai MIME type.

Công cụ này đóng vai trò như một khách hàng bên thứ ba trung lập, bỏ qua cache local để cho bạn thấy trạng thái thực của favicon trên production.

Các bước kiểm tra

Công cụ phân tích của chúng tôi thực hiện quy trình audit đa bước:

HTML Parsing: Quét thẻ <head> để tìm tất cả các link icon được khai báo (rel="icon", rel="apple-touch-icon", rel="manifest").
Manifest Validation: Nếu tìm thấy Web Manifest, chúng tôi tải nó và phân tích mảng icons để xác minh kích thước khai báo khớp với kích thước file thực tế.
Kiểm tra truy cập: Thử tải xuống từng icon để xác minh nó trả về trạng thái 200 OK.
Định dạng & Kích thước: Kiểm tra dữ liệu nhị phân để đảm bảo file là ảnh hợp lệ (ICO, PNG, SVG) và kích thước khớp với khai báo.
Tự động phát hiện: Kiểm tra các quy ước chuẩn như /favicon.ico và /apple-touch-icon.png ngay cả khi chúng không được link rõ ràng.

Lỗi triển khai phổ biến

1. Icon “Ma” (Ghost Icon)

Bạn có thẻ <link rel="icon" href="/icon.png">, nhưng đường dẫn đó trả về lỗi 404. Sửa: Kiểm tra đường dẫn file có chính xác so với thư mục gốc (root) của domain không.

2. Sai định dạng (Format Mismatch)

Bạn khai báo type="image/png" nhưng lại phục vụ file JPEG hoặc ICO. Một số trình duyệt nghiêm ngặt có thể từ chối hiển thị. Sửa: Đảm bảo header Content-Type từ server khớp với định dạng file thực tế.

3. Sai kích thước (Dimension Lying)

HTML ghi sizes="32x32", nhưng ảnh thực tế là 16x16 hoặc 64x64. Điều này buộc trình duyệt phải resize ảnh, thường gây mờ. Sửa: Dùng Favicon Generator để tạo kích thước chính xác.

4. Thiếu Apple Touch Icon

iOS không dùng favicon chuẩn. Nếu thiếu apple-touch-icon, khi người dùng thêm web vào màn hình chính, họ sẽ chỉ thấy ảnh chụp màn hình trang web chung chung. Sửa: Luôn bao gồm file PNG 180x180 dành riêng cho thiết bị Apple.

Mẹo để đạt điểm tối đa

Để có bộ favicon chuẩn:

Root Fallback: Luôn có favicon.ico ở thư mục gốc (/favicon.ico) cho các công cụ cũ và trình đọc RSS.
SVG cho hiện đại: Dùng SVG favicon (type="image/svg+xml") cho độ nét hoàn hảo trên trình duyệt hiện đại.
Manifest: Khai báo icon riêng (src, sizes, type) trong manifest.json cho Android/Chrome.
Cache Busting: Nếu cập nhật icon, hãy thêm tham số query (ví dụ: ?v=2) để buộc trình duyệt tải lại.

Câu hỏi thường gặp (FAQ)

Tại sao tool báo “Thiếu” trong khi tôi vẫn thấy icon?

Nếu bạn thấy, có thể trình duyệt của bạn đang cache phiên bản cũ. Tool này thấy những gì một khách mới sẽ thấy. Hãy kiểm tra quyền truy cập file (permissions) và đảm bảo đường dẫn là tuyệt đối (ví dụ: /favicon.ico) nếu website có cấu trúc URL sâu.

Tôi có thực sự cần tất cả các file này không?

Về lý thuyết, favicon.ico là tối thiểu. Tuy nhiên, để hiển thị chuyên nghiệp trên mobile, taskbar và màn hình độ phân giải cao, bộ đầy đủ (ICO + PNGs + Manifest) là tiêu chuẩn ngành hiện nay.

Tôi dùng CDN được không?

Được. Chỉ cần đảm bảo thẻ <link> trỏ đúng URL tuyệt đối trên CDN (ví dụ: https://cdn.mysite.com/favicon.ico) và cấu hình CORS header nếu cần.

Công cụ Favicon