Branding Tool
Favicon Generator
Một logo → Bộ 7 tệp tin Universal (5 lõi PWA + 2 SEO). Sắc nét vượt trội (Rust WASM), bảo mật tối đa (100% Client-side).
1
Cấu hình
short_name
max 12 charsname
2
Tải ảnh lên
Chọn hoặc thả logo vào đâyKhuyến khích upload ảnh PNG nền trong suốt (chưa có nền vuông) để đạt kết quả tốt nhất ở bộ file chuẩn.
3
Tải về
Xử lý 100% tại client, không tải ảnh lên máy chủ.
Bao gồm bộ 7 file chuẩn Universal (5 file cốt lõi chuẩn web, 2 file chuẩn SEO).
Xem chi tiết kiến trúc
Xem chi tiết kiến trúc
Preview
AkiTaoCircle
AkiTaoSquircle
AkiTaoRounded Square
AkiTaoiOS
AkiTaoWeb App
AkiTaoBrowser Tab
SERP / RSS48×48 Discovery
Retina UI96×96 Footer
Android / Web App
icon-512-maskable.pngiOS Home
apple-touch-icon.pngBrowser
favicon.icoHTML Snippet
index.html
Hướng dẫn tích hợp sau khi tải
- Giải nén tệp favicon.zip tải về máy.
- Copy nguyên thư mục favicon/ vào thư mục gốc (public directory / public root) của website.
- Copy thêm tệp favicon.ico từ trong thư mục favicon/ ra trực tiếp thư mục gốc (public root) để hỗ trợ trình duyệt cũ tìm thấy biểu tượng.
- Cực kỳ lưu ý: Nếu website đã có sẵn tệp manifest.json, hãy cẩn thận gộp thủ công các thông tin (icons, theme_color...) vào tệp cũ thay vì ghi đè trực tiếp để tránh mất cấu hình PWA hiện tại.
- Sao chép đoạn mã HTML Snippet dán vào thẻ <head> của tất cả các trang.
Tại sao website bắt buộc phải có Favicon & PWA chuẩn?
Sự khác biệt rõ rệt giữa website chuyên nghiệp được tối ưu và website thiếu chuẩn bị.
Không có Favicon / PWA chuẩn
- •Trình duyệt hiển thị icon quả cầu xám/trống mặc định, tạo cảm giác thiếu tin cậy và nghiệp dư.
- •Bị lỗi góc đen viền ngoài trên iOS khi lưu ra màn hình chính (do dùng ảnh trong suốt không nền).
- •Icon bị cắt lệch, méo mó hoặc hiển thị quá nhỏ trên thiết bị Android do không hỗ trợ Adaptive Maskable.
- •Không thể cài đặt thành app chạy độc lập (PWA standalone), bắt buộc phải duyệt thủ công qua tab.
Cấu hình chuẩn bởi AkiTao
- •Biểu tượng sắc nét, nhận diện thương hiệu tức thời trên tất cả tab trình duyệt và bookmark.
- •Tự động bo tròn mượt mà trên iOS với nền đục đầy đủ, triệt tiêu hoàn toàn viền đen lỗi.
- •Chống méo icon trên Android: logo nằm gọn trong 80% safe zone, tương thích mọi launcher (Tròn, Squircle).
- •Kích hoạt tính năng "Thêm vào màn hình chính", chạy mượt mà như ứng dụng native không có thanh địa chỉ.
AkiTao Favicon Generator tự động tối ưu hóa và xuất đầy đủ bộ tệp tin đáp ứng cả 2 tiêu chí trên chỉ với 1 click.
Tại sao AkiTao Favicon Generator vượt trội?
So sánh giải pháp tối ưu bằng Rust WebAssembly với các công cụ thông thường trên thị trường.
| Tiêu chuẩn | AkiTao Favicon Tool | Công cụ thông thường |
|---|---|---|
| Bảo mật dữ liệu | 100% Client-Side. Không tải ảnh lên máy chủ, chạy trực tiếp trên RAM trình duyệt. | Tải ảnh lên server. Nguy cơ rò rỉ logo nội bộ dự án. |
| Độ sắc nét biểu tượng | Nội suy Lanczos3 bằng Rust WASM. Giữ nguyên chi tiết sắc sảo ngay cả ở cỡ 16×16. | Resize bằng Canvas thông thường. Nét vẽ bị mờ, nhòe. |
| Độ tương thích di động | Tự động tính vùng an toàn 80% và phủ nền đục. Triệt tiêu lỗi viền đen iOS. | Xuất nền trong suốt. Gây lỗi viền đen trên iOS hoặc méo trên Android. |
| Tối ưu hóa mã nguồn | Chỉ xuất đúng bộ 7 file chuẩn (Zero-Bloat). Không làm nặng source code. | Xuất 30 file rác thừa thãi (Windows legacy tiles...). Làm chậm web. |
| Trải nghiệm người dùng | Không quảng cáo, không yêu cầu đăng nhập, không thu thập thông tin. | Tràn ngập quảng cáo banner, bắt đăng ký email để tải file. |
Architecture & Philosophy
Tìm hiểu triết lý thiết kế và chi tiết kỹ thuật đằng sau bộ sinh favicon siêu nhẹ.
"Nỗi đau lớn nhất của lập trình viên là sự phân mảnh và lỗi hiển thị biểu tượng trên vô vàn hệ điều hành khác nhau. Sau nhiều năm nghiên cứu chuyên sâu về PWA và UI/UX, tôi đúc kết lại nguyên tắc: Tối thiểu file - Tối đa tương thích. Bộ công cụ này ra đời để giải quyết triệt để bài toán đó chỉ với 5 file Universal duy nhất."
— Lạc Việt Anh (Founder AkiTao.com)
1. Triết lý Universal: 5 file cốt lõi + 2 SEO
| Tệp tin | Vai trò | Chi tiết |
|---|---|---|
favicon.icoSource-faithful | Tab trình duyệt + Bookmarks | Source-faithful — canvas trong suốt, bo góc tỷ lệ chuẩn, lưu đa độ phân giải. |
icon-48.pngSource-faithful | SEO & Khám phá (SERP/RSS) | Source-faithful — giữ nguyên vùng trong suốt gốc. |
icon-96.pngSource-faithful | SEO & Khám phá (Retina/Footer) | Source-faithful — giữ nguyên vùng trong suốt gốc. |
icon-192.pngSource-faithful | Icon dự phòng PWA | Source-faithful — tương thích rộng rãi cho PWA manifest. |
icon-512-maskable.pngForce-filled | Android adaptive icon + Splash | Force-filled — purpose: "maskable" phủ nền đầy đủ, logo nằm trong 80% vùng an toàn. |
apple-touch-icon.pngForce-filled | iOS home screen icon | Force-filled — nền đục phủ kín giúp tránh lỗi viền đen của iOS trên ảnh trong suốt. |
manifest.json | Cấu hình PWA | Khai báo theme_color, background_color và mục đích sử dụng icon. |
2. Triết lý Zero-Bloat
- Tự động vẽ lại vector (SVG) — Cần thư viện nặng, làm phình bundle.
- Huy hiệu đơn sắc (Monochrome badge) — Không bắt buộc đối với luồng favicon chuẩn.
- Biến thể icon cho Dark-mode — Yêu cầu các tệp tài nguyên gốc riêng biệt.
- Ảnh Open Graph (Social image) — Thuộc phạm vi chia sẻ mạng xã hội, không phải favicon.
- Legacy tiles cho Windows cũ — Giá trị thực tiễn thấp ở thời điểm hiện tại.
3. Quy trình tự động
- Giải mã dữ liệu ảnh đầu vào (PNG/JPEG) trong WASM.
- Tự động phát hiện màu chủ đạo/màu nền từ biểu đồ sắc độ pixel.
- Áp dụng căn chỉnh safe-zone và tạo màu nền đơn sắc/gradient tương ứng.
- Tạo các kích thước đầu ra bằng thuật toán nội suy Lanczos3 chất lượng cao trong WASM.
- Đóng gói file ZIP trong JS bằng fflate cùng với manifest + HTML snippet.
Toàn bộ quy trình xử lý chạy trực tiếp trên RAM trình duyệt. Hoàn toàn bảo mật.
4. Rust WebAssembly
- Rust WASM xử lý toán học pixel và mã hóa hình ảnh để đạt tốc độ tối đa.
- Đóng gói ZIP và tệp manifest thực hiện bằng JS để tránh phình WASM (không dùng serde_json trong WASM).
- Thư viện image của Rust chỉ bật tính năng PNG + JPEG để giảm thiểu kích thước bundle.
- Cấu hình tối ưu hóa release: opt-level=z, LTO, strip, và chạy wasm-opt ở luồng hậu xử lý.
- Xử lý trực tiếp trên Main thread mượt mà cho các ảnh đầu vào phổ thông (< 5 MB).
5. Bẫy bo góc & Launcher Mask
Không tự cắt tròn hay bo góc icon. Hệ điều hành sẽ tự áp dụng mặt nạ. Việc bo sẵn gây lỗi hiển thị kép và viền trắng.
6. Lỗi viền đen iOS
iOS không đọc manifest cho Web Clip. Logo có viền trong suốt sẽ bị tô đen góc. Biểu tượng iOS bắt buộc phải có nền đục phủ kín canvas.
Changelog
- 2026.06.22 — Cập nhật kiến trúc 7 file (5 lõi PWA + 2 SEO). Bổ sung tùy chọn 3D Gradient (phản chiếu ánh sáng lồi) cho icon.
- 2026.06.21 — Khởi tạo công cụ với WebAssembly (Rust). Sử dụng thuật toán nội suy Lanczos3 cho chất lượng sắc nét tuyệt đối.