Tạo favicon cho mọi trình duyệt và thiết bị
Công cụ tạo favicon này biến một ảnh thành tất cả các tệp favicon mà một website cần — tệp favicon.ico nhiều kích thước, các PNG riêng từ 16×16 đến 512×512, một Apple Touch Icon và một manifest PWA. Tải lên logo hoặc hình ảnh, tinh chỉnh diện mạo rồi tải về một gói dùng được ngay.
Công cụ dành cho bất kỳ ai đang xây dựng website: lập trình viên, nhà thiết kế, blogger và chủ doanh nghiệp nhỏ muốn có một icon sắc nét trên tab trình duyệt mà không phải tự tay đổi kích thước và chuyển định dạng cho từng cỡ. Định dạng nguồn gồm PNG, JPG, SVG, WebP và GIF, và bạn có thể tạo hình, thêm khoảng đệm và đổi màu cho icon trước khi xuất.
Cách tạo một favicon
Tải ảnh của bạn lên
Nhấn vào vùng tải lên hoặc kéo thả một tệp. Hỗ trợ PNG, JPG, SVG, WebP và GIF. Để có kết quả sắc nét nhất, hãy dùng ảnh vuông kích thước ít nhất 512×512 pixel.
Tùy chỉnh diện mạo
Chọn Hình dạng — Vuông, Bo góc hoặc Tròn — chọn nền Trong suốt hoặc Màu đặc, và kéo thanh trượt Khoảng đệm (0–40%) để icon có khoảng trống thoáng đãng.
Xem trước mọi kích thước
Lưới xem trước hiển thị favicon của bạn ở từng kích thước chuẩn, và bản mô phỏng tab trình duyệt cho thấy chính xác nó trông ra sao trên một tab thật. Mọi thứ cập nhật ngay lập tức khi bạn điều chỉnh thiết lập.
Tải về thứ bạn cần
Lấy favicon.ico (16/32/48), một PNG 32×32 riêng, icon Apple Touch 180×180, hoặc dùng Tải tất cả để có một tệp ZIP gồm mọi kích thước cùng HTML và một manifest.
Tính năng
Tải lên bằng kéo thả
Thả một ảnh hoặc dùng bộ chọn tệp. Nhận tệp nguồn PNG, JPG, SVG, WebP và GIF.
Tùy chọn hình dạng
Chọn Vuông cho favicon cổ điển, Bo góc cho góc mềm mại, hoặc Tròn cho icon kiểu ứng dụng.
Nền & khoảng đệm
Giữ nền trong suốt hoặc đặt một màu đặc, rồi điều chỉnh khoảng đệm từ 0% đến 40%.
Mô phỏng tab trình duyệt trực tiếp
Thấy chính xác favicon của bạn hiển thị ra sao trên một tab trình duyệt thật, cập nhật ngay khi bạn chỉnh thiết lập.
Xem trước ở 8 kích thước
Kiểm tra icon ở 16, 32, 48, 64, 128, 180, 192 và 512 pixel trước khi tải về.
Xuất ICO & PNG
Xuất favicon.ico nhúng sẵn 16/32/48, một PNG 32×32 riêng, hoặc icon Apple Touch 180×180.
Gói ZIP hoàn chỉnh
Tải tất cả đóng gói favicon.ico, cả 8 kích thước PNG, HTML dán được ngay và một site.webmanifest.
Sẵn sàng cho Apple & PWA
Bao gồm apple-touch-icon và một manifest với icon 192 và 512 hỗ trợ Android cùng PWA.
Riêng tư & ngoại tuyến
Mọi thao tác đổi kích thước và chuyển đổi đều chạy trên trình duyệt — ảnh không bao giờ được tải lên và không có gì bị theo dõi.
Câu hỏi thường gặp
Favicon nên có kích thước bao nhiêu?
Hãy bắt đầu từ một ảnh vuông ít nhất 512×512 pixel để ngay cả bản xuất lớn nhất cũng sắc nét. Bản thân icon trên tab trình duyệt thường là 16×16 và 32×32, nhưng các website hiện đại còn dùng 48×48, một Apple Touch Icon 180×180, và 192×192 / 512×512 cho Android và PWA. Công cụ này tạo tất cả chúng từ một ảnh duy nhất của bạn.
Làm sao để tạo một favicon.ico?
Tải ảnh của bạn lên, chỉnh hình dạng, nền và khoảng đệm, rồi nhấn tải ICO. Công cụ dựng một tệp favicon.ico duy nhất nhúng sẵn các phiên bản 16×16, 32×32 và 48×48 — đây là định dạng cổ điển mà trình duyệt tìm ở thư mục gốc của website.
Có thể tạo favicon từ PNG hoặc SVG không?
Có. Bạn có thể tải lên một tệp PNG, JPG, SVG, WebP hoặc GIF làm nguồn. Một PNG độ phân giải cao hoặc một SVG vector cho kết quả sạch nhất vì nó thu nhỏ xuống các cỡ nhỏ mà không bị mờ. Ảnh không vuông sẽ được căn vừa và canh giữa trong khi vẫn giữ đúng tỉ lệ khung hình.
Favicon dạng ICO và PNG khác nhau thế nào?
ICO là định dạng favicon truyền thống chứa nhiều kích thước trong một tệp và được trình duyệt hỗ trợ sẵn. Favicon PNG là các tệp riêng được tham chiếu theo từng kích thước bằng thẻ link HTML. Để tương thích rộng nhất, hãy dùng cả hai: một favicon.ico làm phương án dự phòng cộng thêm các PNG cho trình duyệt hiện đại — gói Tải tất cả đã gộp sẵn chúng lại với nhau.
Làm sao để thêm favicon vào HTML của tôi?
Đặt các tệp favicon đã tải về vào thư mục gốc của website, rồi dán các thẻ link vào <head> của trang. Tệp ZIP Tải tất cả có sẵn một tệp favicon-usage.html chứa đúng các thẻ <link> cho icon, Apple Touch Icon và manifest, để bạn sao chép thẳng vào.
Nên chọn hình dạng nào?
Vuông là diện mạo chuẩn cho hầu hết website. Bo góc tạo các góc mềm cho cảm giác hiện đại, thân thiện, còn Tròn hợp với icon kiểu ứng dụng, nhất là cho PWA hoặc màn hình chính trên di động. Lưới xem trước cho phép bạn so sánh từng hình dạng với logo trước khi xuất.
Có thể dùng nền trong suốt không?
Có — trong suốt là mặc định và hợp với logo hiển thị trên các nền trang khác nhau. Một số nền tảng, chẳng hạn iOS, đặt một bảng nền trắng hoặc đen phía sau icon trong suốt, nên nếu đang tạo Apple Touch Icon bạn có thể muốn đặt một màu nền đặc.
Chưa có bình luận nào. Hãy là người đầu tiên!