Một favicon giờ không còn là một ảnh nữa. Trình duyệt, điện thoại, và hệ điều hành mỗi cái lấy một kích thước khác nhau cho một ô khác nhau — tab trình duyệt, một dấu trang, màn hình chính iOS, trình chuyển ứng dụng Android. Xuất một PNG 32×32 và nó sẽ chạy trong tab nhưng trông mờ khi ai đó lưu trang của bạn vào điện thoại. Xuất cả bộ và mọi bề mặt đều nhận một biểu tượng sắc nét.
Đây chính xác là những kích thước bạn cần, mỗi cái làm gì, và vì sao danh sách trông như vậy.
Các kích thước quan trọng
Hầu hết trang được bao bởi sáu kích thước PNG cộng một .ico di sản. Đây là bảng tham khảo:
| Kích thước | Định dạng | Dùng ở đâu |
|---|---|---|
| 16×16 | PNG (trong .ico) | Tab trình duyệt, thanh địa chỉ, dấu trang |
| 32×32 | PNG (trong .ico) | Tab Retina, lối tắt thanh tác vụ Windows |
| 48×48 | PNG | Biểu tượng trang Windows, một số bề mặt Android |
| 180×180 | PNG | Màn hình chính iOS (apple-touch-icon) |
| 192×192 | PNG | Màn hình chính Android, cài đặt PWA |
| 512×512 | PNG | Màn hình chờ PWA, cửa hàng ứng dụng, DPI cao |
File favicon.ico là một vùng chứa gói các kích thước nhỏ (thường 16 và 32, đôi khi 48). Trình duyệt cũ và Windows tìm nó theo tên ở gốc trang của bạn, nên vẫn đáng xuất dù trình duyệt hiện đại vui vẻ dùng PNG.
Vì sao nhiều thế? Một chuyến tham quan nhanh
Lý do danh sách dài là biểu tượng hiện ra ở những kích thước vật lý cực kỳ khác nhau.
16 và 32 là các biểu tượng tab hàng ngày. 16 là kích thước kinh điển; 32 bao các màn hình DPI cao ("Retina") nơi 16 sẽ trông dịu. Trình duyệt chọn cái nào vừa mật độ điểm ảnh.
48 là chuyện của Windows — nó dùng cho lối tắt trang và hiện sắc nét hơn ở vài nơi mà 32 không bao tốt.
180 là apple-touch-icon của Apple. Khi ai đó chạm "Thêm vào Màn hình chính" trên một iPhone hay iPad, iOS dùng cái này. Chỉnh sai và iOS sẽ hoặc chộp một ảnh chụp màn hình thu nhỏ hoặc hiển thị một ô chữ cái trơn — chẳng cái nào trông giống thương hiệu của bạn.
192 và 512 là các kích thước Ứng dụng Web Tiến bộ (PWA), khai báo trong một file manifest.webmanifest. 192 là biểu tượng màn hình chính Android; 512 nuôi màn hình chờ và được thu nhỏ cho bất cứ thứ gì khác OS cần. Nếu trang của bạn cài đặt được, hai cái này là không thể thương lượng.
Bạn có cần lớn hơn 512 không?
Không. 512×512 là trần thực tế cho favicon web — thông số webmanifest và mọi nền tảng lớn đều dừng quanh mức đó. Nếu tác phẩm nguồn của bạn là 1024 hay lớn hơn, điều đó ổn như một ảnh khởi đầu (nhiều chi tiết hơn để thu nhỏ từ đó), nhưng bạn không xuất một favicon 1024. Bất cứ thứ gì trên 512 chỉ thêm byte mà không ai dùng.
Một quy tắc quan trọng khi đi lên: bắt đầu từ một nguồn lớn, vuông. Một bản gốc 512×512 hay 1024×1024 thu nhỏ gọn xuống mọi kích thước bên dưới nó. Bắt đầu từ một ảnh nhỏ xíu và các kích thước nhỏ trông đục vì chưa bao giờ có đủ chi tiết để giữ.
Thiết kế để nó sống sót ở 16×16
Kích thước khó nhất là kích thước nhỏ nhất. Ở 16×16 một logo chi tiết trở thành một vệt bẩn không đọc được. Vài mẹo đúng trên mọi trang:
- Đơn giản hóa. Một wordmark đầy đủ sẽ không đọc được ở 16px. Dùng một chữ cái đơn, một monogram, hay phần dễ nhận ra nhất của mark.
- Giữ độ tương phản cao để hình dạng vẫn đọc được trên cả nền tab sáng và tối.
- Chừa một chút khoảng đệm — một biểu tượng chạm cả bốn cạnh cảm giác chật chội trong tab.
- Thử nó ở cỡ nhỏ. Thu nhỏ trình duyệt của bạn, hay chỉ cần nhìn cái tab thật. Nếu bạn không nhận ra nó là gì trong một cái liếc, hãy đơn giản hóa thêm.
Tạo cả bộ
Bạn không dựng những cái này bằng tay. Thả một ảnh vuông vào Công cụ Tạo Favicon và nó tạo cả bộ cùng lúc — favicon.ico, các PNG 16/32/48/180/192/512, một webmanifest sẵn dùng, và đúng đoạn HTML <head> để dán vào. Mọi thứ chạy trong trình duyệt của bạn: ảnh không bao giờ được tải lên, và sau lần truy cập đầu tiên công cụ hoạt động offline.
HTML mà bạn sẽ có
Để tham khảo, một thiết lập favicon hoàn chỉnh trông đại khái thế này trong <head> của bạn:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
Công cụ tạo viết cái này cho bạn, nên bạn có thể dán thẳng vào. Bao sáu kích thước cộng .ico và manifest, và mọi trình duyệt, điện thoại, và OS đều nhận biểu tượng sắc nét mà nó đang đòi.