Tạo favicon và biểu tượng ứng dụng

Công cụ này làm gì

Một website cần nhiều hơn một ảnh nhỏ để hiển thị đẹp ở mọi nơi. Thẻ trình duyệt trên máy tính cần biểu tượng 16 hoặc 32 pixel, Windows và kết quả tìm kiếm của Google dùng 48 pixel, màn hình chính iPhone cần 180 pixel, còn Android và ứng dụng web đã cài yêu cầu 192 và 512 pixel qua tệp manifest. Công cụ này lấy một ảnh và tạo cả bộ cùng lúc: favicon.ico, sáu tệp PNG, web manifest và các dòng HTML để nối chúng lại.

Mọi thứ được vẽ ngay trong trình duyệt. Ảnh không bao giờ được tải lên nên logo chưa công bố vẫn được giữ kín.

Cách tạo biểu tượng

1. Thả logo vào khung hoặc chọn tệp. PNG, JPG, WebP, GIF và SVG đều dùng được. Ảnh vuông từ 512 pixel trở lên cho kết quả tốt nhất, và SVG luôn sắc nét ở mọi kích thước vì được vẽ lại cho từng kích thước.
2. Xem danh sách xem trước. Dùng Cách đặt ảnh để giữ cả bức ảnh hoặc lấp đầy hình vuông và cắt bớt cạnh dài, Lề trong để chừa khoảng trống xung quanh, Bo góc cho hình dạng mềm hơn. Bật nền để tô màu cho biểu tượng, màu này cũng thành màu chủ đề trong manifest.
3. Nhập tên ứng dụng rồi tải từng tệp hoặc cả gói ZIP.

Bạn nhận được gì

• favicon.ico chứa ba ảnh 16, 32 và 48 pixel trong một tệp. Tệp bắt đầu bằng phần đầu 6 byte và mỗi ảnh có một mục 16 byte, nên bảng thư mục dài 54 byte trước ảnh đầu tiên. Mỗi ảnh bên trong là PNG, định dạng mà mọi trình duyệt hiện nay đều đọc được.
• favicon-16x16.png, favicon-32x32.png và favicon-48x48.png cho những nơi cần tệp riêng.
• apple-touch-icon.png cỡ 180 × 180 pixel. iOS tô nền đen cho phần trong suốt và tự bo góc, nên biểu tượng này luôn vuông và luôn có nền, màu trắng nếu bạn không chọn nền.
• icon-192.png và icon-512.png cho Android và ứng dụng web đã cài.
• site.webmanifest, một tệp JSON nhỏ đặt tên ứng dụng và liệt kê hai biểu tượng lớn.

Đưa lên website

Tải các tệp lên thư mục gốc của website để chúng mở được tại /favicon.ico và /icon-192.png, rồi dán các dòng đã tạo vào phần head của mọi trang. Trình duyệt cũng tự yêu cầu /favicon.ico dù không có HTML, vì vậy tên tệp rất quan trọng. Nếu để tệp ở thư mục khác, hãy đổi đường dẫn trong đoạn mã và trong manifest.

Mẹo tiết kiệm thời gian

• Thiết kế cho 16 pixel. Nét mảnh và chữ nhỏ sẽ biến mất. Một hình đậm hoặc một hai chữ cái thì còn đọc được.
• Dùng lề trong cho biểu tượng maskable. Android có thể cắt biểu tượng thành hình tròn hoặc vuông bo góc. Giữ phần quan trọng trong 80 phần trăm ở giữa là an toàn.
• Trình duyệt lưu favicon rất lâu. Sau khi đổi, hãy tải lại trang và xóa bộ nhớ đệm hoặc mở bằng cửa sổ riêng tư để thấy bản mới.
• Kiểm tra độ tương phản. Logo tối trên nền trong suốt sẽ biến mất trong giao diện tối của trình duyệt. Nền có màu sẽ khắc phục điều đó.