Các kích thước favicon mà trình duyệt và thiết bị thực sự muốn

Trước đây, favicon có nghĩa là một hình ảnh nhỏ 16×16 duy nhất. Bây giờ một tab trình duyệt, lối tắt trên màn hình chính của điện thoại, thanh dấu trang và biểu tượng cảm ứng Apple mỗi thứ đều mong đợi kích thước riêng của mình, và chỉ cung cấp một kích thước sẽ khiến một số bối cảnh đó hoặc bị mờ hoặc hiển thị một biểu tượng dự phòng chung chung thay vì biểu tượng của bạn.

Tại sao một kích thước là không đủ

Một biểu tượng 16×16 được phóng to để lấp đầy vị trí biểu tượng màn hình chính 180×180 trông chính xác lởm chởm như bất kỳ hình ảnh nhỏ nào bị kéo giãn ra kích thước lớn — không có cách nào để thêm vào chi tiết vốn không có trong nguồn. Mỗi bối cảnh nơi một favicon xuất hiện đều có độ phân giải mong đợi riêng của nó, và thực hành hiện đại là cung cấp một bộ kích thước thay vì dựa vào việc trình duyệt phóng to một tệp nhỏ duy nhất một cách tồi tệ.

Các kích thước đáng để bao phủ

• 16×16 và 32×32 — các kích thước favicon cổ điển, được sử dụng trong các tab trình duyệt và danh sách dấu trang trên hầu hết các trình duyệt máy tính để bàn.
• 180×180 — kích thước mà Apple mong đợi cho biểu tượng màn hình chính khi một trang được thêm vào màn hình chính của iPhone hoặc iPad.
• 192×192 và 512×512 — được Android sử dụng và bởi các tệp kê khai ứng dụng web cho biểu tượng màn hình chính và màn hình chờ trên các ứng dụng web có thể cài đặt.

Giữ cho thiết kế dễ đọc ở 16px

Trình tạo favicon lấy một hình ảnh nguồn và tạo ra toàn bộ bộ kích thước tiêu chuẩn cùng một lúc, hoàn toàn trong trình duyệt của bạn — nhưng không có trình tạo nào có thể sửa được một thiết kế vốn không hoạt động ở kích thước nhỏ ngay từ đầu. Các chi tiết tinh tế, đường mỏng và văn bản nhỏ hoàn toàn biến mất ở 16×16; một hình dạng hoặc chữ cái đơn giản, đậm, vẫn còn nhận diện được khi thu nhỏ mới là thứ thực sự đọc rõ ràng trong một tab trình duyệt, bất kể có bao nhiêu kích thước được tạo ra từ nó.