Tạo favicon từ hình ảnh, văn bản hoặc emoji: đủ mọi kích thước kèm HTML để dán.
Cập nhật lần cuối
Coddy dạy bạn bằng cách viết code thật ngay trên trình duyệt: bài học tương tác, phản hồi tức thì và AI hỗ trợ khi bạn bị kẹt.
*Favicon* là biểu tượng nhỏ xuất hiện trên tab trình duyệt, dấu trang, lịch sử duyệt web và màn hình chính iOS / Android khi ai đó lưu trang web của bạn. Nó nhỏ nhưng ảnh hưởng bất ngờ lớn đến cảm nhận về một dự án: có favicon thật hay không chính là khác biệt giữa một ô vuông tạm và một sản phẩm hoàn chỉnh.
Trình duyệt hiện đại cần favicon ở nhiều kích thước và định dạng khác nhau. Icon trên tab và dấu trang cần PNG 16×16 hoặc 32×32. iOS Safari cần apple-touch-icon.png 180×180. Tính năng Thêm vào màn hình chính của Android cần 192×192 và 512×512 trong một web manifest. Trình duyệt cũ và một số tích hợp vẫn đòi favicon.ico nhiều độ phân giải. Tự cắt từng tệp một rất mất công, còn công cụ tạo favicon làm hết chỉ với một cú nhấp.
Công cụ này chạy hoàn toàn trong trình duyệt. Hình ảnh bạn tải lên được giải mã vào một <canvas> ngay trên máy, mọi kích thước đầu ra được vẽ ngay tại đó, và cả bộ (PNG, ICO, web manifest, README và đoạn HTML) được đóng gói thành .zip mà không tải lên bất cứ thứ gì.
favicon.ico là một định dạng chứa có thể gộp nhiều kích thước (16, 32, 48) để các trình duyệt cũ luôn tìm thấy thứ chúng cần.apple-touch-icon.png và các mục trong manifest.webmanifest), nên cần có cả hai.Dùng **Chữ** cho monogram từ 1 đến 3 ký tự, **Emoji** cho icon một ký tự, hoặc **Hình ảnh** để thả PNG, JPEG hay SVG. Nếu bạn đã có logo, chế độ Hình ảnh là điểm bắt đầu tốt nhất.
Chọn màu nền (và màu chữ cho monogram). Chọn **Vuông**, **Bo góc** hoặc **Tròn**: hình vuông bo góc khớp với cách iOS cắt icon trên màn hình chính, nên trông rất tự nhiên.
Tên trang web trở thành thẻ meta application-name và short_name trong manifest.webmanifest của PWA. Dùng tên thương hiệu mà người dùng sẽ thấy trong dấu trang của trình duyệt.
Cuộn hàng xem trước để chắc rằng icon vẫn dễ nhìn ở 16px và 32px (kích thước trên tab). Nếu thiết kế khó đọc ở cỡ nhỏ như vậy, hãy đơn giản hóa nguồn: ít ký tự hơn hoặc cắt sát hơn.
Nhấn **Tải gói favicon (.zip)** để nhận tất cả tệp đầu ra cùng lúc. Đặt các tệp ở thư mục gốc của trang web, rồi dán đoạn HTML vào <head>, vậy là xong.
Mỗi lần tải về đều có các tệp dưới đây. Đoạn HTML kết nối chúng với trang: nếu chỉ cần một phần, hãy giữ những tệp khớp với nền tảng bạn hỗ trợ.
| Tệp | Kích thước | Dùng cho | Ghi chú |
|---|---|---|---|
favicon.ico | 16, 32, 48 | Tab trình duyệt (dự phòng cho trình duyệt cũ) | Định dạng ICO nhiều độ phân giải: mọi trình duyệt vẫn yêu cầu URL này. |
favicon-16x16.png | 16×16 | Icon tab trình duyệt | Dùng trên màn hình mật độ điểm ảnh cao qua <link rel="icon" sizes="16x16">. |
favicon-32x32.png | 32×32 | Tab trình duyệt + dấu trang | Icon tab chính trên màn hình retina. |
favicon-48x48.png | 48×48 | Ô trang web trên Windows, thanh tác vụ | Cũng được gộp vào favicon.ico cho trình duyệt cũ. |
apple-touch-icon.png | 180×180 | Thêm vào màn hình chính trên iOS Safari | Nếu thiếu tệp này, iOS dùng ảnh chụp trang thay thế, nên luôn kèm theo. |
android-chrome-192x192.png | 192×192 | Màn hình chính Android | Được khai báo trong manifest.webmanifest. |
android-chrome-512x512.png | 512×512 | Lời nhắc cài PWA + màn hình chờ | Bắt buộc với PWA có thể cài đặt. |
site.webmanifest | - | Metadata cài đặt PWA | Liệt kê icon, tên, màu chủ đề. Liên kết qua <link rel="manifest">. |
Gõ từ 1 đến 3 chữ cái (ví dụ **Co**, **C** hoặc **JS**), chọn màu thương hiệu, và chọn **Bo góc** để có hình dáng hợp với iOS.
Monogram dễ đọc nhất ở 16px vì không có chi tiết nào để mất. Dùng một chữ hoa đậm hoặc cặp hai chữ khít nhau, và giữ màu chữ với màu nền tương phản cao.
Chọn một emoji hợp với tinh thần dự án: 🚀 cho lần ra mắt, 🧪 cho thử nghiệm, 📚 cho tài liệu. Đặt một màu nền trung tính.
Favicon emoji tạo cảm giác thân thiện cho trang cá nhân, hackathon và dự án phụ. Nhớ rằng cùng một emoji trông khác nhau trên macOS (Apple) và Windows (Segoe): khi xuất ra, gói tải về giữ nguyên giao diện macOS / Linux / Chrome mà bạn thấy trong bản xem trước.
Thả PNG hoặc SVG logo của bạn, tăng thanh trượt **Khoảng đệm** để hình không chạm mép, và bật **Tô màu nền phía sau hình ảnh** nếu logo có viền trong suốt.
Đầu vào SVG hiển thị sắc nét ở mọi kích thước. Đầu vào PNG cũng dùng được nhưng sẽ mờ khi vượt quá độ phân giải gốc, nên hãy bắt đầu từ ảnh nguồn ít nhất 512×512.
apple-touch-icon.png. Nếu không khai báo Apple touch icon, iOS sẽ dùng ảnh chụp trang thay thế, mà thường trông rất xấu.<link rel="icon" href="/images/favicon.ico">. Cách đó vẫn chạy, nhưng trình duyệt vẫn dò /favicon.ico ở thư mục gốc. Hoặc đặt thêm một bản ở thư mục gốc, hoặc chấp nhận các lỗi 404 trong access log.favicon.ico?v=2) hoặc xóa bộ nhớ đệm của trang.Favicon là biểu tượng nhỏ mà trình duyệt hiển thị cạnh tiêu đề trang: trên tab, dấu trang, lịch sử duyệt web và lối tắt trên màn hình chính. Tên gọi là viết tắt của *favorite icon*; bản Internet Explorer 5 đầu tiên dùng nó cho dấu trang.
favicon.ico nhiều độ phân giải (16/32/48), một PNG 32×32, một apple-touch-icon.png 180×180 cho iOS, và các PNG 192×192 và 512×512 khai báo trong site.webmanifest cho Android và PWA có thể cài đặt. Gói mà công cụ này tải về có đủ tất cả.<link rel="icon" type="image/png">. Chúng cũng đều hỗ trợ URL /favicon.ico kiểu cũ. Favicon SVG được trình duyệt hiện đại hỗ trợ và cho một tệp duy nhất hiển thị sắc nét ở mọi kích thước: rất hợp nếu logo của bạn đã là vector, nhưng iOS Safari vẫn cần PNG dự phòng.Cmd/Ctrl + Shift + R), xóa dữ liệu trang trong DevTools, hoặc thêm query string vào URL favicon (/favicon.ico?v=2). Nếu trang web chạy sau CDN, thường cũng cần xóa bộ nhớ đệm của CDN./apple-touch-icon.png. Gói tải về đã có sẵn tệp này.<canvas>, và mọi đầu ra (PNG, ICO, ZIP, manifest) đều được tạo trên máy. Không có gì rời khỏi máy của bạn.