Cách dùng Tạo Favicon
- Chọn Chữ / emoji rồi nhập một chữ cái hoặc chọn một emoji, hoặc chuyển sang Ảnh và kéo logo của bạn vào (SVG hoặc PNG vuông từ 512 px trở lên là tốt nhất).
- Điều chỉnh màu sắc, cỡ chữ, khoảng đệm và độ bo góc, đồng thời xem bản xem trước tab trình duyệt ở đúng kích thước thực 16 px.
- Nhập tên website và màu chủ đề cho web manifest.
- Nhấn Tải tất cả (ZIP), tải các file lên thư mục gốc của website và dán đoạn HTML vào
<head>. Với Webflow, hãy tải favicon 32×32 và webclip 256×256 lên trong phần Site settings. - Vào Site settings → General rồi tải lên favicon và webclip trong mục Favicon & Webclip.
Favicon là gì?
Favicon là biểu tượng nhỏ mà trình duyệt hiển thị trên thẻ tab, dấu trang và lịch sử, và cũng là biểu tượng Google hiển thị bên cạnh tên website trong kết quả tìm kiếm trên di động và máy tính. Điện thoại còn dùng các phiên bản lớn hơn khi người dùng thêm website vào màn hình chính. Một bộ favicon đầy đủ ngày nay khá gọn: một file ICO cho yêu cầu /favicon.ico mặc định và các trình duyệt cũ, một file PNG cho trình duyệt hiện đại, một Apple touch icon, hai icon Android/PWA được khai báo trong web app manifest, và tùy chọn thêm một file SVG.
Công cụ này tạo ra những gì
| Tệp | Kích thước | Được dùng bởi |
|---|---|---|
favicon.ico | 16, 32, 48 px trong một file | Mọi trình duyệt, lối tắt trên Windows và các công cụ gọi trực tiếp /favicon.ico |
favicon-32x32.png | 32 × 32 | Tab trình duyệt hiện đại; kích thước Webflow yêu cầu |
apple-touch-icon.png | 180 × 180 | Màn hình chính của iPhone/iPad và Safari |
android-chrome-192x192.png, -512x512.png | 192, 512 | Màn hình chính Android, cài đặt PWA và màn hình chờ |
webclip-256x256.png | 256 × 256 | Cài đặt Webclip của Webflow |
site.webmanifest | JSON | Tên, màu sắc và danh sách icon cho website có thể cài đặt |
File ICO được tạo trực tiếp trên trình duyệt của bạn: một phần đầu ICO nhỏ và bảng mục lục, theo sau là ba ảnh PNG nén, định dạng mà mọi trình duyệt và phiên bản Windows hiện nay đều đọc được. Không có dữ liệu nào được tải lên.
Các thực hành tốt cho favicon
- Thiết kế cho 16 px. Chi tiết nhỏ và từ dài sẽ biến mất ở kích thước tab. Một chữ cái đậm, một ký hiệu đơn giản hoặc một emoji dễ nhận diện hơn nhiều so với logo đầy đủ kèm slogan.
- Apple touch icon phải không trong suốt. iOS tự bo góc và tô nền đen cho các điểm ảnh trong suốt, nên công cụ này luôn xuất icon 180 px (và webclip Webflow) thành hình vuông đầy đủ với nền đặc.
- Kiểm tra chế độ tối. Logo tối trên nền trong suốt sẽ biến mất trên tab tối của trình duyệt. Phần xem trước hiển thị cả hai giao diện. Nếu cần, hãy thêm màu nền hoặc khoảng đệm.
- Google Search yêu cầu favicon hình vuông có thể được thu thập dữ liệu và khuyến nghị kích thước lớn hơn 48×48 px, vì vậy đoạn mã cũng liên kết tới PNG 192 px. Thay đổi có thể mất vài ngày mới xuất hiện trong kết quả tìm kiếm.
- Bộ nhớ đệm: trình duyệt lưu favicon vào bộ nhớ đệm rất mạnh. Nếu bạn thay đổi favicon, hãy thử trong cửa sổ ẩn danh hoặc thêm tham số phiên bản như
/favicon.ico?v=2.
Thêm favicon trong Webflow
Mở Site settings → General rồi cuộn xuống mục Favicon & Webclip. Tải lên ảnh 32×32 px làm favicon và ảnh 256×256 px làm webclip (dùng làm Apple touch icon), lưu lại rồi xuất bản website. Webflow sẽ tự tạo các thẻ <link>, nên bạn không cần đoạn HTML hay manifest trừ khi tự thêm bằng mã tùy chỉnh. Để kiểm tra những gì đang hiển thị sau khi xuất bản, hãy dùng Meta Tag Checker, công cụ này báo cáo các thẻ favicon và Apple touch icon.
Cũng được tìm dưới tên: favicon, favicon generator, favicon.ico, chuyển png sang ico, apple touch icon, site.webmanifest, favicon emoji, webclip.
Các công cụ dùng kèm tốt với Tạo Favicon
- Tạo PWA Manifest & Service Worker — Biến bất kỳ website nào thành PWA có thể cài đặt.
- Đổi kích thước ảnh — Đổi ảnh về đúng kích thước pixel hoặc theo phần trăm, cắt ảnh theo kích thước mạng xã hội, hoặc đưa ảnh vừa khung kèm màu nền.
- Trình Tạo Ảnh OG — Tạo ảnh xem trước liên kết đẹp mắt cho Facebook, LinkedIn, X, Slack và WhatsApp chỉ trong vài giây.
- Công cụ tạo Meta Tag — Điền một biểu mẫu và nhận ngay một <head> đầy đủ, hợp lệ: tiêu đề, mô tả, canonical, robots, Open Graph, thẻ X/Twitter, màu theme và icon.
Câu hỏi thường gặp
Favicon nên có kích thước bao nhiêu?
favicon.ico 48×48 (hoặc nhiều kích thước 16/32/48), PNG 32×32, Apple touch icon 180×180 và PNG 192×192 cùng 512×512 cho Android. Công cụ này tạo tất cả từ một ảnh nguồn.Tôi có còn cần file favicon.ico không?
/favicon.ico từ thư mục gốc của website ngay cả khi không có thẻ <link>, nên giữ file này sẽ tránh lỗi 404 và icon bị thiếu.Webflow yêu cầu favicon kích thước nào?
favicon-32x32.png và webclip-256x256.png trong file ZIP.Tôi có thể dùng emoji làm favicon không?
Vì sao favicon mới của tôi không hiển thị?
?v=2) vào URL của icon. Google Search có thể mất vài ngày hoặc vài tuần để thu thập lại.