ICO so với PNG cho Favicon
ICO mang tính phổ quát nhưng mang tính kế thừa; PNG hiện đại nhưng cần liên kết rõ ràng. Sự so sánh này bao gồm hành vi của trình duyệt, kích thước tệp, tính minh bạch, ví dụ hoạt động và cách dùng cả hai định dạng mà không phải đau đầu về trùng lặp.
Tại sao sự so sánh này vẫn quan trọng
Các nhóm mới làm quen với giao diện người dùng thường chọn PNG vì nó có cảm giác hiện đại hoặc ICO vì một số hướng dẫn từ năm 2012 đã nói như vậy. Câu trả lời đúng vào năm 2026 hầu như luôn là cả hai, được sử dụng cho các công việc khác nhau.
ICO là định dạng chứa: một tệp, nhiều bitmap được nhúng. PNG là một hình ảnh raster cho mỗi tệp. Các trình duyệt xử lý chúng một cách khác nhau khi quyết định tìm nạp nội dung nào cho tab so với biểu ngữ cài đặt PWA.
Chọn sai sẽ khiến các tab bị mờ, tải xuống cồng kềnh hoặc thiếu biểu tượng trong phím tắt Windows. Hướng dẫn này giải thích vị trí của mỗi định dạng và cách kết hợp chúng.
Use our favicon generator, PNG to ICO converter, SVG to ICO converter, and live favicon tester to build and verify your icon set, and read the companion guide for a condensed walkthrough.
ICO: dự phòng phổ quát
Mọi trình duyệt trên máy tính để bàn sẽ yêu cầu /favicon.ico ngay cả khi bạn không bao giờ thêm thẻ <link>. Việc tìm nạp ngầm đó là lý do tại sao .ico gốc vẫn là bắt buộc.
Bên trong vùng chứa, mỗi mục lưu trữ dữ liệu chiều rộng, chiều cao và pixel (thường được nén PNG cho kích thước 64 × 64 trở lên). Khách hàng chọn kết quả phù hợp nhất với mật độ hiển thị.
Windows Explorer, bản xem trước liên kết Outlook và trình đọc RSS cũ vẫn phụ thuộc vào .ico. Bỏ qua nó sẽ làm hỏng biểu tượng đối với những người dùng không bao giờ truy cập HTML <head> của bạn.
PNG: pixel hoàn hảo ở mọi mật độ
PNG cung cấp cho bạn một độ phân giải đã biết cho mỗi tệp. Liên kết nó một cách rõ ràng: <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">.
Màn hình có độ phân giải cao có lợi vì bạn có thể cung cấp một PNG 32×32 mà trình duyệt hiển thị trên khe 16×16 CSS ở mật độ 2× — sắc nét hơn so với màn hình nâng cấp 16×16 đơn giản.
PWA yêu cầu biểu tượng tệp kê khai PNG ở kích thước 192×192 và 512×512. Biểu tượng cảm ứng Apple sử dụng 180×180 PNG. Các kích thước này không thuộc quy trình làm việc .ico nhiều kích thước cổ điển.
So sánh song song
Hỗ trợ trình duyệt: ICO thắng khi tìm nạp /favicon.ico ngầm định. PNG chiến thắng khi bạn khai báo kích thước cho tab Retina và trình khởi chạy Android.
Kích thước tệp: .ico được xây dựng tốt với 128 và 256 mục được nén PNG thường nhỏ hơn sáu tệp PNG riêng biệt. PNG lỏng lẻo sẽ giành chiến thắng khi bạn chỉ cần một hoặc hai kích cỡ.
Tính minh bạch: cả hai đều hỗ trợ alpha khi được mã hóa chính xác. Công cụ .ico kém sẽ làm phẳng độ trong suốt thành màu trắng; sử dụng trình tạo bảo tồn PNG alpha bên trong vùng chứa.
Tác giả: PNG dễ xem trước hơn trong bất kỳ trình xem hình ảnh nào. ICO yêu cầu công cụ xuất nhiều kích thước — đó là lý do tại sao có trình tạo.
Ví dụ thực tế
Blog tối thiểu: chỉ favicon.ico ở gốc. Không cần thẻ <link>; chấp nhận được đối với các trang web cá nhân.
Trang web tiếp thị SaaS: favicon.ico cộng với favicon.svg cộng với 180×180 apple-touch-icon.png. Được khai báo trong <head>; bao gồm máy tính để bàn, iOS và nhúng xã hội.
PWA có thể cài đặt: thêm android-chrome-192x192.png và android-chrome-512x512.png vào site.webmanifest trong khi vẫn giữ favicon.ico cho các ứng dụng khách tab cũ.
Trình bao bọc ứng dụng dành cho máy tính để bàn Windows: gửi .ico có khả năng 256×256 cho Electron hoặc Tauri; tùy chọn PNG cho giao diện người dùng trong ứng dụng ở kích thước cố định.
Phán quyết: sử dụng cả hai cùng nhau
Gửi favicon.ico nhiều kích thước để được hỗ trợ phổ biến và tìm nạp ngầm. Thêm các biến thể PNG cho biểu tượng apple-touch-icon, biểu tượng tệp kê khai và thẻ <link> theo kích thước tùy chọn.
Lớp SVG ở trên cùng khi nhãn hiệu của bạn thân thiện với vectơ và bạn muốn các tab nhận biết chế độ tối. ICO vẫn là sàn; SVG và PNG là sự tối ưu hóa.
Không chuyển đổi PNG thành ICO bằng cách đổi tên tiện ích mở rộng. Các tệp .ico thực sự cần có cấu trúc thư mục phù hợp và khung theo kích thước.
Câu hỏi thường gặp
ICO có bị phản đối không? Không. Trình duyệt vẫn tìm nạp nó theo mặc định. Đó là di sản trong thiết kế, không phải trong cách sử dụng.
Một PNG có thể thay thế favicon.ico không? Không an toàn. Bạn sẽ bỏ lỡ các yêu cầu /favicon.ico ngầm định và nhiều giao diện Windows.
Kích thước PNG nào quan trọng nhất? 32×32 cho tab, 180×180 cho iOS, 192 và 512 cho PWA.
ICO có hỗ trợ hoạt ảnh không? favicon hoạt hình cổ điển đã lỗi thời. Thay vào đó, hãy gửi .ico tĩnh nhiều kích thước.
Khắc phục sự cố
Chrome hiển thị PNG nhưng Edge hiển thị biểu tượng mờ: Edge có thể vẫn đang đọc bộ nhớ đệm .ico cũ. Tái tạo .ico với khung hình 32×32 sắc nét.
Tệp ICO có dung lượng 300KB+: có thể các mục BMP chưa được nén ở kích thước 256×256. Tái xuất với nén PNG bên trong vùng chứa.
PNG trông sắc nét, ICO thì không: bạn có thể đã tạo .ico từ nguồn nhỏ hơn PNG. Sử dụng cùng một bản gốc 512×512 cho cả hai.
Độ trong suốt chỉ bị mất trong ICO: công cụ của bạn đã mã hóa BMP 32 bit thay vì các mục nhập được nén PNG. Chuyển đổi trình tạo hoặc tái xuất với bản alpha được bảo tồn.
Hướng dẫn quyết định nhanh
Nếu bạn cần hỗ trợ ngầm định favicon.ico hoặc các phím tắt Windows: hãy gửi ICO.
Nếu bạn cần độ sắc nét của tab Retina với khả năng kiểm soát rõ ràng: hãy thêm thẻ PNG <link> ở kích thước 32×32 hoặc kích thước gói ở dạng ICO.
Nếu bạn cần giao diện người dùng cài đặt PWA: PNG trong tệp kê khai ở 192 và 512 — ICO không thay thế các biểu tượng tệp kê khai.
Nếu bạn cần mở rộng vô hạn và CSS ở chế độ tối trong các tab: hãy thêm SVG nhưng giữ ICO ở bên dưới.
Khi băng thông có vấn đề trên một trang web tĩnh có một biểu tượng: chỉ một ICO nhiều kích thước được nén tốt thường nhỏ hơn ICO cộng với ba PNG lỏng lẻo.
Khi thiết kế lặp lại hàng tuần: giữ SVG trong Git làm nguồn, tạo lại các bản xuất ICO và PNG trên mỗi thẻ phát hành thông qua một tập lệnh.
Di chuyển từ chỉ PNG sang ICO+PNG
Kiểm tra các thẻ hiện tại bằng Xem nguồn hoặc DevTools. Lưu ý mọi rel="icon" và apple-touch-icon href đã được triển khai.
Tạo favicon.ico nhiều kích thước từ cùng một PNG chính mà bạn đã sử dụng cho các tệp rời. Thay thế /favicon.ico gốc mà không đổi tên các nội dung không liên quan.
Giữ lại các thẻ PNG <link> hiện có nếu chúng hoạt động. Thêm ICO đầu tiên vào danh sách để các trình phân tích cú pháp cũ hơn có thể nhìn thấy sớm.
Triển khai khi lưu lượng truy cập thấp, cụ thể là lọc bộ nhớ đệm CDN cho /favicon.ico và xác minh bằng Curl -I rằng Loại nội dung là image/x-icon hoặc image/vnd.microsoft.icon.
Tìm kiếm trên Google Search Console để biết lỗi thu thập dữ liệu trên URL biểu tượng sau khi di chuyển. Các biểu tượng gốc bị hỏng đôi khi hiển thị dưới dạng các lỗi 404 mềm trong nhật ký.