CodeKitHubCông Cụ Này Là Gì?
Một favicon.ico không chỉ là một hình nhỏ — đó là một định dạng chứa, có thể lưu nhiều kích thước của cùng một biểu tượng trong một file, để trình duyệt, thanh tác vụ hoặc thanh bookmark có thể chọn độ phân giải trông sắc nét nhất cho vị trí nó đang hiển thị. Đổi tên một PNG thành favicon.ico không tạo ra điều đó: đó chỉ là một hình ảnh đơn mang sai phần mở rộng file, và dù một số trình duyệt chấp nhận, nhiều công cụ, crawler và trình duyệt cũ đọc byte thô sẽ mong đợi cấu trúc container ICO thật và sẽ lỗi hoặc quay về biểu tượng trống.
Công cụ này xây dựng một container ICO thật: nó kết xuất SVG của bạn ở 16×16, 32×32 và 48×48, mã hóa mỗi kích thước như PNG bên trong, và đóng gói cả ba vào một favicon.ico hợp lệ bằng cùng định dạng PNG-trong-ICO mà mọi trình duyệt và hệ điều hành đã hỗ trợ từ thời Windows Vista. Kèm theo đó, bạn nhận được các file PNG riêng ở 180×180 (kích thước iOS dùng cho biểu tượng khi ai đó thêm trang của bạn vào màn hình chính) và 192×192 / 512×512 (kích thước Android và các lời nhắc cài đặt PWA lấy từ web app manifest của bạn).
Tại Sao Nên Dùng?
- Tạo ra một favicon.ico đa độ phân giải thực sự hợp lệ, không phải một PNG đổi tên.
- Bao phủ mọi kích thước biểu tượng một triển khai thật cần trong một lượt: 16, 32, 180, 192, 512px.
- HTML <head> sẵn sàng dán — không cần đoán thuộc tính rel/sizes/type.
- SVG không vuông được căn giữa trên một hình vuông trong suốt thay vì bị kéo giãn.
- Mọi thứ kết xuất cục bộ trong trình duyệt của bạn; SVG không bao giờ được tải lên.
Cách Sử Dụng
- Nhấn vào ô hoặc kéo thả file logo SVG của bạn vào đó.
- Công cụ tự động kết xuất nó ở mọi kích thước favicon — không cần cài đặt gì.
- Tải xuống favicon.ico cho thư mục gốc trang web của bạn, cùng các biểu tượng PNG riêng lẻ.
- Sao chép đoạn HTML và dán vào <head> của trang bạn.
Ví dụ
Đầu vào
logo.svg — một biểu tượng công ty, vector 3 KBĐầu ra
favicon.ico (16/32/48px kết hợp), cùng favicon-16.png, favicon-32.png, apple-touch-icon.png (180px), icon-192.png, icon-512.pngMột SVG đầu vào, mọi file biểu tượng một triển khai thật cần, đầu ra.
Kích thước biểu tượng nào dùng ở đâu
| File | Kích thước | Dùng cho |
|---|---|---|
| favicon.ico | 16/32/48px (kết hợp) | Tab trình duyệt, thanh bookmark, thanh tác vụ |
| favicon-16.png / favicon-32.png | 16×16 / 32×32 | Dự phòng cho trình duyệt ưu tiên favicon PNG |
| apple-touch-icon.png | 180×180 | Biểu tượng màn hình chính iOS khi trang được thêm vào Màn hình chính |
| icon-192.png | 192×192 | Biểu tượng màn hình chính Android, web app manifest |
| icon-512.png | 512×512 | Lời nhắc cài đặt PWA, biểu tượng màn hình chờ Android |
Vì sao nguồn SVG quan trọng
Vì SVG lưu hình dạng dưới dạng toán học thay vì pixel, việc kết xuất mới ở 16px và ở 512px đều bắt đầu từ đúng cùng dữ liệu đường path — không có hiện tượng phóng to bị vỡ ở đầu lớn và không có phỏng đoán ép pixel bắt buộc phải thỏa hiệp ở đầu nhỏ. Nếu bạn chỉ có logo dạng PNG, công cụ này không giúp được; hãy chuyển đổi hoặc tạo lại logo dưới dạng SVG trước, vì phóng to một PNG nhỏ lên 512px sẽ chỉ cho ra kết quả mờ.
Câu Hỏi Thường Gặp
Sao không đổi tên một PNG thành favicon.ico?
File .ico có định dạng container nhị phân riêng (một header ICONDIR mô tả nó chứa bao nhiêu hình ảnh, theo sau là một mục thư mục cho mỗi hình) — một file PNG đổi tên thành .ico vẫn chỉ là PNG với sai phần mở rộng bên trong. Hầu hết trình duyệt hiện đại khá dễ tính và vẫn kết xuất nó, nhưng công cụ này xây dựng một container ICO thật chứa ba độ phân giải thực sự, đúng như định dạng được thiết kế để làm và những gì trình đọc nghiêm ngặt hơn mong đợi.
Tại sao tôi cần biểu tượng PNG nếu đã có favicon.ico?
favicon.ico chỉ bao phủ trường hợp sử dụng cổ điển tab trình duyệt/bookmark. PNG 180×180 là thứ iOS dùng khi người dùng thêm trang của bạn vào màn hình chính (apple-touch-icon), và PNG 192×192 / 512×512 là thứ Android và lời nhắc cài đặt PWA lấy từ web app manifest của bạn. Không có chúng, biểu tượng của bạn trên màn hình chính điện thoại sẽ quay về ảnh chụp màn hình chung chung hoặc ô vuông trống.
Logo của tôi không vuông — chuyện gì xảy ra với nó?
Nó được căn giữa trên một hình vuông trong suốt ở mỗi kích thước mục tiêu thay vì bị kéo giãn, nên một logo rộng hoặc cao vẫn giữ tỷ lệ đúng thay vì bị ép méo thành hình vuông.
Tôi đặt các file đã tải xuống ở đâu?
Đặt favicon.ico, apple-touch-icon.png, icon-192.png và icon-512.png trong thư mục gốc trang web của bạn (cạnh index.html), sau đó dán các thẻ <link> đã tạo vào <head> của trang.
SVG của tôi có được tải lên đâu không?
Không. SVG được kết xuất lên các phần tử <canvas> cục bộ và các file ICO/PNG được lắp ráp trong trình duyệt của bạn. Không có gì được gửi đến máy chủ.