Cách sử dụng
- Chọn Chữ và nhập một hoặc hai ký tự cùng màu sắc của bạn, hoặc chọn Ảnh và tải logo lên (tốt nhất là ảnh vuông, tối thiểu 512 px).
- Kiểm tra bản xem trước ở mọi kích thước, đặc biệt là 16 và 32 px vì đây là kích thước hiển thị trên tab trình duyệt.
- Tải tệp ZIP xuống và tải các tệp bên trong lên thư mục gốc của trang web.
- Dán các thẻ HTML vào phần head của trang và chỉnh sửa tên trong site.webmanifest nếu cần.
Cách hoạt động
Trình duyệt và thiết bị tìm biểu tượng ở nhiều vị trí khác nhau. Bộ biểu tượng được tạo tại đây hỗ trợ các trường hợp phổ biến: favicon.ico chứa ảnh 16, 32 và 48 px dùng cho tab trình duyệt, dấu trang và phần mềm cũ tự động yêu cầu /favicon.ico; các tệp PNG 16 và 32 px được tham chiếu bằng thẻ link; apple-touch-icon 180 × 180 dùng khi người dùng thêm trang web vào màn hình chính của iPhone hoặc iPad; và biểu tượng 192 và 512 px được tham chiếu từ site.webmanifest để dùng trên màn hình chính Android và trong ứng dụng web có thể cài đặt.
Tệp favicon.ico lưu các biểu tượng dưới dạng ảnh PNG trong vùng chứa ICO, định dạng mà mọi trình duyệt hiện nay và Windows Vista trở lên đều có thể đọc. Các tệp ICO và ZIP được tạo bằng mã chạy trên trang này; không có dữ liệu nào được gửi lên máy chủ.
Kích thước nhỏ cần thiết kế đơn giản: ở kích thước 16 × 16 pixel, các đường nét mảnh và chữ nhỏ sẽ biến mất, vì vậy một chữ cái đậm hoặc biểu tượng logo được đơn giản hóa sẽ hiệu quả hơn logo đầy đủ có chữ. Ảnh được thu nhỏ qua một số bước chất lượng cao. apple-touch-icon luôn có màu nền đặc vì iOS hiển thị vùng trong suốt thành màu đen; iOS tự bo tròn các góc biểu tượng.
Sau khi tải biểu tượng mới lên, trình duyệt có thể vẫn hiển thị favicon cũ một thời gian do lưu bộ nhớ đệm rất lâu. Thường có thể khắc phục bằng cách tải lại trang hoàn toàn hoặc mở trực tiếp /favicon.ico.
Ví dụ
Biểu tượng chữ cho dự án mới
Nhập "TG" bằng chữ màu trắng trên nền hình vuông bo tròn màu xanh đậm để tạo biểu tượng gọn gàng, dễ đọc ngay cả ở kích thước 16 × 16 px trên tab trình duyệt mà không cần thiết kế logo.
Tạo biểu tượng từ logo có sẵn
Ảnh logo PNG 1024 × 1024 có nền trong suốt, khi chọn Vừa toàn bộ ảnh, sẽ tạo biểu tượng tab trong suốt và apple-touch-icon trên nền màu thương hiệu của bạn.
Logo ngang
Với logo dạng chữ kích thước 1200 × 300, chọn Cắt phần giữa sẽ chỉ giữ lại các chữ ở giữa. Chọn Vừa toàn bộ ảnh sẽ giữ nguyên mọi chi tiết nhưng làm ảnh rất nhỏ; biểu tượng logo vuông riêng thường sẽ đẹp hơn.
Câu hỏi thường gặp
Tôi vẫn cần favicon.ico chứ?
Tệp này vẫn hữu ích. Một số trình duyệt, trình đọc nguồn cấp dữ liệu và công cụ sẽ yêu cầu /favicon.ico ở thư mục gốc của trang web ngay cả khi không có thẻ link. Các trình duyệt hiện đại cũng dùng biểu tượng PNG được tham chiếu trong HTML.
Tôi nên đặt các tệp ở đâu?
Tải các tệp lên thư mục gốc của trang web, cùng cấp với trang chủ, để /favicon.ico và các đường dẫn khác trong HTML hoạt động. Nếu dùng thư mục con, hãy sửa đường dẫn trong thẻ link và site.webmanifest.
Tại sao favicon cũ vẫn hiển thị?
Trình duyệt lưu favicon trong bộ nhớ đệm riêng và trong thời gian dài. Hãy thử tải lại trang hoàn toàn, mở /favicon.ico trong tab mới hoặc kiểm tra bằng cửa sổ riêng tư. Đổi tên tệp, chẳng hạn thành favicon-v2.ico, cũng buộc trình duyệt tải lại.
Công cụ này có tạo favicon SVG không?
Không. Công cụ tạo tệp PNG và ICO, tương thích ở mọi nơi. Nếu đã có logo SVG, bạn có thể tự thêm bằng thẻ link có type là image/svg+xml bên cạnh các tệp này.
Quyền riêng tư
Biểu tượng, tệp ICO và ZIP được tạo ngay trong trình duyệt. Hình ảnh và văn bản của bạn không được tải lên, lưu trữ hoặc đưa vào dữ liệu phân tích.