Tab trình duyệt không có favicon trông rất thiếu chuyên nghiệp — đặc biệt khi người dùng mở nhiều tab, favicon là thứ duy nhất giúp họ nhận ra tab của bạn trong rừng tab đang mở. Favicon Generator này tạo bộ favicon đầy đủ cho website từ một ảnh gốc — không cần Photoshop, không cần biết thiết kế.
Favicon là gì?
Favicon (favorite icon) là hình ảnh nhỏ đại diện cho website, xuất hiện ở nhiều nơi: tab trình duyệt, bookmarks, lịch sử duyệt web, màn hình home của điện thoại khi người dùng Add to Home Screen, và kết quả tìm kiếm Google trên mobile.
Ngày nay một website cần nhiều kích thước favicon khác nhau để hiển thị đúng trên mọi thiết bị và nền tảng:
| File | Kích thước | Dùng cho |
|---|---|---|
favicon.ico | 16×16, 32×32, 48×48 | Trình duyệt cũ, tab, bookmarks — định dạng gốc |
favicon-16x16.png | 16×16 | Tab trình duyệt hiện đại |
favicon-32x32.png | 32×32 | Tab trình duyệt Retina/HiDPI |
apple-touch-icon.png | 180×180 | iOS — Add to Home Screen, iPad |
android-chrome-192x192.png | 192×192 | Android Chrome — Add to Home Screen |
android-chrome-512x512.png | 512×512 | Android — PWA splash screen |
mstile-150x150.png | 150×150 | Windows — Start menu tile |
site.webmanifest | — | PWA manifest, Android Chrome |
Cách sử dụng
- Bước 1: Upload ảnh gốc — nên dùng ảnh vuông, tối thiểu 512×512px, nền trong suốt (PNG) hoặc nền đơn sắc.
- Bước 2: Preview xem favicon trông như thế nào ở các kích thước nhỏ.
- Bước 3: Nhấn Generate — tải về file ZIP chứa đầy đủ các kích thước và file
site.webmanifest. - Bước 4: Giải nén vào thư mục root của website và thêm các thẻ HTML được cung cấp vào
<head>.
Lưu ý khi chọn ảnh gốc
- Ảnh vuông: Favicon luôn được crop vuông — ảnh không vuông sẽ bị méo hoặc mất phần quan trọng.
- Đơn giản là tốt nhất: Ở kích thước 16×16px, chi tiết phức tạp sẽ không nhìn thấy. Logo đơn giản, chữ cái đầu, hoặc icon rõ ràng hoạt động tốt nhất.
- Kiểm tra trên nền tối và sáng: Favicon cần nhìn rõ trên cả nền sáng lẫn dark mode của trình duyệt.
Kết luận
Favicon nhỏ nhưng là chi tiết hoàn thiện không thể thiếu của một website chuyên nghiệp. Tạo đầy đủ bộ favicon một lần, cài đặt đúng cách — và không bao giờ phải lo về nó nữa.
Khám phá thêm tại codetuthub.com/tools.
0 Bình luận