Tìm “kích thước favicon” vẫn thấy những danh sách mười lăm tệp có từ năm 2014. Thực tế, sáu kích thước hiện đã đủ cho thẻ trình duyệt, kết quả tìm kiếm, iOS, Android và PWA. Dưới đây là các kích thước và lý do sử dụng.
Những kích thước thực sự cần thiết
Mỗi hàng tương ứng với một mục đích sử dụng có tài liệu xác nhận trong bộ tệp được đề xuất. Bảng ưu tiên bộ tệp gọn, tương thích rộng thay vì tập hợp các phiên bản cũ.
| Tệp | Kích thước | Mục đích |
|---|---|---|
| favicon.ico | 16×16, 32×32, 48×48 | Thẻ, dấu trang, trình duyệt cũ, trình thu thập dữ liệu |
| favicon.svg | vector, vuông | Trình duyệt hiện đại, sắc nét ở mọi kích thước, hỗ trợ chế độ tối |
| favicon-96x96.png | 96×96 | Kết quả tìm kiếm Google trên di động |
| apple-touch-icon.png | 180×180 | Màn hình chính iOS và iPadOS, không trong suốt |
| web-app-manifest-192x192.png | 192×192 | Màn hình chính Android, khai báo trong web manifest |
| web-app-manifest-512x512.png | 512×512 | Màn hình khởi động PWA, phiên bản “maskable” |
Vì sao 16, 32 và 48 nằm chung trong một tệp .ico?
ICO là định dạng chứa: một tệp có thể chứa nhiều ảnh và trình duyệt chọn ảnh phù hợp với cách hiển thị. Đây chính là điều cần thiết vì kích thước yêu cầu thay đổi theo ngữ cảnh.
16×16 dành cho thẻ trên màn hình tiêu chuẩn. 32×32 cung cấp phiên bản cho màn hình mật độ điểm ảnh cao và các giao diện trình duyệt khác. 48×48 hoàn thiện bộ ảnh trong tệp, đồng thời đáp ứng quy tắc bội số của 48 mà Google nêu cho favicon trong kết quả tìm kiếm.
Lỗi phổ biến nhất là chỉ đưa ảnh 16×16 vào .ico: trên màn hình Retina, biểu tượng bị phóng to và luôn trông mờ.
180×180 cho iOS, 192 và 512 cho Android
iOS không đọc web manifest để lấy biểu tượng màn hình chính mà tìm thẻ apple-touch-icon. Chỉ cần một kích thước 180×180, đủ cho mọi iPhone và iPad đời gần đây. Hệ thống tự thu nhỏ cho thiết bị cũ hơn.
Android dùng web manifest. Hai mục là đủ: 192×192 cho biểu tượng màn hình chính và 512×512 cho màn hình khởi động khi cài trang web thành ứng dụng. Phiên bản 512 nên khai báo purpose “maskable”, nghĩa là được thiết kế để vẫn hiển thị tốt khi cắt thành hình tròn hoặc hình vuông bo góc.
Với biểu tượng maskable, giữ phần quan trọng trong 80% vùng giữa. Phần bên ngoài có thể bị cắt tùy nhà sản xuất điện thoại.
Nên bắt đầu từ ảnh nguồn nào?
Điểm khởi đầu tốt nhất là SVG: định dạng này co giãn không giảm chất lượng ở mọi kích thước trên. Nếu không có, dùng PNG vuông ít nhất 512×512 pixel để cả biểu tượng khởi động Android cũng được tạo bằng cách thu nhỏ, không phải phóng to.
Logo ngang có chữ không phù hợp ở 16×16: ở kích thước đó, cả từ chỉ còn vài điểm ảnh mờ nhòe. Hãy lấy riêng biểu tượng, hoặc dùng một đến hai chữ cái trên nền tương phản.
Cuối cùng, kiểm tra độ tương phản trên cả nền sáng lẫn tối: logo đen biến mất trong thẻ giao diện tối. Đó chính là lý do cần phiên bản tối của favicon SVG.
Những kích thước không còn cần thiết
Công cụ tạo cũ vẫn xuất tệp cho các tích hợp trước đây, chẳng hạn ô Windows dùng mstile-150x150.png và browserconfig.xml. Chỉ thêm chúng khi danh sách nền tảng cần hỗ trợ của bạn nêu rõ các giao diện đó.
Dãy apple-touch-icon-57x57, 60x60, 72x72, 76x76, 114x114, 120x120, 144x144 và 152x152 dài dòng có từ thời iOS chưa tự đổi kích thước. Một ảnh 180×180 thay thế được tất cả.
Bỏ khai báo không dùng đến giúp kho mã và HTML gọn hơn. Hãy kiểm tra trình duyệt và nền tảng mục tiêu trước khi xóa tích hợp đang có.
Nguồn chính thức
Câu hỏi thường gặp
Có còn cần favicon.ico không?
Có, nhưng chỉ cần ở thư mục gốc trang web. Trình duyệt hiện đại ưu tiên SVG, nhưng nhiều trình thu thập dữ liệu, dịch vụ tổng hợp và ứng dụng thư vẫn yêu cầu /favicon.ico mà không đọc HTML. Tệp chỉ nặng vài kilobyte: hãy giữ lại.
Google dùng favicon kích thước nào trong kết quả tìm kiếm?
Google yêu cầu biểu tượng có cạnh là bội số của 48 pixel và thường hiển thị ở 48×48. PNG 96×96 hoặc SVG đáp ứng dễ dàng. Biểu tượng phải cho phép thu thập dữ liệu và không bị robots.txt chặn.
Favicon có thể là hình chữ nhật không?
Về kỹ thuật thì có, về hình thức thì không nên. Mọi ngữ cảnh hiển thị đều dành một ô vuông: ảnh chữ nhật sẽ bị méo hoặc nằm giữa với các dải trống. Luôn bắt đầu từ hình vuông, thêm khoảng đệm quanh biểu tượng nếu cần.