Công cụ này làm gì
Trình tạo favicon tạo các biểu tượng PNG, favicon.ico, site.webmanifest và đoạn mã HTML để liên kết các nội dung. Bạn có thể chọn chế độ nền, phần đệm và cắt.
Cách sử dụng
- Tải lên logo hình vuông hoặc gần vuông.
- Đặt nền, phần đệm, chế độ cắt và tên ứng dụng.
- Tải xuống ZIP và đặt các tệp vào thư mục gốc của trang web của bạn.
Gói favicon gồm những gì
Tệp ZIP chứa favicon.ico cho trình duyệt truyền thống, biểu tượng PNG kích thước 16, 32, 48, 180, 192 và 512 pixel, tệp site.webmanifest và đoạn HTML để liên kết tài nguyên. Bộ này bao phủ tab trình duyệt, bookmark, biểu tượng màn hình iOS và biểu tượng Android/PWA.
favicon.ico được tạo từ nhiều kích thước PNG để trình duyệt cũ và mới chọn phiên bản phù hợp. PNG 180x180 dùng làm apple-touch-icon, còn 192 và 512 pixel được khai báo trong manifest cho biểu tượng website có thể cài đặt.
Chuẩn bị logo nguồn
Logo vuông hoặc gần vuông với đủ khoảng trống quanh dấu hiệu là tốt nhất. Nếu logo quá ngang hoặc quá dọc, hãy dùng nền và padding để nó không chạm mép ở các icon nhỏ.
Nền trong suốt hữu ích cho dấu hiệu đơn giản, nhưng một số nền tảng có thể hiển thị khác nhau. Để ổn định, hãy chọn màu nền và kiểm tra bản xem trước 192, 48 và 32 pixel trước khi tải xuống.
Cài đặt tệp lên website
Trong hầu hết dự án, các tệp trong ZIP được đặt ở thư mục gốc cạnh /favicon.ico, và đoạn HTML được thêm vào head của template. Nếu dùng framework, đặt tệp vào thư mục public được sao chép mà không đổi tên.
Sau khi thay favicon, trình duyệt và công cụ tìm kiếm có thể vẫn hiển thị icon cũ từ cache. Hãy kiểm tra trong cửa sổ riêng tư, làm mới cache và chờ crawl lại nếu icon đã được xuất bản.