Logo đen trên nền trong suốt trông hoàn hảo trong thẻ sáng nhưng biến mất trong thẻ tối. Định dạng ICO không thích ứng được, nhưng favicon SVG thì có: nó chứa quy tắc CSS đổi màu theo giao diện trình duyệt.
Vấn đề: một tệp, hai nền
Khi trình duyệt dùng giao diện theo hệ thống, dải thẻ của cùng một trang có thể gần trắng với người này và gần đen với người khác. Favicon đơn sắc thiết kế cho một nền sẽ khó thấy trên nền còn lại.
Nhiều trang khắc phục bằng nền màu không trong suốt. Cách này hiệu quả nhưng khiến biểu tượng trông như một mảng nặng nề, trong khi các thương hiệu lớn thường dùng biểu tượng có nền trong suốt.
Cách phù hợp là để trình duyệt chọn, và điều đó không cần JavaScript hay nhận diện từ máy chủ.
SVG thích ứng hoạt động thế nào?
Tệp SVG là một tài liệu, không phải ảnh phẳng: nó có thể chứa thẻ style và do đó có thể dùng truy vấn media. Thêm quy tắc prefers-color-scheme: dark sẽ định nghĩa lại màu tô của các đường nét khi trình duyệt dùng giao diện tối.
Thực tế, SVG khai báo màu mặc định cho giao diện sáng, rồi thêm quy tắc thay thế trong chế độ tối. Trình duyệt áp dụng màu phù hợp khi kết xuất và cập nhật thẻ ngay nếu khách truy cập đổi giao diện.
Cơ chế này còn làm được nhiều hơn đảo màu: bạn có thể hiển thị hình hoàn toàn khác, chẳng hạn biểu tượng trên nền trong suốt ở chế độ sáng và huy hiệu tô kín ở chế độ tối.
Khai báo SVG cùng với .ico
Khai báo SVG bằng link rel="icon" type="image/svg+xml" href="/favicon.svg". Trình duyệt hiểu định dạng này sẽ ưu tiên nó, còn trình duyệt không hỗ trợ sẽ dùng favicon.ico ở thư mục gốc.
Vì vậy không cần xóa gì: hai tệp cùng tồn tại, mỗi tệp phục vụ nhóm trình duyệt riêng. Đây là cải tiến tăng cường được áp dụng cho một biểu tượng 32 pixel.
Một lưu ý: favicon SVG phải tự chứa đủ tài nguyên. Phông chữ ngoài, ảnh từ xa hay script sẽ không được tải trong ngữ cảnh này. Chữ phải được chuyển thành đường nét.
Giới hạn của chế độ tối
Phiên bản tối áp dụng cho favicon trình duyệt máy tính. Nó không ảnh hưởng đến biểu tượng Apple Touch, vốn là PNG cố định không trong suốt, hay biểu tượng web manifest mà Android hiển thị trên nền riêng.
Hỗ trợ cũng chưa đồng đều: trình duyệt dựa trên Chromium và Firefox đọc SVG thích ứng, Safari còn hạn chế tùy phiên bản. Điều này vẫn ổn vì trình duyệt tự dùng .ico dự phòng.
Vì vậy hãy thiết kế biểu tượng giao diện sáng làm mặc định cho mọi khách truy cập, và coi phiên bản tối là tinh chỉnh dành cho trình duyệt đọc được nó.
Nguồn chính thức
Câu hỏi thường gặp
favicon.ico có hỗ trợ chế độ tối không?
Không. Định dạng ICO lưu ảnh raster cố định, không có khái niệm giao diện. Chỉ SVG chứa được truy vấn media, đó là lý do bộ tệp hiện đại có cả hai.
Có cần hai tệp SVG, một sáng và một tối không?
Không, một tệp là đủ. Hai phiên bản nằm trong cùng SVG, phân tách bằng truy vấn media prefers-color-scheme, giúp tránh thêm yêu cầu và mã nhận diện.
Kiểm tra hiển thị giao diện tối thế nào?
Đổi giao diện hệ điều hành rồi tải lại thẻ. Trong công cụ tạo, bản xem trước thẻ sáng và tối nằm cạnh nhau, giúp bạn không phải chuyển qua lại.