Tóm tắt (TL;DR)
- Thiết kế nhanh: Không cần logo có sẵn. Tạo icon chuyên nghiệp từ chữ cái viết tắt hoặc Emoji.
- Xem trước trực tiếp: Thấy ngay favicon hiển thị ra sao trên trình duyệt (Light/Dark mode) và tab bar.
- Trọn bộ cài đặt: Tải file
favicon.zipchứa đầy đủfavicon.ico, PNG độ phân giải cao và mã HTML cần thiết.
Khi nào nên dùng tool này?
Công cụ này dành cho việc sáng tạo.
- Dùng tool này nếu bạn chưa có logo, hoặc muốn một icon tối giản, dễ đọc (ví dụ: chữ “G” của Google, “F” của Facebook).
- Dùng Converter nếu bạn ĐÃ CÓ file ảnh logo (PNG/JPG) và chỉ muốn chuyển đổi nó.
Favicon dạng chữ hoặc Emoji rất phù hợp cho blog cá nhân, portfolio hoặc các dự án startup vì tính đơn giản, dễ nhận diện.
Bí quyết thiết kế Favicon (Design Tips)
Nguyên tắc vàng là Tính dễ đọc. Bạn đang design cho một ô vuông cực nhỏ (chỉ 16x16 pixels).
- Độ tương phản cao: Chữ sáng trên nền tối (hoặc ngược lại). Tránh các màu nhạt hoặc gradient quá nhẹ.
- Đơn giản hoá: Đừng cố nhét cả tên “My Awesome Website” vào. Chỉ dùng 1-2 ký tự đầu (vd: “MA”).
- Font chữ đậm: Nét chữ mảnh sẽ bị mất khi thu nhỏ. Hãy dùng chế độ Bold/Extra Bold.
- Tận dụng diện tích: Phóng to chữ hết mức có thể. Khoảng trắng thừa là lãng phí pixel.
Trọn bộ Favicon gồm những gì?
Khi bạn nhấn Download, bạn sẽ nhận được một gói chuẩn web (Web Package):
favicon.ico: File chứa đa kích thước (16/32/48px) cho trình duyệt Desktop.icon-192.png&icon-512.png: Icon chuẩn cho Android Homescreen và PWA.apple-touch-icon.png: Icon 180x180 dành riêng cho iPhone/iPad (Add to Home Screen).site.webmanifest: File JSON khai báo thông tin ứng dụng cho Android.
Hướng dẫn cài đặt
- Giải nén file zip và upload toàn bộ vào thư mục gốc (root) của website.
- Copy đoạn mã HTML được cung cấp.
- Dán vào trong thẻ
<head>của trang web.
Câu hỏi thường gặp (FAQ)
Tôi có thể dùng emoji cho thương hiệu không?
Được. Các emoji này được render từ font hệ thống hoặc open-source. Khi đã xuất ra thành ảnh PNG/ICO, bạn có quyền sử dụng nó như một phần nhận diện thương hiệu.
Tại sao preview khác với tab của tôi?
Mỗi trình duyệt (Chrome, Edge, Safari) có cách render tab hơi khác nhau một chút về bo góc hoặc màu nền. Preview của chúng tôi mô phỏng hiển thị chuẩn nhất.
Có nên dùng nền trong suốt (Transparent) không?
Với favicon dạng chữ/emoji, chúng tôi khuyên dùng nề đặc (Solid Background) hình vuông hoặc tròn. Nền trong suốt có thể khiến chữ của bạn bị “tàng hình” nếu màu chữ trùng với màu theme của trình duyệt (ví dụ: chữ đen trên trình duyệt Dark Mode).