Kích thước Favicon tốt nhất năm 2026

Các tab trình duyệt trên màn hình có mật độ tiêu chuẩn sử dụng 16×16 pixel. Đây là kích thước favicon nhỏ nhất và được người dùng nhìn thấy thường xuyên nhất — nó luôn nằm trong tab nhỏ phía trên nội dung trang. Biểu tượng 16×16 vẫn dễ đọc đòi hỏi hình dạng đậm, độ tương phản cao và không có chi tiết nhỏ. Những dòng mỏng, văn bản nhỏ và logo phức tạp trở thành những đốm màu khó đọc ở kích thước này.

Kích thước 32×32 pixel là kích thước favicon quan trọng nhất đối với các trình duyệt hiện đại. Nó được sử dụng cho tab trình duyệt trên màn hình Retina/HiDPI (được hiển thị ở mật độ 2x từ kích thước logic 16px), cho thanh dấu trang và cho các biểu tượng gợi ý trên thanh địa chỉ. Chrome yêu cầu kích thước 32×32 nhiều nhất và Google Tìm kiếm sử dụng ít nhất biểu tượng 32×32 cho biểu tượng yêu thích trong kết quả tìm kiếm của mình.

Kích thước 48×48 pixel phục vụ Windows Explorer ở chế độ xem 'biểu tượng trung bình' và được một số công cụ tìm kiếm sử dụng cho hình thu nhỏ kết quả. Đề xuất chính thức của Google về tính đủ điều kiện của favicon tìm kiếm là tối thiểu 48 × 48 pixel, tỷ lệ khung hình vuông và khả năng truy cập công khai qua HTTP. Luôn gói 48×48 bên trong tệp .ico nhiều kích thước của bạn để đáp ứng yêu cầu này.

Kích thước 64×64 pixel rất hữu ích trong Windows Explorer ở chế độ xem biểu tượng lớn và đối với một số môi trường trình khởi chạy ứng dụng. Việc đưa nó vào tệp .ico của bạn sẽ thêm kích thước tệp tối thiểu và đảm bảo độ bao phủ cho mọi bề mặt yêu cầu kích thước từ 48 đến 128 pixel. Hầu hết các trình tạo .ico nhiều kích thước đều bao gồm 64 theo mặc định.

Kích thước 128×128 và 256×256 pixel được sử dụng bên trong các tệp .ico cho các ô menu Bắt đầu Windows và các phím tắt có độ phân giải cao. Ở 256×256, bạn nên sử dụng tính năng nén PNG bên trong .ico thay vì mã hóa BMP — chỉ riêng mục nhập 256×256 BMP không nén đã thêm khoảng 256 KB vào tệp .ico, trong khi nén PNG, nó sẽ co lại xuống dưới 30 KB.

Kích thước 180×180 pixel là kích thước apple-touch-icon được iOS sử dụng. Khi người dùng chạm vào 'Thêm vào Màn hình chính' trên Safari, iOS sẽ tìm nạp `<link rel='apple-touch-icon' size='180x180' href='/apple-touch-icon.png'>` và sử dụng hình ảnh đó làm biểu tượng màn hình chính. Nếu không có điều này, iOS sẽ quay lại ảnh chụp màn hình chất lượng thấp của trang của bạn. Đây là kích thước có mức độ ưu tiên cao nhất dành cho các trang web ưu tiên thiết bị di động.

Kích thước 192×192 pixel là bắt buộc 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 trang web của bạn vào màn hình chính Android của họ, Chrome sẽ đọc tệp kê khai và sử dụng biểu tượng 192×192 cho trình khởi chạy ứng dụng và bóng thông báo. Biểu tượng phải có hình vuông, định dạng PNG và có thể truy cập được tại URL đã khai báo.

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

Thiết lập favicon khả thi tối thiểu bao gồm hầu như tất cả người dùng là: favicon.ico nhiều kích thước chứa các khung 16, 32, 48 và 64 pixel, cùng với apple-touch-icon.png 180×180, cùng với site.webmanifest với các mục nhập 192×192 và 512×512 PNG. Sự kết hợp này xử lý các trình duyệt, dấu trang tiêu chuẩn, các bản cài đặt trên màn hình chính iOS và các bản cài đặt Android PWA.

Việc thêm biểu tượng yêu thích SVG cùng với .ico và PNG sẽ giúp bảo vệ biểu tượng của bạn trong tương lai. SVG hiển thị ở bất kỳ mật độ nào — một tệp duy nhất phục vụ màn hình 96dpi, màn hình 4K và bất kỳ thứ gì ở giữa — và có thể chuyển đổi màu dựa trên tùy chọn phối màu của người dùng. Chrome, Edge, Firefox và Safari 15+ đều hỗ trợ favicon SVG kể từ năm 2026, khiến nó trở thành một sự bổ sung an toàn.

Các lỗi phổ biến trong việc định cỡ favicon bao gồm: chỉ sử dụng PNG 32×32 mà không có .ico (bị hỏng trên các trình duyệt cũ và phím tắt Windows), bỏ qua 180 apple-touch-icon (bị hỏng khi cài đặt iOS) và bỏ qua 512×512 khỏi tệp kê khai (lời nhắc cài đặt Android hiển thị một biểu tượng chung). favicon generator tự động tạo bộ hoàn chỉnh từ một hình ảnh nguồn, loại bỏ tất cả những khoảng trống này.

Tác động SEO của kích thước favicon là gián tiếp nhưng có thật. Google Tìm kiếm hiển thị biểu tượng yêu thích bên cạnh kết quả tìm kiếm và áp dụng yêu cầu kích thước tối thiểu là 48×48 pixel. Các trang web không có biểu tượng yêu thích có kích thước phù hợp và có thể truy cập công khai có thể thấy biểu tượng quả địa cầu chung trong kết quả tìm kiếm thay vì nhãn hiệu của chúng — một sự khác biệt nhỏ về tín hiệu tin cậy nhưng đáng chú ý đối với các nhấp chuột tìm kiếm không phải trả tiền.

Để có biểu tượng cấp PWA hoàn thiện, hãy thêm các biểu tượng có thể che được vào bảng kê khai web của bạn. Biểu tượng có thể che được có vùng đệm vùng an toàn khoảng 10% ở tất cả các cạnh, đảm bảo rằng khi Android áp dụng mặt nạ hình tròn hoặc hình tròn cho biểu tượng, biểu trưng lõi sẽ không bao giờ bị cắt bớt. Tạo một phiên bản có thể che riêng bằng cách sử dụng tùy chọn xuất có thể che của trình tạo và khai báo phiên bản đó bằng `'purpose': 'maskable'` trong mảng biểu tượng tệp kê khai.

Khi chọn hình ảnh nguồn để tạo favicon, hãy ưu tiên SVG hơn PNG và PNG hơn JPG. SVG tạo ra đầu ra sắc nét nhất ở mọi kích cỡ. PNG-32 (có alpha) duy trì độ trong suốt. JPG thiếu hỗ trợ về tính minh bạch và giới thiệu các tạo phẩm nén xuất hiện ở kích thước nhỏ. Xem hướng dẫn best favicon format để so sánh định dạng đầy đủ.