Vì sao một biểu tượng biến thành sáu tệp
Favicon bắt đầu từ năm 1999 với một tệp favicon.ico duy nhất cỡ 16×16 mà Internet Explorer tìm trong thư mục gốc của trang web. Từ đó, mọi nền tảng hiển thị biểu tượng trang web đều yêu cầu kích thước riêng, và bộ biểu tượng ngày càng lớn:
- 16 px: tab trình duyệt và danh sách dấu trang trên màn hình thông thường.
- 32 px: tab trên màn hình mật độ cao, và thanh tác vụ Windows khi trang được ghim.
- 48 px: lối tắt trên màn hình nền Windows và một số danh sách trang web.
- 180 px: Apple touch icon, dùng khi ai đó thêm trang vào màn hình chính trên iPhone hoặc iPad.
- 192 px và 512 px: biểu tượng màn hình chính Android và màn hình chờ của ứng dụng web đã cài đặt, được khai báo trong web manifest.
Tệp ZIP chứa favicon.ico với ba kích thước nhỏ gói bên trong, apple-touch-icon.png, icon-192.png, icon-512.png, và một site.webmanifest trỏ đến hai biểu tượng Android. Tệp nén mang tên tệp nguồn của bạn, nên logo.svg cho ra logo.favicon.zip.
Bộ biểu tượng được tạo ra như thế nào
Mỗi kích thước được vẽ trực tiếp từ tệp gốc lên một hình vuông trong suốt riêng. Nếu ảnh không vuông, nó được co giãn cho vừa và căn giữa, với khoảng trong suốt ở các cạnh ngắn hơn. Một tệp SVG được raster hóa lại ở từng kích thước, nên biểu tượng 16 px có cùng độ chính xác vector như biểu tượng 512 px; ảnh raster được thu nhỏ bằng thuật toán làm mịn của trình duyệt.
Tệp ICO lưu ba ảnh của nó dưới dạng dữ liệu PNG bên trong container ICO, một biến thể được hỗ trợ từ Windows Vista và bởi mọi trình duyệt hiện nay. Nó giữ trọn độ trong suốt và thường nhỏ hơn nhiều so với định dạng ICO dựa trên bitmap cũ.
Mọi thao tác vẽ đều diễn ra bằng Canvas API trong trình duyệt của bạn. Công cụ nhận tệp nguồn đến 20 MB ở dạng PNG, JPG, WebP hoặc SVG.
Thiết kế logo sống sót ở 16 điểm ảnh
Ở 16×16 chỉ có tổng cộng 256 điểm ảnh. Một logo chi tiết trở thành một đốm nhòe ở kích thước đó, và đó là vấn đề thiết kế mà không thiết lập xuất nào sửa được. Những gì hiệu quả:
- Dùng một biểu tượng, không dùng logo đầy đủ. Một chữ cái, một chữ lồng hoặc phần biểu tượng của logo không kèm chữ.
- Hình khối dày và ít màu. Nét mảnh hơn khoảng 1/16 chiều rộng sẽ biến mất ở kích thước nhỏ nhất.
- Lấp đầy hình vuông. Cắt bỏ lề trống trong tệp nguồn trước khi tạo; một logo lơ lửng giữa nhiều khoảng trong suốt sẽ trở nên tí hon trên tab.
- Kiểm tra cả hai giao diện. Thanh tab trình duyệt có thể sáng hoặc tối. Biểu tượng đen trên nền trong suốt biến mất trên thanh tab tối; một viền sáng hoặc một khối màu đặc phía sau sẽ giúp ích.
Nếu phiên bản 16 px vẫn trông lem nhem, có thể đáng chuẩn bị một tệp nguồn đơn giản hóa riêng, tạo bộ biểu tượng từ đó, và giữ các tệp PNG lớn hơn từ phiên bản chi tiết.
Những đặc thù của nền tảng đáng biết
Apple touch icon trong suốt
iOS không hiển thị độ trong suốt trên biểu tượng màn hình chính; vùng trong suốt bị lấp đầy, thường bằng màu đen. Vì công cụ giữ độ trong suốt, một logo trên nền trong suốt sẽ có một ô vuông tối bao quanh trên iPhone. Để có kết quả gọn gàng, hãy dùng tệp nguồn có màu nền đặc, hoặc xuất logo kèm nền trước khi thả vào.
Hoàn thiện web manifest
Tệp site.webmanifest đi kèm chỉ liệt kê hai biểu tượng. Với trang web cần cài đặt được như ứng dụng, hãy mở nó bằng trình soạn thảo văn bản và thêm ít nhất name, short_name, start_url, display (ví dụ standalone) và theme_color. Thiếu chúng, trình duyệt sẽ dùng tiêu đề trang thay thế và không đề xuất cài đặt.
Bộ nhớ đệm cứng đầu
Trình duyệt lưu đệm favicon rất mạnh tay, đôi khi trong nhiều ngày và độc lập với bộ nhớ đệm của trang. Nếu biểu tượng cũ vẫn hiện sau khi bạn tải tệp mới lên, hãy mở trực tiếp URL của biểu tượng và tải lại, hoặc thêm tham số phiên bản như ?v=2 vào các liên kết biểu tượng trong HTML.
Chọn tệp nguồn
Một tệp SVG vuông là nguồn tiện nhất vì nó được vẽ sắc nét ở 512 px dù tác phẩm gốc nhỏ đến đâu. Nếu bạn có logo vector ở định dạng khác, hãy xuất thành SVG hoặc PNG ít nhất 512×512. Với logo raster chỉ có ở kích thước nhỏ, phóng to trước bằng phóng to ảnh bằng AI sẽ cho biểu tượng 512 px viền gọn hơn so với kéo giãn đơn thuần. Logo có phần chữ dài nên được cắt gọn về phần biểu tượng bằng cắt ảnh trước khi tạo, thay vì để nó co lại thành một đường mảnh ở giữa hình vuông.