Favicon (.ico) so với PNG
ICO và PNG không phải là đối thủ cạnh tranh - họ là đối tác. Thiết lập favicon hiện đại sử dụng .ico làm dự phòng phổ biến và PNG làm ghi đè có độ phân giải cao. Đây chính xác là thời điểm mỗi người chiến thắng.
ICO độc đáo ở chỗ một tệp duy nhất có thể nhúng nhiều độ phân giải. Trình duyệt hoặc hệ điều hành chọn kết quả phù hợp nhất tại thời điểm rút thăm — không nâng cấp, không có cạnh mờ.
PNG sắc nét hơn ở bất kỳ độ phân giải riêng lẻ nào và hỗ trợ nén tốt hơn cho các logo đồng màu. Nó không thể nhúng nhiều kích cỡ trong một tệp.
Thiết lập tối ưu là một .ico nhiều kích thước cùng với các tệp .ico 32×32 và 180×180 PNG độc lập dành cho trình duyệt có độ phân giải cao và iOS.
Cách hoạt động
- 1
Bắt đầu từ nguồn 512 × 512
PNG hoặc SVG.
- 2
Tạo cả hai định dạng
FetchFavicon xuất ra tệp .ico nhiều kích thước cộng với 16/32/48/180/192/512 PNG độc lập.
- 3
Liên kết cả hai trong <head>
<link rel="icon" href="/favicon.ico"> theo sau là <link rel="icon" type="image/png"size="32x32" href="/favicon-32x32.png">.
Thử ngay
Tạo cả .ico và PNG
Chuyển đổi PNG sang ICOCâu hỏi thường gặp
Cái nào có kích thước tập tin nhỏ hơn?+
Một PNG đơn lẻ nhỏ hơn một .ico có cùng độ phân giải, nhưng một .ico nhiều kích thước thay thế 4-6 PNG và thường thắng trên tổng số byte.
Google có hiển thị favicon PNG trong kết quả tìm kiếm không?+
Đúng. Google hỗ trợ cả .ico và PNG. Nó thích tỷ lệ khung hình vuông ít nhất là 48×48.
PNG có thể hỗ trợ chế độ tối không?+
Không trực tiếp. Sử dụng biến thể SVG cùng với PNG để hỗ trợ chế độ tối.