Cách xuất favicon từ logo | Generator 16/32/180/512 PNG không cần Photoshop【2026】

Freelancer và sinh viên ở Việt Nam thường nhận file logo từ khách dưới dạng PNG ngang, PDF, hoặc ảnh screenshot có chữ đầy đủ tên công ty. Đem nguyên file đó vào generator rồi “ship” → tab trình duyệt hiện một cục mờ, hoặc icon bị kéo méo. Bài này tập trung quy trình xuất từ logo, không phải lý thuyết định dạng ICO/SVG (đã có bài riêng về bộ size 2026).

Bài viết này giúp bạn

• Chuẩn bị logo nguồn đúng trước khi generate
• Hiểu bốn size tool Kawa thực sự xuất (không phóng đại tính năng)
• Tránh lỗi: méo tỷ lệ, chữ vỡ 16px, cache cũ
• Gắn file vào dự án Vite / Astro / Next / HTML tĩnh
• Checklist bàn giao cho khách SME

---

Generator làm gì (và không làm gì)

Tạo Favicon trên Kawa nhận một ảnh (image/*), vẽ lên canvas và cho tải PNG các kích thước:

Size	File gợi ý	Dùng cho
16×16	favicon-16x16.png	Tab nhỏ, một số UI cũ
32×32	favicon-32x32.png	Tab / bookmark hiện đại (nên luôn có)
180×180	apple-touch-icon.png	iOS “Thêm vào Màn hình chính”
512×512	icon-512.png	PWA manifest, hoặc giữ làm master PNG

Không có trong tool: xuất .ico multi-layer, SVG dark-mode, crop thông minh, nền tự động xóa. Đó là giới hạn thật — đừng hứa với khách “một click ra đủ 20 format”.

Xử lý local trên trình duyệt: logo không lên server lạ. Hữu ích khi NDA hoặc brand chưa launch.

---

Bước 0 — Chuẩn bị logo (quan trọng hơn nút Upload)

Checklist nguồn

1. Vuông 1:1 — nếu logo ngang, crop symbol ở giữa hoặc pad nền trong suốt thành canvas vuông.
2. Độ phân giải — tối thiểu cạnh 512px; 1024 càng an toàn khi scale xuống.
3. Độ tương phản — symbol đủ đậm trên nền tab sáng và tối (nền PNG trong suốt thường tốt hơn nền trắng cứng).
4. Không dùng wordmark dài — “CÔNG TY TNHH ABC XYZ” không đọc được ở 16px. Xin khách icon / monogram riêng cho favicon.
5. Định dạng — PNG hoặc WebP sạch; tránh JPEG nén mạnh (viền răng cưa quanh chữ).

Vì sao ảnh không vuông bị méo?

Tool map ảnh full khung canvas vuông. Ảnh 1200×600 → bị kéo thành hình vuông. Giải pháp: crop trước trong Figma (Frame 512×512) hoặc thêm padding trong suốt hai bên để thành vuông không stretch nội dung.

---

Quy trình 5 phút với Kawa

1. Mở Favicon generator
2. Tải ảnh lên — xem ngay lưới preview 16 / 32 / 180 / 512
3. Nhìn kỹ ô 16×16 (preview được phóng để nhìn) — nếu không nhận ra brand, quay lại chỉnh logo, đừng ship
4. Click từng ô để tải favicon-{size}x{size}.png
5. Đổi tên cho dễ nhớ (đặc biệt 180 → apple-touch-icon.png) và bỏ vào public/

public/
  favicon-16x16.png
  favicon-32x32.png
  apple-touch-icon.png   ← từ 180×180
  icon-512.png           ← từ 512×512

Mẫu link tối thiểu sau khi có file:

<link rel="icon" href="/favicon-32x32.png" type="image/png" sizes="32x32" />
<link rel="icon" href="/favicon-16x16.png" type="image/png" sizes="16x16" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />

Dự án PWA thêm icons trong manifest.webmanifest trỏ icon-512.png (và 192 nếu bạn tự resize thêm). Chi tiết đặt thẻ HTML và đường dẫn: xem bài Favicon là gì / đặt đâu trong HTML.

---

So sánh cách xuất

Gợi ý thực tế VN: MVP / landing khách → generator. Brand kit lớn, nhiều sản phẩm → Figma component “Favicon / App icon” rồi mới batch export.

---

Lỗi thường gặp khi dùng generator

1) Preview 32 đẹp, tab thật vẫn mờ

Nguyên nhân hay gặp: cache favicon cực dai. Đổi query ?v=2, đổi tên file, hoặc mở cửa sổ ẩn danh. Hard refresh (Ctrl+Shift+R) đôi khi chưa đủ nếu path vẫn /favicon.ico cũ.

2) Nền trắng “hộp” trên tab tối

Logo xuất nền trắng đặc. Tab Chrome dark theme → khung trắng xấu. Xuất lại nền trong suốt; chỉ giữ symbol có màu đủ tương phản.

3) iPhone Add to Home Screen ra icon mặc định

Thiếu apple-touch-icon 180 hoặc path 404. Đảm bảo file 180 đã rename và link rel="apple-touch-icon" trỏ đúng (HTTPS production, không chỉ localhost).

4) Ship cả bốn file nhưng quên 32

Một số setup chỉ để 512 trong root rồi hy vọng trình duyệt scale — kết quả răng cưa. Luôn có PNG 32 khai báo rõ.

5) Dùng ảnh chụp màn hình logo trên web

Screenshot có anti-alias xám, shadow, và chữ UI lẫn vào. Favicon cần asset gốc từ designer, không phải crop từ hero section.

---

Case study ngắn

A) Landing quán cafe (freelancer Đà Nẵng)

Khách gửi logo chữ “Highlands-style” dài. Generate thẳng → tab không đọc được. Cắt lấy ly cafe đơn giản làm symbol, pad vuông, generate lại. Tab nhận diện được trong ~10 tab Chrome của chủ quán khi so sánh đối thủ.

B) Đồ án tốt nghiệp PWA

Sinh viên cần 192 + 512 cho manifest. Tool có 512; 192 có thể: (1) scale thủ công từ 512, hoặc (2) tạm dùng 180/512 tùy runtime chấp nhận. Quan trọng là không để icons: [] trống — Lighthouse PWA sẽ báo.

C) Outsourcing sửa site cũ

Site chỉ có /favicon.ico 16px răng cưa từ 2014. Thêm PNG 32 + apple-touch từ generator, giữ favicon.ico cũ để tool/crawler tự gọi root — giảm ticket “icon bị vỡ trên iPhone” mà không đụng toàn bộ CMS.

---

Checklist trước khi gửi PR / bàn giao

• Nguồn vuông, symbol đọc được ở preview 16
• Đã tải ít nhất 32 và 180
• File nằm đúng public/ (hoặc CDN path ổn định)
• Có link rel="icon" + apple-touch-icon nếu khách dùng iOS
• Thử tab Chrome + một lần ẩn danh
• Nếu PWA: manifest trỏ 512 (và 192 nếu bắt buộc)
• Không commit logo PSD 200MB — chỉ PNG đã xuất

---

Khi nào không dùng generator này?

• Cần SVG favicon dark-mode bằng CSS media query → làm SVG thủ công, PNG chỉ là fallback
• Cần ICO multi-resolution đóng gói một file → dùng converter ICO sau khi có PNG
• Logo phải safe-zone / mask Android adaptive phức tạp → quy trình app icon, không chỉ favicon web

Những trường hợp đó vẫn có thể bắt đầu bằng PNG 512 từ tool, rồi chuyển tiếp pipeline khác.

---

Tóm tắt quy trình nhớ một dòng

Crop vuông → generate 16/32/180/512 → đặt public/ → link trong head → xóa cache và kiểm tra tab thật.

Định nghĩa favicon và vị trí thẻ HTML chi tiết: Favicon là gì?. Bộ format ICO/PNG/SVG năm 2026: Favicon size modern browsers.