Giải thích về kích thước Favicon

Favicon 16×16 pixel là tiêu chuẩn web ban đầu. Nó được sử dụng trong các tab trình duyệt trên màn hình tiêu chuẩn (96dpi), trong thanh công cụ dấu trang trên tất cả các trình duyệt trên máy tính để bàn và trong một số danh sách lịch sử trình duyệt. Vì 16×16 là một khung vẽ cực kỳ chặt chẽ nên thiết kế favicon của bạn phải được chuyển về dạng đơn giản nhất: một hình dạng, chữ cái hoặc dấu trừu tượng. Bất cứ điều gì phức tạp hơn sẽ không thể đọc được.

Kích thước pixel 32×32 tăng gấp đôi so với 16×16 và phục vụ các tab trình duyệt retina/HiDPI ở mật độ gấp 2 lần, biểu tượng dấu trang ở độ phân giải cao và biểu tượng gợi ý trên thanh địa chỉ trong Chrome. Các trình duyệt hiện đại yêu cầu 32×32 thường xuyên hơn nhiều so với 16×16 vì màn hình mật độ cao đã trở thành phần lớn các thiết bị. Nếu bạn chỉ có thể vận chuyển một kích thước thì 32×32 sẽ là lựa chọn có tác động mạnh nhất.

Kích thước 48×48 pixel là kích thước chế độ xem 'biểu tượng trung bình' của Windows Explorer và là kích thước tối thiểu mà Google Tìm kiếm yêu cầu để có đủ điều kiện cho favicon trong đoạn kết quả tìm kiếm. Các trang web có biểu tượng yêu thích không đáp ứng kích thước tối thiểu 48×48 sẽ xuất hiện với biểu tượng quả địa cầu chung bên cạnh URL của chúng trong kết quả của Google thay vì nhãn hiệu thương hiệu của chúng. Luôn bao gồm 48×48 trong gói .ico của bạn.

Kích thước 64×64 pixel được sử dụng trong chế độ xem biểu tượng lớn Windows Explorer và trong một số môi trường máy tính để bàn Linux. Việc đưa nó vào tệp .ico nhiều kích thước của bạn sẽ giảm chi phí không đáng kể nhưng đảm bảo hiển thị rõ ràng trong trình quản lý tệp và môi trường shell. Nhiều công cụ tạo favicon bao gồm 64 theo mặc định như một phần của gói .ico tiêu chuẩn.

Kích thước 128×128 pixel phục vụ các ô ứng dụng Windows Store và hình thu nhỏ trên thanh tác vụ mật độ cao. Nó ít cần thiết hơn đối với các favicon web thuần túy nhưng lại quan trọng nếu trang web của bạn được đóng gói dưới dạng PWA hoặc nếu người dùng ghim nó dưới dạng ứng dụng Windows. Việc gói nó bên trong .ico với tính năng nén PNG sẽ giữ cho kích thước tệp ở mức hợp lý.

Kích thước 256×256 pixel là khung .ico tiêu chuẩn lớn nhất. Nó được sử dụng cho các phím tắt trên màn hình Windows, kết quả tìm kiếm trong menu Bắt đầu Windows và một số ngữ cảnh được cài đặt ứng dụng. Ở độ phân giải này, bạn phải sử dụng tính năng nén PNG bên trong vùng chứa .ico thay vì BMP — hình ảnh BMP 256×256 không nén sẽ thêm 256 KB vào tệp .ico một cách không cần thiết.

Kích thước 180×180 pixel chỉ dành riêng cho iOS apple-touch-icon. Khi người dùng iPhone hoặc iPad chạm vào 'Thêm vào màn hình chính', Safari sẽ tìm nạp hình ảnh được khai báo ở `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>`. Kích thước này bao gồm tất cả các mẫu iPhone hiện tại (iPhone 6 Plus trở lên sử dụng 180×180 ở mật độ 3x; các mẫu cũ hơn sử dụng 120×120 và 152×152 — một tệp 180 duy nhất bao gồm tất cả các kích thước đó một cách duyên dáng).

Kích thước 192×192 pixel là biểu tượng bắt buộc tối thiểu trong tệp kê khai ứng dụng web (site.webmanifest) cho lời nhắc cài đặt PWA của Android Chrome. Khi người dùng thêm PWA vào màn hình chính Android của họ, Chrome sẽ hiển thị biểu tượng 192×192 trong trình khởi chạy và biểu tượng ứng dụng trong trình chuyển đổi ứng dụng gần đây. Nếu không có kích thước này trong tệp kê khai, lời nhắc cài đặt PWA sẽ hiển thị biểu tượng chung hoặc hoàn toàn không kích hoạt được.

Kích thước 512×512 pixel là biểu tượng bảng kê khai bắt buộc thứ hai. Chrome sử dụng nó cho màn hình giới thiệu PWA hiển thị trong khi ứng dụng đang tải sau khi khởi chạy màn hình chính và để xem trước hộp thoại cài đặt trên hệ điều hành Chrome trên máy tính để bàn. Đây cũng là kích thước nguồn lý tưởng để tạo ra tất cả các biến thể nhỏ hơn — bắt đầu từ 512×512 đảm bảo mọi đầu ra được lấy mẫu xuống đều giữ được các cạnh sắc nét và màu sắc chính xác.

Kích thước từ 512×512 đến 1024×1024 rất lớn chủ yếu được sử dụng cho các biểu tượng ứng dụng gốc trên macOS và iOS gửi qua App Store, không phải cho favicon trên web. Tuy nhiên, nếu bạn dự định chuyển đổi hiện diện web của mình thành ứng dụng gốc bằng cách sử dụng trình bao bọc (Điện tử, Tụ điện, Tauri), bạn sẽ cần 1024×1024 cho quy trình xem xét trên App Store. Lưu trữ tệp chính này cùng với gói favicon của bạn.

Favicon SVG không phụ thuộc vào độ phân giải và bao gồm mọi mật độ bằng một tệp duy nhất. Trình duyệt hỗ trợ favicon SVG (Chrome 80+, Edge 80+, Firefox 41+, Safari 15+) sẽ thích SVG hơn bất kỳ kích thước raster nào vì nó hiển thị hoàn hảo ở 1x, 2x, 3x hoặc bất kỳ PI tùy chỉnh nào. Điều đáng đánh đổi là không phải tất cả các ngữ cảnh đều hỗ trợ phím tắt SVG — Windows, trình đọc RSS và các công cụ cũ hơn vẫn cần dự phòng .ico.

Điều quan trọng là phải hiểu mối quan hệ giữa kích thước và vùng chứa .ico. Tệp .ico không phải là một hình ảnh duy nhất — nó là một kho lưu trữ nhiều hình ảnh. Mỗi khung hình bên trong nó là một hình ảnh raster riêng biệt ở kích thước khác nhau. Trình duyệt đọc thư mục ICO, xác định khung nào phù hợp nhất với kích thước nó cần và chỉ giải mã khung đó. Đây là lý do tại sao một tệp .ico có thể phục vụ tốt các tab 16, 32, 48 và 64 px.

Bộ tối thiểu được đề xuất cho một trang web sản xuất vào năm 2026 là: favicon.ico gói các khung hình 16, 32, 48 và 64 px; apple-touch-icon.png ở 180×180; android-chrome-192x192.png; android-chrome-512x512.png; favicon.svg cho các trình duyệt hiện đại; và site.webmanifest tham chiếu đến 192 và 512 PNG. favicon generator tạo ra bộ hoàn chỉnh này từ một nguồn tải lên chỉ bằng một cú nhấp chuột.

Việc kiểm tra xem tất cả các kích thước favicon của bạn có được cung cấp chính xác hay không rất đơn giản với favicon tester. Nhập URL trang web của bạn và người kiểm tra sẽ cố gắng tìm nạp favicon.ico của bạn, kiểm tra các thẻ liên kết trong phần đầu HTML của bạn và hiển thị bản xem trước của từng kích thước. Các kích thước bị thiếu sẽ được gắn cờ kèm theo các đề xuất hữu ích.