Tạo một gói favicon hoàn chỉnh từ logo, biểu tượng font hoặc chữ lồng — favicon.ico, các PNG hiện đại, biểu tượng Apple touch, biểu tượng PWA, tệp manifest web và đoạn mã HTML.

Thả logo vào, chọn một biểu tượng font hoặc nhập chữ lồng — chúng tôi tạo mọi favicon mà một website hiện đại cần, từ favicon.ico cổ điển đến biểu tượng Apple touch, các biểu tượng PWA và một đoạn mã HTML sẵn sàng để dán.

Thả PNG vào đây hoặc nhấp để tải lên
Khuyến nghị PNG trong suốt · cũng chấp nhận JPG / WebP
64%
Màu nền
0%
Được giao diện trình duyệt và tệp manifest PWA sử dụng.
Trang Của Bạn
example.com
Dấu trang · 32px
Apple touch · 180px
PWA · 512px

Gói favicon của bạn đã sẵn sàng
Quá trình tải xuống ZIP đã bắt đầu. Giải nén vào thư mục gốc của trang và dán đoạn mã HTML vào <head> của bạn.

Giới thiệu về Trình tạo Favicon

Trình tạo Favicon (Favicon Generator) xây dựng mọi icon một trang web hiện đại cần có từ một nguồn duy nhất: tải lên logo PNG, chọn một icon dạng font, hoặc gõ một monogram. Gói kết quả bao gồm favicon.ico cổ điển (16, 32 và 48 px), favicon PNG hiện đại, Apple touch icon 180 px, icon PWA 192 và 512 px, một site.webmanifest và đoạn mã HTML head.

Việc tùy chỉnh được xử lý ngay trong công cụ: chọn màu nền hoặc giữ trong suốt, cắt theo hình vuông, bo tròn hoặc tròn, điều chỉnh khoảng đệm và kích thước tác phẩm, và đặt màu chủ đề (theme color) dùng cho giao diện trình duyệt và manifest PWA. Bản xem trước trực tiếp hiển thị icon của bạn trong các ngữ cảnh thực — tab trình duyệt 16 px, bookmark, ô Apple touch và icon PWA.

Mọi thứ được dựng trên canvas trong trình duyệt của bạn, và Tạo sẽ tập hợp toàn bộ gói thành một file ZIP kèm README. Việc cài đặt gồm hai bước: giải nén vào thư mục gốc trang web của bạn và dán đoạn mã được cung cấp vào <head>.

Cách sử dụng Trình tạo Favicon

  1. Chọn nguồn của bạn: tải lên logo PNG, chọn một icon dạng font, hoặc gõ một monogram.
  2. Tùy chỉnh — màu nền hoặc trong suốt, hình dạng, khoảng đệm và kích thước tác phẩm.
  3. Điền tên trang, tên rút gọn và màu chủ đề cho manifest PWA.
  4. Kiểm tra các bản xem trước: tab trình duyệt, bookmark, ngữ cảnh Apple touch và PWA.
  5. Nhấp “Tạo favicon” và giải nén gói vào thư mục gốc trang web của bạn.
  6. Dán đoạn mã HTML từ gói vào <head> trang của bạn.

Câu hỏi thường gặp

Có — toàn bộ gói, bao gồm .ico, mọi kích thước PNG, manifest và đoạn mã HTML, đều miễn phí để tạo và tải về.

favicon.ico với các lớp 16, 32 và 48 px, favicon PNG hiện đại, apple-touch-icon 180 px, icon PWA 192 và 512 px, một site.webmanifest, đoạn mã HTML sẵn sàng dán và một README kèm các bước cài đặt.

Có. Trình duyệt và crawler vẫn yêu cầu /favicon.ico như một phương án dự phòng, và các client cũ vẫn phụ thuộc vào nó. Gói kết quả cung cấp file này cùng với các liên kết PNG hiện đại, để mọi khách truy cập đều nhận được icon sắc nét.

Giải nén file lưu trữ vào thư mục gốc trang web để các file nằm ở gốc tên miền, sau đó dán đoạn mã HTML được cung cấp vào <head> của các trang. README trong file ZIP nhắc lại các bước này.

Nó được ghi vào manifest và các thẻ meta, tô màu giao diện trình duyệt trên di động cùng màn hình splash và thanh tiêu đề của PWA đã cài đặt để khớp với thương hiệu của bạn.

Có. Gõ một monogram một hoặc hai chữ cái và chọn kiểu chữ cùng màu sắc, hoặc chọn một biểu tượng từ thư viện icon dạng font — trình tạo sẽ dựng nó ở mọi kích thước giống như một logo đã tải lên.


Tìm kiếm phổ biến
tạo favicon tạo favicon.ico tạo favicon trực tuyến apple touch icon tạo biểu tượng pwa favicon từ logo
Cần trợ giúp?
Gặp sự cố với công cụ này? Hãy cho đội ngũ của chúng tôi biết.
Báo cáo sự cố

Thêm công cụ miễn phí này vào trang web của riêng bạn — sao chép và dán mã bên dưới.