Tạo Favicon
Biến một ảnh duy nhất thành bộ favicon hoàn chỉnh — một tệp .ico đa kích thước, các tệp PNG cho mọi kích thước phổ biến, biểu tượng Apple touch, tệp site.webmanifest cho web app cài đặt được, và các thẻ HTML sẵn sàng dán vào. Công cụ còn kiểm tra một manifest có sẵn xem đã đủ những gì trình duyệt cần trước khi hiện nút "Cài đặt ứng dụng" hay chưa.
Các bước sử dụng
- Giữ tab Tạo favicon, rồi kéo ảnh vào vùng tải lên hoặc nhấp để chọn tệp. Ảnh vuông định dạng PNG, JPG hoặc SVG là tốt nhất (khuyến nghị 512×512).
- Xem thẻ Xem trước, hiển thị biểu tượng của bạn ở các kích thước 64, 48, 32 và 16px.
- Trong thẻ Web app manifest, điền Tên ứng dụng, Tên ngắn, URL khởi động, Màu chủ đề, Màu nền và Chế độ hiển thị. Đoạn JSON bên dưới cập nhật ngay khi bạn gõ.
- Sao chép các thẻ trong thẻ Thẻ HTML bằng nút Sao chép, rồi dán vào phần
<head>của trang — giờ đã có sẵn<link rel="manifest">và<meta name="theme-color">. - Nhấn Tạo bộ favicon (ZIP) và chờ tệp được tải xuống.
- Giải nén
favicon-package.zipvào thư mục gốc của website và kiểm tra đường dẫn tệp khớp với các thẻ HTML.
Kiểm tra manifest
- Chuyển sang tab Kiểm tra manifest.
- Dán nội dung tệp
site.webmanifesthoặcmanifest.json, hoặc nhấn Dùng manifest vừa tạo để kiểm tra manifest được tạo ở tab bên kia. - Đọc kết quả: lỗi khiến ứng dụng không cài đặt được, cảnh báo là những điểm nên sửa, còn gợi ý là cải thiện không bắt buộc.
Công cụ kiểm tra có name hoặc short_name, có start_url, display là standalone, fullscreen hoặc minimal-ui, theme_color và background_color là màu CSS hợp lệ, và có biểu tượng PNG khai báo đúng 192x192 và 512x512 với purpose any.
Mẹo
- Ảnh của bạn được thu nhỏ vừa khung (contain) và căn giữa trên nền trong suốt, nên ảnh không vuông cũng không bị kéo giãn — nhưng ảnh vuông sẽ tránh được viền trống.
- Tệp ZIP gồm
favicon.ico(gộp 16/32/48px), các PNG từ 16px đến 512px,apple-touch-icon.png(180px),site.webmanifestvà tệp tham chiếuhead-tags.html. - Manifest còn khai báo biểu tượng 512px với
purpose: "maskable"để Android tự cắt theo hình dạng riêng; hãy giữ phần hình quan trọng cách xa mép ảnh. - Giữ Tên ngắn khoảng 12 ký tự — màn hình chính sẽ cắt bớt tên dài bên dưới biểu tượng.
- Các thẻ HTML kèm theo giả định biểu tượng nằm ở thư mục gốc website (ví dụ
/favicon.ico); hãy chỉnh đường dẫnhrefnếu bạn đặt chúng trong thư mục con.
Câu hỏi thường gặp
Tệp ZIP gồm những gì?
favicon.ico (một tệp gộp 16, 32 và 48px), các PNG riêng lẻ ở 16, 32, 48, 64, 96, 128, 180, 192, 256 và 512px, một apple-touch-icon.png, site.webmanifest, cùng head-tags.html chứa mã đánh dấu.
Tôi có cần ảnh vuông không?
Không bắt buộc, nhưng nên dùng. Công cụ đặt mọi ảnh vừa trong khung vuông và căn giữa, nên ảnh không vuông sẽ có phần đệm trong suốt xung quanh.
Đặt các thẻ HTML ở đâu?
Dán chúng vào bên trong phần <head> của HTML. Hãy đảm bảo các tệp biểu tượng và site.webmanifest truy cập được theo đúng đường dẫn hiển thị (mặc định trỏ về thư mục gốc website).
Vì sao công cụ báo thiếu biểu tượng 512 dù tôi đã khai báo?
Chỉ biểu tượng có purpose any (hoặc không ghi purpose) mới được tính. Biểu tượng chỉ ghi maskable, tệp SVG, hoặc có sizes không đúng chính xác 512x512 đều không đáp ứng yêu cầu cài đặt.