Cách hoạt động của định dạng Favicon
Biết cách hoạt động của từng định dạng sẽ giúp bạn khắc phục sự cố không thể tránh khỏi "biểu tượng yêu thích của tôi không hiển thị".
Check favicons on any website
Install the FetchFavicon Chrome Extension to extract, preview, and validate favicons instantly.
Vùng chứa .ico
Tệp .ico là tiêu đề theo sau là một hoặc nhiều mục hình ảnh. Mỗi mục nhập có thể là BMP hoặc PNG và mỗi mục có chiều rộng, chiều cao và độ sâu bit.
Trình duyệt phân tích cú pháp thư mục, chọn mục nhập phù hợp với kích thước được yêu cầu và giải mã mục đó.
PNG bên trong .ico
Đối với kích thước 64×64 trở lên, tính năng nén PNG sẽ cắt giảm kích thước tệp xuống 5-10 lần mà không làm giảm hình ảnh. Máy phát điện hiện đại (bao gồm cả của chúng tôi) thực hiện việc này một cách tự động.
Biểu tượng yêu thích SVG
Favicon SVG là tệp SVG bình thường. Các trình duyệt hiển thị nó giống như bất kỳ SVG nào khác và khối <style> có thể điều chỉnh màu sắc dựa trên lược đồ màu ưa thích.
Cách trình duyệt chọn
Nếu bạn gửi nhiều thẻ <link rel="icon">, trình duyệt sẽ chọn thẻ phù hợp nhất với bề mặt (tab, dấu trang hoặc cài đặt). SVG được ưu tiên khi được hỗ trợ; .ico là dự phòng.
Câu hỏi thường gặp
What is inside a .ico file?
A header plus a directory of image entries. Each entry can be BMP or PNG at a specific width and height.
How do browsers choose which favicon to display?
Browsers read all <link rel="icon"> tags and pick the best match for the surface — tab, bookmark, or install prompt. SVG is preferred when supported; .ico is the fallback.
Why use PNG inside an .ico instead of BMP?
PNG compression cuts file size 5–10× at 64×256 with no visible loss, which speeds up page loads.
Can I use only SVG for favicons?
Not safely. Always ship favicon.ico as a fallback for older browsers, Windows shortcuts, and embedders that ignore SVG.