Trình tạo bộ favicon

Tạo bộ favicon hoàn chỉnh — ICO, PNG, biểu tượng Apple touch, biểu tượng PWA, web manifest và đoạn mã HTML — ngay trong trình duyệt của bạn.

Ảnh nguồn
Kéo thả hoặc chọn một tệp PNG, JPEG, WebP hoặc SVG. Mọi nền tảng đều dùng ảnh này trừ khi bạn ghi đè bên dưới.
Thông tin trang
Được dùng cho manifest, apple-touch-icon và đoạn mã HTML.

Hiển thị khi tên ứng dụng quá dài cho không gian sẵn có.

Tùy chọn. Bỏ qua khỏi manifest khi để trống.

Nơi PWA đã cài đặt mở ra.

Tiền tố áp dụng cho mọi href trong đoạn mã HTML và mọi src trong mảng icons của manifest.

Điều khiển theme_color trong manifest và thẻ HTML <meta name="theme-color">.

background_color của manifest. Được trình duyệt dùng để vẽ màn hình chờ cho PWA.

Favicon trình duyệt máy tính
Điều khiển favicon.ico, favicon-16x16.png, favicon-32x32.png và (khi nguồn là SVG) favicon.svg.

Khoảng trống xung quanh ảnh nguồn bên trong biểu tượng.

Tab trình duyệt máy tính
Tab trình duyệt máy tính (dark)
Kết quả công cụ tìm kiếm
iOS web clip
Điều khiển apple-touch-icon.png 180×180 dùng trên màn hình chính iOS.

Biểu tượng Apple phải mờ đục, vì vậy phần tô nền này luôn được áp dụng.

Khoảng trống xung quanh ảnh nguồn bên trong biểu tượng.

Màn hình chính iOS
Biểu tượng PWA
Điều khiển pwa-192x192.png, pwa-512x512.png và các biến thể maskable.

Khoảng trống xung quanh ảnh nguồn bên trong biểu tượng.

Vùng an toàn do W3C khuyến nghị là 40%. Nội dung nguồn vẫn hiển thị bên trong mọi mặt nạ nền tảng.

Thanh tác vụ Windows
Trình khởi chạy Android
Bộ tệp đã tạo
Nhấn Tạo để dựng mọi tài nguyên, đóng gói zip và sao chép đoạn mã HTML.
Chưa có bộ tệp
Chọn ảnh và nhấn Tạo để dựng bộ favicon.

Công cụ này tạo ra những gì

Trình tạo này biến một hình ảnh duy nhất thành một bộ favicon hiện đại, hoàn chỉnh — một tệp .ico đa kích thước cho các trình duyệt cũ, các biến thể PNG 16 / 32 / 180 / 192 / 512, một tệp .svg gốc tùy chọn, một site.webmanifest dành cho PWA, và đoạn HTML bạn dán vào <head>. Mọi byte đều được tạo ra ngay trong trình duyệt của bạn; không tải lên, không máy chủ, không phân tích dữ liệu.

Những gì có trong bộ tệp

  • favicon.ico — đa hình ảnh (16 / 32 / 48) dành cho thẻ trình duyệt, dấu trang, và các lối tắt Windows cũ.
  • favicon-16x16.png và favicon-32x32.png — các biến thể PNG hiện đại được dùng bởi các trình duyệt hiện hành.
  • favicon.svg — chỉ được kèm theo khi hình ảnh nguồn là SVG và công tắc “Use original SVG” được bật.
  • apple-touch-icon.png — 180×180, không trong suốt, dùng cho màn hình chính iOS.
  • pwa-192x192.png và pwa-512x512.png — các biểu tượng PWA tiêu chuẩn.
  • pwa-maskable-192x192.png và pwa-maskable-512x512.png — các biến thể maskable với vùng an toàn được W3C khuyến nghị.
  • site.webmanifest — tệp kê khai PWA đã được nối với các biểu tượng ở trên.

Cách hoạt động của padding, nền và vùng an toàn maskable

Mỗi nền tảng có padding riêng (“Margin”) để bạn có thể chừa khoảng trống bên trong khung biểu tượng. Công tắc “Add background” sẽ vẽ một hình vuông không trong suốt phía sau hình nguồn — hữu ích khi hình nguồn trong suốt và đích đến yêu cầu có độ mờ đục (màn hình chính của Apple) hoặc chỉ đơn giản để tạo độ tương phản thị giác trên thẻ trình duyệt. Biểu tượng PWA maskable sử dụng thêm một vùng an toàn bên trên margin của nền tảng: bất kỳ phần nào nằm ngoài khoảng ~80% trung tâm có thể bị cắt bởi Android, Windows, hoặc ChromeOS khi chúng áp dụng mặt nạ hình tròn, bo góc, hoặc squircle.

Cách gắn bộ tệp vào trang web của bạn

  1. Giải nén kho lưu trữ đã tải xuống vào thư mục gốc web của bạn (sao cho các tệp nằm tại /favicon.ico, /site.webmanifest, v.v.).
  2. Dán đoạn HTML vào <head> của trang web.
  3. Nếu bạn phục vụ tài nguyên từ một đường dẫn con (ví dụ /static/icons/), hãy đặt “Asset path” trước khi tạo để đoạn mã và tệp kê khai sử dụng đúng URL.
  4. Nếu bạn đã tùy chỉnh tệp kê khai vượt ra ngoài những gì công cụ này cho phép (ví dụ thêm categories hoặc screenshots), hãy mở site.webmanifest trong một trình soạn thảo văn bản và chỉnh sửa trực tiếp — đó là JSON thuần.