Favicon hiện đại cần nhiều hơn một ảnh 16×16 đơn lẻ. Trình duyệt, thiết bị di động, và Progressive Web App đều yêu cầu size, format, và metadata khác nhau. Tool này tạo bộ favicon đầy đủ trong một bước — không cần đăng ký, toàn bộ xử lý trong trình duyệt.
Những file bạn nhận được
- favicon.ico — container multi-size (16, 32, 48) cho legacy và tab fallback
- favicon.svg — vector scalable cho trình duyệt hiện đại (khi nguồn hỗ trợ)
- favicon-16x16.png + favicon-32x32.png — PNG độc lập cho trình duyệt thích file riêng
- apple-touch-icon.png (180×180) — icon iOS home screen
- android-chrome-192x192.png + android-chrome-512x512.png — Android Chrome
- icon-192-maskable.png + icon-512-maskable.png — PWA maskable với safe-area padding
- site.webmanifest — PWA manifest với name, theme color, icons, display mode
- HTML snippet — thẻ
<link>và<meta>paste sẵn vào<head>của bạn
Cách dùng
- Chọn nguồn — upload ảnh, gõ 1–3 ký tự, dán một emoji, hoặc vẽ từng pixel.
- Cấu hình — chọn nền, theme color, safe-area cho maskable, và chi tiết PWA manifest.
- Preview — xem favicon trên tab trình duyệt, iOS home, Android adaptive, PWA splash.
- Tải — nhận ZIP với mọi file, và copy HTML snippet dán vào
<head>của site.
Bốn loại nguồn
- Ảnh — kéo thả PNG, JPG, WebP, SVG, hoặc GIF. Cropper giúp chọn vùng vuông chính xác.
- Chữ — gõ 1–3 ký tự (ví dụ chữ cái đầu của brand). Chọn font web-safe, độ đậm, màu, italic.
- Emoji — dán một emoji. Slider chỉnh tỷ lệ phủ canvas.
- Vẽ — vẽ grid 32×32 pixel với cọ, tẩy, đổ màu, undo/redo, và bảng màu. Phù hợp pixel-art retro.
Best practice favicon hiện đại (2026)
Bộ favicon chuẩn 2026 gồm .ico multi-size (cho legacy), SVG vector (cho trình duyệt hiện đại + dark mode), maskable PWA icon (cho Android adaptive), và site.webmanifest với theme_color rõ ràng. Hướng dẫn cũ phải ship 20+ size khác nhau đã lỗi thời từ iOS 12+ vì iOS tự scale apple-touch-icon.png, và Microsoft tile chỉ phục vụ legacy Edge.
SVG favicon có thể chứa rule @media (prefers-color-scheme: dark) để icon tự đổi theo theme hệ thống. Safari, Chrome, Firefox hiện đại đều hỗ trợ.
Cài đặt HTML
Đặt mọi file ở thư mục gốc site (để truy cập được tại /favicon.ico, /apple-touch-icon.png, /site.webmanifest, v.v.). Sau đó paste snippet vào trong <head> của trang. Snippet khai báo từng variant để trình duyệt tự chọn cái phù hợp nhất.
Nếu favicon không update sau khi deploy, thêm query cache-busting như ?v=2 vào URL trong snippet — trình duyệt cache favicon rất hung.
Câu hỏi thường gặp
- Favicon kích thước bao nhiêu là chuẩn?
- Một bộ favicon đầy đủ năm 2026 gồm nhiều size: 16×16 và 32×32 cho tab trình duyệt, 48×48 cho shortcut Windows cũ (cả ba đóng gói vào favicon.ico), 180×180 cho iOS home, cộng 192×192 và 512×512 PNG cho Android Chrome và PWA.
- Năm 2026 có còn cần file .ico không?
- Có. Dù trình duyệt hiện đại ưu tiên SVG và PNG, file .ico vẫn là fallback mặc định mà mọi trình duyệt — kể cả phiên bản cũ — đều nhận. Có favicon.ico nghĩa là site bạn luôn có favicon hoạt động.
- Maskable icon là gì và tại sao PWA cần?
- Android adaptive icon có thể bị crop thành hình tròn, vuông bo, hoặc squircle tuỳ theme launcher. Maskable icon chừa vùng safe-area bên trong để launcher crop mép ngoài mà không cắt mất logo. Không có maskable, icon của bạn có thể trông kỳ trên một số máy Android.
- Có dùng emoji làm favicon được không?
- Được. Chọn tab Emoji, dán một emoji, tool sẽ rasterize ra mọi size cần. Lưu ý emoji hiển thị khác nhau giữa các HĐH — favicon nhúng emoji của máy bạn dưới dạng raster, nên những gì bạn thấy là những gì user thấy.
- Đặt các file favicon ở đâu trên site?
- Đưa tất cả file (favicon.ico, các PNG, favicon.svg, site.webmanifest) vào thư mục gốc site để chúng truy cập được tại /favicon.ico, /apple-touch-icon.png, v.v. Sau đó dán HTML snippet vào trong thẻ <head> của trang.
- favicon.ico và favicon.svg khác nhau thế nào?
- favicon.ico là định dạng raster đóng nhiều PNG vào một file. favicon.svg là vector scalable, hiển thị nét ở mọi size và hỗ trợ dark-mode. Trình duyệt hiện đại ưu tiên SVG khi có cả hai.
- Cách add favicon vào Next.js / React / WordPress?
- Với Next.js (App Router) bỏ file vào /public và dán snippet vào metadata trong root layout. Với Create React App, bỏ vào /public và sửa public/index.html. Với WordPress, upload qua theme customizer hoặc thêm snippet vào header.php của theme.
- Tại sao favicon không hiển thị sau khi add?
- Trình duyệt cache favicon rất hung. Hard-refresh bằng Cmd/Ctrl+Shift+R, hoặc thêm query cache-busting như ?v=2 vào URL favicon. Thiết bị mobile có thể mất một ngày mới update.