Công cụ tạo favicon
Tạo favicon từ chữ cái, emoji hoặc ảnh: favicon.ico nhiều kích thước, PNG 16–512 px, Apple touch icon, web manifest và thẻ link HTML. Tất cả trong trình duyệt.
Tối đa 3 ký tự, ví dụ "A", "AK" hoặc "🚀".
Tạo favicon là gì?
Tạo trọn bộ favicon cho website từ chữ cái hoặc emoji (với màu sắc và hình dạng của bạn) hoặc từ hình ảnh. Bạn nhận được favicon.ico nhiều kích thước (16, 32 và 48 px), icon PNG cỡ 16, 32, 48, 180 (Apple touch icon), 192 và 512 px, một file site.webmanifest và các thẻ HTML <link> để dán vào <head>.
Cách sử dụng Tạo favicon
- Chọn Nguồn: Chữ hoặc emoji, hoặc Hình ảnh (ảnh vuông cho kết quả tốt nhất).
- Đặt Hình dạng, Màu nền và Màu chữ, cùng Tên ứng dụng cho manifest.
- Bấm Tải favicon.ico và tải các file PNG bạn cần từ phần xem trước.
- Sao chép HTML cho thẻ <head> và site.webmanifest, rồi đặt mọi file vào thư mục gốc của website.
Ví dụ
Text "A", Rounded, Background #4f46e5
<link rel="icon" href="/favicon.ico" sizes="48x48"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="manifest" href="/site.webmanifest">
Kèm favicon.ico (16, 32, 48 px) và sáu file PNG.
Khi nào nên dùng Tạo favicon
Dùng cho website mới, dự án cá nhân, công cụ nội bộ và trang tài liệu. Nếu logo nhiều chi tiết, hãy thiết kế phiên bản đơn giản hóa cho cỡ 16 và 32 px, vì chi tiết nhỏ sẽ biến mất ở những cỡ đó. Hãy dùng thêm favicon SVG nếu bạn muốn icon sắc nét và tự thích ứng với chế độ tối.
Tạo favicon hoạt động như thế nào
Mỗi kích thước được vẽ trên một canvas riêng: hình dạng được tô màu nền và tối đa ba ký tự được căn giữa, co giãn theo cỡ icon, hoặc ảnh được cắt vuông ở chính giữa và thu nhỏ với chế độ làm mịn chất lượng cao. Mỗi canvas được xuất thành PNG. File .ico được ghép từng byte: header ICONDIR 6 byte, mỗi kích thước một mục thư mục 16 byte (rộng, cao, 32 bpp, kích thước dữ liệu và offset) và các ảnh PNG được nhúng phía sau — định dạng PNG-trong-ICO mà mọi trình duyệt hiện nay và Windows Vista trở lên đều hỗ trợ. Apple touch icon 180 px luôn vuông và không trong suốt vì iOS tự bo góc.
Các Trường Hợp Sử Dụng Phổ Biến
- Tạo favicon chữ cái hoặc emoji cho dự án cá nhân trong vài giây
- Tạo mọi kích thước icon từ một logo vuông
- Thêm Apple touch icon và web manifest để cài lên màn hình chính
- Tạo favicon.ico nhiều kích thước thật sự cho trình duyệt cũ
Câu Hỏi Thường Gặp
Tôi có còn cần favicon.ico không?
Trình duyệt tự động yêu cầu /favicon.ico, và một số công cụ cũng như trình đọc RSS chỉ tìm ở đó, nên vẫn nên cung cấp nó cùng với các icon PNG.
Vì sao favicon của tôi không cập nhật?
Trình duyệt cache favicon rất lâu. Hãy làm mới mạnh (hard refresh), mở trực tiếp URL của icon, hoặc thêm query string phiên bản vào các thẻ link.
Ảnh của tôi có bị tải lên không?
Không. Mọi icon và file .ico đều được tạo trong trình duyệt của bạn.