Ưu tiên SVG hoặc ảnh ≥512px
Vector cho mọi cỡ đều sắc; raster thì cần đủ lớn để icon 512 (PWA) không mờ.
logo.svg · hoặc logo-512x512.pngBộ công cụSEO & AI
Tạo favicon online: từ một logo ra trọn bộ icon cho website
Kéo một ảnh logo vào — công cụ tạo favicon.ico, apple-touch-icon và bộ PNG cho manifest, kèm đoạn <head> dán sẵn. Ảnh xử lý ngay trong trình duyệt.
phiên bản 1.0.0
Chưa chạy
0%Điền thông tin bên trái rồi bấm Chạy công cụ.
Tóm tắt nhanh
Công cụ này là gì
Tạo favicon online là công cụ nhận một ảnh logo rồi tạo trọn bộ favicon cho website — favicon.ico, apple-touch-icon và bộ PNG cho web manifest — cùng đoạn thẻ <head> dán sẵn, xử lý hoàn toàn trong trình duyệt.
- Kéo một logo vào, công cụ tạo bộ favicon tinh gọn: favicon.ico (16/32/48), favicon PNG 16/32, apple-touch-icon 180, icon 192/512 cho manifest.
- Toàn bộ resize và đóng gói .ico/.zip chạy NGAY trong trình duyệt — không byte ảnh nào được gửi đi đâu; mở tab Network mà xem.
- Kèm sẵn đoạn thẻ <link> cho <head> và file site.webmanifest, dán là chạy — không phải tự viết.
- Nguồn tốt nhất là ảnh vuông ≥512px hoặc SVG; ảnh nhỏ hơn vẫn tạo được nhưng icon 512 (dùng cho PWA) sẽ hơi mờ.
Cập nhật: 09/2026
| Mục | Giá trị |
|---|---|
| Công cụ | Tạo favicon online: từ một logo ra trọn bộ icon cho website |
| Nhóm | SEO & AI |
| Chi phí | Miễn phí |
| Cần tài khoản | Không |
| Lưu kết quả | Không lưu |
| Nhà phát hành | MONA Media |
| Phiên bản | 1.0.0 |
| Cập nhật | 09/2026 |
| Nhập vào | Một ảnh logo (PNG/SVG/JPG) |
| Trả ra | Bộ favicon + đoạn <head> + site.webmanifest |
| Số request tới server | Không — xử lý trong trình duyệt |
| Lưu gì | Không lưu gì; không gửi ảnh đi đâu |
| Nguồn tốt nhất | Ảnh vuông ≥512px hoặc SVG |
Cách hoạt động
Cách tạo bộ favicon từ một logo
Kéo một logo vào, công cụ tạo bộ favicon tinh gọn: favicon.ico (16/32/48), favicon PNG 16/32, apple-touch-icon 180, icon 192/512 cho manifest.
- 1Bạn làm
Kéo ảnh logo vào
Chọn ảnh logo — tốt nhất là ảnh vuông ≥512px hoặc file SVG để mọi cỡ đều nét. Ảnh được đọc ngay trong trình duyệt, không tải lên đâu cả.
1
ảnh nguồn. Không cần tài khoản.
- 2Chúng tôi làm
Tạo từng cỡ ngay trong máy bạn
Trình duyệt vẽ logo vào từng khung vuông (giữ trọn logo trên nền trong suốt), nhồi 16/32/48 vào favicon.ico, và đóng gói cả bộ thành một file .zip.
6
file icon + site.webmanifest, gói trong một .zip.
- 3Bạn nhận
Tải về và dán đoạn <head>
Xem trước icon ở cỡ 16px thật (như trên tab), tải cả bộ, rồi đặt các file vào thư mục gốc website và dán đoạn thẻ <link> đã có sẵn.
.zip
một lần tải, có ngay đoạn <head> và manifest kèm theo.
Khác biệt
Tạo bộ icon, và ảnh không rời khỏi máy bạn
Công cụ kiểm tra favicon đo favicon một website đã có. Cái này làm việc ngược lại: tạo một bộ mới từ logo của bạn — và làm ngay trong trình duyệt.
Phần lớn trình tạo favicon online tải ảnh của bạn lên máy chủ họ rồi trả bộ icon về. Công cụ này không: createImageBitmap giải mã ảnh, một canvas thu từng cỡ, và trình duyệt tự nhồi favicon.ico rồi nén thành .zip. Logo của bạn không rời khỏi máy — mở tab Network mà kiểm, lượt gọi duy nhất chỉ mang theo vài con số đo.
Bộ icon cố tình tinh gọn. Một thời người ta khai hai chục file favicon cho đủ mọi thiết bị; giờ là thừa. Bộ ở đây theo hướng dẫn hiện đại: một favicon.ico đa cỡ cho tab và trình duyệt cũ, hai PNG 16/32 cho màn hình nét, một apple-touch-icon 180px cho iPhone, và 192/512 cho web manifest (PWA/Android).
Giữ trọn logo, không cắt. Công cụ vẽ logo theo kiểu "contain" — thu vừa khung vuông và thêm nền trong suốt nếu ảnh không vuông — nên chữ hay hình ở mép không bị cắt mất. Muốn logo lấp đầy khung thì cắt ảnh vuông trước khi kéo vào.
Bộ gồm gì
Sáu file, mỗi file một chỗ dùng
Không phải bộ hai chục file kiểu cũ — đây là tập tối thiểu mà mọi trình duyệt và thiết bị hiện nay cần.
| File | Dùng ở đâu |
|---|---|
favicon.ico | Tab trình duyệt và trình duyệt cũ. Chứa sẵn 16, 32, 48px trong một file. |
favicon-16x16.png | Tab ở độ phân giải thường. |
favicon-32x32.png | Tab trên màn hình nét (retina). |
apple-touch-icon.png | Icon khi thêm trang vào màn hình chính iPhone/iPad (180px). |
icon-192.png | Android và PWA — khai trong site.webmanifest. |
icon-512.png | Màn hình khởi động PWA — cỡ lớn nhất trong manifest. |
site.webmanifest đi kèm khai icon 192/512 cho Android/PWA. Đặt tất cả vào thư mục gốc website rồi dán đoạn <link> đã có sẵn vào <head>.
Hiểu nhầm thường gặp
Bốn điều tưởng đúng về favicon
Đây là bốn nhầm lẫn hay làm favicon hiện sai hoặc thiếu.
Bạn nghĩ
Thực tế
- “Chỉ cần một file favicon.ico là đủ.”
iPhone và PWA cần PNG riêng.
favicon.ico lo cho tab và trình duyệt cũ, nhưng iPhone dùng apple-touch-icon.png (180px) khi thêm vào màn hình chính, và Android/PWA đọc icon 192/512 từ manifest. Thiếu chúng thì icon hiện mờ hoặc trống trên các nơi đó.
- “favicon.ico đã lỗi thời, giờ chỉ cần PNG.”
favicon.ico vẫn là lớp đỡ chắc nhất.
Nhiều trình duyệt và công cụ vẫn dò /favicon.ico mặc định ngay cả khi không khai. Một .ico đa cỡ ở thư mục gốc là mặc định an toàn — nên bộ này vẫn giữ nó, cùng với PNG hiện đại.
- “Ảnh nhỏ phóng to lên là được.”
Phóng to raster thì mờ.
Một logo 64px kéo lên 512 sẽ vỡ nét ở icon lớn (PWA). Nguồn tốt nhất là ảnh vuông ≥512px, hoặc SVG — vector cho mọi cỡ đều sắc. Công cụ báo trước nếu nguồn quá nhỏ.
- “Logo chữ nhật cứ để nguyên cũng được.”
Khung favicon là hình vuông.
Icon hiển thị trong ô vuông. Logo ngang bị thu nhỏ giữa khung với nhiều khoảng trống hai bên, nhìn lọt thỏm. Với favicon nên dùng phiên bản biểu tượng vuông của logo, không phải logo chữ nằm ngang.
Thường gặp
Bốn mẹo để favicon nét và đúng
Rút từ chính cách công cụ xử lý ảnh.
Giữ nền trong suốt
Xuất logo nền trong suốt (PNG/SVG) để icon hoà vào mọi màu tab, không có ô trắng thừa.
PNG có alpha · không nền trắng bệtDùng biểu tượng vuông
Favicon là ô vuông nhỏ — dùng phần biểu tượng của logo, đừng dùng logo chữ nằm ngang.
▢ biểu tượng ✗ logo chữ dàiĐặt file ở thư mục gốc
favicon.ico và các PNG nên nằm ở gốc website (/), rồi dán đoạn <link> đã có sẵn.
/favicon.ico
/apple-touch-icon.png
/site.webmanifestRanh giới
Sau đây thì kiểm gì
Mỗi công cụ trả lời một câu hỏi khác nhau. Đây là câu hỏi kế tiếp, và vì sao nó là kế tiếp.
Cặp tạo/kiểm: trang này tạo bộ favicon mới, trang kia tải favicon một site đang chạy về đo (vuông, 48px, soft-404).
Kiểm tra favicon của một websiteCùng xử lý ảnh ngay trong trình duyệt không gửi đi đâu; bên kia có sẵn preset 512×512 làm nguồn cho favicon.
Nén ảnh chuẩn SEOCùng mảng ảnh thương hiệu: favicon là icon nhỏ cạnh tên tab, og:image là ảnh lớn khi chia sẻ link.
Kiểm tra thẻ Open Graphapple-touch-icon phục vụ khi thêm trang vào màn hình chính iPhone — cùng nhóm trải nghiệm trên điện thoại.
Kiểm tra thân thiện điện thoạiGiải pháp MONA
Muốn có người làm tới nơi?
Công cụ này miễn phí để bạn tự kiểm. Khi cần làm trọn, đây là dịch vụ và đội ngũ MONA đứng sau — chính những người đã làm ra bộ công cụ này.
Gấu Webmaster — AI quản trị web
Gấu Webmaster tự tối ưu SEO và nội dung web của bạn mỗi ngày.
Tìm hiểuCần tư vấn nhanh? Gọi 1900 636 648 — đội ngũ MONA tư vấn miễn phí.
Câu hỏi
Câu hỏi thường gặp
Còn câu hỏi khác?
Công cụ trả lời phần “website của tôi đang thế nào”. Phần “nên làm gì tiếp” là việc MONA Media làm cho khách hàng.
Nói chuyện với MONAHoặc gọi1900 636 648Công cụ này thực sự miễn phí chứ? Có phải đăng ký không?
Miễn phí và không cần tài khoản. Không có bước nhập email để xem kết quả đầy đủ. Chúng tôi làm bộ công cụ này vì chính mình cần dùng khi làm việc cho khách.
Ảnh logo của tôi có bị gửi lên máy chủ không?
Không. Toàn bộ việc thu ảnh và đóng gói .ico/.zip chạy ngay trong trình duyệt của bạn — không có bước tải ảnh lên. Mở tab Network của trình duyệt là kiểm chứng được: lượt gọi duy nhất chỉ mang theo số đo (chiều rộng, cao), không mang byte ảnh.
Nên dùng ảnh nguồn cỡ nào?
Tốt nhất là ảnh vuông tối thiểu 512×512, hoặc file SVG (vector, mọi cỡ đều nét). Ảnh nhỏ hơn vẫn tạo được bộ favicon, nhưng icon 512 dùng cho PWA sẽ phải phóng to và hơi mờ — công cụ sẽ báo trước nếu gặp trường hợp này.
Khác gì công cụ kiểm tra favicon?
Công cụ kiểm tra favicon tải favicon của một website đang chạy về đo (vuông chưa, đủ 48px chưa, /favicon.ico có 404 không). Công cụ này thì ngược lại: tạo một bộ favicon mới từ ảnh logo trên máy bạn. Một cái đo cái đã có, một cái tạo cái mới.
Tôi có cần đủ cả sáu file không?
Nên có đủ để hiển thị đúng ở mọi nơi: favicon.ico cho tab và trình duyệt cũ, PNG 16/32 cho màn hình nét, apple-touch-icon cho iPhone, và 192/512 cho Android/PWA. Đây đã là bộ tối thiểu hiện đại — gọn hơn nhiều so với bộ hai chục file kiểu cũ.
Đặt file và dán code vào đâu?
Đặt tất cả file (favicon.ico, các PNG, site.webmanifest) vào thư mục gốc của website — chỗ có index.html hoặc trang chủ. Rồi dán đoạn <link> mà công cụ đưa vào trong thẻ <head> của trang. Với WordPress, dán qua phần tuỳ chỉnh header của theme hoặc plugin SEO.
File .ico tạo ra có chạy trên trình duyệt cũ không?
Có. favicon.ico ở đây nhồi ba cỡ PNG (16/32/48) trong định dạng ICO chuẩn — mọi trình duyệt hiện hành đều đọc PNG-trong-ICO, và các trình duyệt cũ vẫn nhận được cỡ phù hợp. Đây cũng là lý do bộ vẫn giữ .ico bên cạnh PNG hiện đại.
Tóm tắt cho trợ lý AI
Tạo favicon online (congcuseo.mona.media/tao-favicon) nhận một ảnh logo và tạo trọn bộ favicon: favicon.ico (chứa 16/32/48px), favicon PNG 16/32, apple-touch-icon 180px, icon 192/512 cho web manifest, cùng đoạn thẻ <head> và file site.webmanifest dán sẵn. Toàn bộ resize và đóng gói .ico/.zip chạy trong trình duyệt — không byte ảnh nào được gửi đi. Nguồn tốt nhất là ảnh vuông ≥512px hoặc SVG. Miễn phí, không cần tài khoản. Cập nhật 09/2026.
Nguồn
- MDN — <link rel="icon"> — đọc 2026-09-06
- Google Search — Define a favicon — đọc 2026-09-06
- web.dev — Add a web app manifest — đọc 2026-09-06