Kích thước và định dạng favicon thực sự hiệu quả

Vì sao điều này vẫn khó hiểu

Favicon có lịch sử dài và rối bậc nhất trong tài nguyên web. Bắt đầu năm 1999 là một .ico 16×16 mà Internet Explorer tìm tại /favicon.ico, không cần thẻ HTML. Mỗi nền tảng xuất hiện sau đó — biểu tượng màn hình chính iOS, biểu tượng thích ứng Android, ô ghim Windows, manifest PWA — bổ sung quy ước riêng thay vì thay thế quy ước cũ, vì phá vỡ hành vi ban đầu sẽ làm hỏng mọi trang web hiện có. Kết quả là một đặc tả không bao giờ được dọn gọn mà chỉ mở rộng, và phần lớn danh sách kích thước trên web được sao chép từ thời nhiều phần mở rộng đó còn thực sự cần thiết.

Trình duyệt mới xử lý đầu vào tốt hơn nhiều. Chrome, Firefox, Safari lấy một biểu tượng co giãn và tạo kích thước thẻ nhỏ. Danh sách dài là bảo hiểm cũ, không yêu cầu hiện tại, thường bỏ được phần lớn cho trang thường.

Bộ thực sự phủ sử dụng thực

Ba tệp thực tế phủ đa số áp đảo browser/thiết bị:

• favicon.ico, chứa ảnh 32×32 — vẫn là phương án dự phòng mọi trình duyệt mặc định kiểm tra ở gốc trang, ngay cả khi không có <link> thẻ hiện diện. Định dạng chứa .ico về kỹ thuật có thể chứa nhiều độ phân giải, nhưng một ảnh 32px trong đó là đủ cho cách trình duyệt dùng hiện nay.
• PNG 180×180 làm apple-touch-icon — thứ iOS dùng khi người dùng thêm trang vào màn hình chính. iOS hoàn toàn không đọc favicon.ico cho mục đích này; không có tệp này, nó chụp màn hình trang thay thế, trông kém hơn rõ rệt khi làm biểu tượng màn hình chính.
• Favicon SVG — phóng thu rõ nét đến mọi kích thước tab, mọi mật độ pixel và hỗ trợ media query chế độ tối phía dưới. Trình duyệt hiện đại ưu tiên nó khi cả SVG và .ico đều được khai báo.

Trong head tài liệu là:

Mọi thứ ngoài ba tệp này — biểu tượng PWA 512 px, biến thể Android thích ứng, meta ô Windows — chỉ cần khi tạo PWA cài được hoặc nhắm ô ghim Windows. Thêm khi có yêu cầu thực, không làm trước.

Tự tạo phần raster của bộ đó nghĩa là xuất cùng hình ở nhiều kích thước rồi đóng gói .ico. Công cụ của chúng tôi Tạo favicon thực hiện từ một ảnh nguồn: favicon.ico, apple-touch-icon 180px và các PNG 192, 512 khi bạn cần manifest. SVG vẫn phải đến từ công cụ vector của bạn.

Từng nền tảng thực sự yêu cầu gì

• Thẻ trình duyệt máy tính kết xuất biểu tượng ở khoảng 16×16 pixel CSS, phóng lên cho màn hình high-DPI. Đó là lý do SVG hoặc PNG nhỏ được vẽ tốt quan trọng hơn ảnh nguồn lớn ở đây — tab là nơi hiển thị biểu tượng nhỏ nhất và được thấy nhiều nhất.
• màn hình chính iOS yêu cầu apple-touch-icon 180×180 (bao phủ iPhone hiện nay có mật độ cao nhất; iOS thu nhỏ cho thiết bị cũ). iOS cũng tự bo góc và trên một số phiên bản thêm độ bóng nhẹ — đừng bo góc trước trong ảnh nguồn, nếu không bạn sẽ bị bo hai lần.
• Màn hình chính Android / PWA đọc kích thước từ site.webmanifest thay vì thẻ link, thường là 192×192 và 512×512, đồng thời hỗ trợ biến thể “maskable” có đệm vùng an toàn để các hình biểu tượng thích ứng (tròn, vuông bo, giọt nước) không cắt thiết kế.
• Kết quả tìm kiếm (cụ thể là Google) sẽ hiển thị favicon nhỏ bên cạnh kết quả của bạn, lấy từ cùng nguồn với biểu tượng thẻ trình duyệt, ở kích thước hiển thị nhỏ tương tự.

site.webmanifest: dùng để làm gì

A site.webmanifest tệp là một tài liệu JSON nhỏ mô tả trang web như ứng dụng có thể cài đặt — tên, màu chủ đề, màu nền và danh sách biểu tượng với kích thước khai báo. Nó biến “Thêm vào màn hình chính” từ lối tắt dấu trang thành thứ có hình thức và cách mở như biểu tượng ứng dụng thật trên Android. Nếu không xây dựng PWA và không quan tâm khả năng cài đặt đó, bạn có thể bỏ hoàn toàn; trang thông thường chỉ với ba tệp phía trên hoạt động tốt mà không cần nó. Nếu thêm, hãy liên kết bằng <link rel="manifest" href="/site.webmanifest"> và tham chiếu biểu tượng bằng đường dẫn tuyệt đối trong JSON.

Thiết kế để đọc rõ ở 16 px

Biểu tượng thẻ trình duyệt rất nhỏ, và phần lớn thiết kế favicon thất bại không phải vì định dạng mà vì đồ họa nguồn chưa từng được kiểm tra ở kích thước hiển thị thực tế. Chi tiết rõ ở 512 px — logo chữ, nét mảnh, chuyển màu có nhiều dải thấy rõ — trở thành vệt xám ở 16 px.

• Rút gọn về một hình hoặc chữ chủ đạo. Một ký tự đậm hay bóng hình biểu tượng sống sót khi thu nhỏ, logo nhiều chi tiết thì không.
• Tăng tương phản, đơn giản màu. Hai hoặc ba màu phẳng rõ hơn ở kích thước nhỏ so với chuyển màu dễ nhòe thành tông trung bình.
• Tăng nét mảnh. Nét nhỏ đẹp nguyên cỡ có thể mất hoàn toàn khi khử răng cưa về 16px.
• Thử thu bản xuất thật về 16px và nhìn, không đánh giá hình lớn rồi cho rằng sẽ ổn. Đây là bước bị bỏ nhiều nhất khi thiết kế favicon.

Chế độ tối

Thanh thẻ trình duyệt và giao diện hệ điều hành có thể tối hoặc sáng theo chủ đề hệ thống; favicon chỉ thiết kế cho nền sáng có thể biến mất trên thanh thẻ tối, hoặc ngược lại. Favicon SVG có thể phản hồi trực tiếp bằng một prefers-color-scheme media query bên trong khối style nhúng của SVG, đổi màu fill theo chủ đề người dùng. Favicon PNG và ICO không làm được — chúng là ảnh tĩnh — nên nếu hỗ trợ chế độ tối quan trọng, favicon SVG không phải tùy chọn, mà là định dạng duy nhất có khả năng đó.

Nếu không làm vậy, chọn favicon đủ tương phản trên trắng và gần đen, thường thêm nét viền mảnh hoặc màu trung gian thay vì chỉ đen hay trắng, đáp ứng khá tốt đa số trường hợp mà không tăng phức tạp.

Vì sao favicon không cập nhật và cách sửa

Favicon được cache rất mạnh: trình duyệt coi gần như tĩnh, tiếp tục hiện cũ vài ngày hoặc tuần ngay sau tải lại cưỡng bức trang, vì yêu cầu favicon không gắn vô hiệu cache trang thường như script hoặc CSS. Ba cách sửa đáng tin:

1. Đổi tên tệp hoặc thêm chuỗi truy vấn phiên bản — /favicon.ico?v=2 hoặc đổi tên thành /favicon-v2.ico buộc yêu cầu mới vì chính URL đã thay đổi.
2. Xóa cache riêng cho favicon của trình duyệt; trên Chrome nó tách khỏi xóa cache chung (chrome://favicon-internals hoặc xóa dữ liệu duyệt với mục “ảnh và tệp được lưu trong bộ nhớ đệm”).
3. Hãy chờ. Ngay URL đổi, một số trình duyệt và máy tìm kiếm quét/cache favicon theo lịch riêng; riêng favicon tìm kiếm có thể chậm vài ngày so với trang trực tiếp.

Câu hỏi thường gặp