Trình tạo Favicon - Tạo Favicon từ hình ảnh miễn phí
Tạo các biểu tượng PNG có kích thước 16–512 px, biểu tượng cảm ứng của Apple và trang web.webmanifest từ một hình ảnh.
Thả ảnh vuông vào — nhận mọi kích thước favicon cùng file site.webmanifest trong một file ZIP.
Bao gồm favicon.ico, site.webmanifest + đoạn mã HTML
Bạn có thể làm gì với Trình tạo Favicon
Xem lại các khả năng chính trước khi bạn bắt đầu.
- Bắt đầu từ một hình ảnh, chữ viết tắt hoặc emoji hay biểu tượng
- Xem trước màu sắc và kiểu chữ của biểu tượng chữ trước khi tạo
- Tạo biểu tượng Apple Touch và biểu tượng màn hình chính Android
- Nhận tệp site.webmanifest sẵn sàng sử dụng
- Tải xuống tất cả kích thước favicon trong một file ZIP
- Tạo favicon.ico cùng các kích thước PNG từ 16 đến 512 px
Tham khảo cài đặt
cài đặt 7
Các điều khiển có sẵn cho Trình tạo Favicon.
- Chế độ xử lýCài đặt sẵn
- Xử lý một đầu vào hoặc chuyển sang chế độ theo lô của Premium để áp dụng cùng thiết lập cho nhiều đầu vào. Loại đầu vào được hỗ trợ tùy thuộc vào công cụ.Tùy chọn: Một ảnhHàng loạt
Loại nguồn
- Favicon nên bắt đầu từ đâu?Cài đặt sẵn
- Chọn một hình ảnh đã tải lên, một biểu tượng chữ gồm một đến ba ký tự được thiết kế ngay trên máy, hoặc một emoji hay ký hiệu làm nguồn cho cùng một bộ favicon hoàn chỉnh.Tùy chọn: Dùng một hình ảnh hoặc logoTạo từ chữ cái viết tắtTạo từ emoji
Thiết kế
- Chữ cái đầu hoặc văn bản ngắnNhập văn bản
- Đặt từ một đến ba ký tự cho chế độ chữ viết tắt và cập nhật bản xem trước nguồn cục bộ trước khi tạo.
- Kiểu văn bảnDanh sách thả xuống
- Chọn họ phông chữ cho biểu tượng chữ ở chế độ chữ cái viết tắt.Tùy chọn: Không chânSerifKhông gian đơn
- Màu chữBộ chọn màu
- Chọn màu cho chữ cái viết tắt; chỉ hiển thị khi nguồn là biểu tượng chữ.
- Màu nềnBộ chọn màu
- Đặt nền đặc phía sau chữ viết tắt hoặc emoji trước khi tạo các kích thước favicon.
- Biểu tượng cảm xúc hoặc ký hiệuNhập văn bản
- Chấp nhận tối đa bốn ký tự Unicode ở chế độ emoji; hình thức hiển thị tùy theo trình duyệt và hệ điều hành dùng để kết xuất nguồn.
Các công cụ liên quan dành cho Trình tạo Favicon
Công cụ dành cho các bước tiếp theo phổ biến sau Trình tạo Favicon.
Chuyển đổi hình ảnh
Trình chuyển đổi ICO
Chuyển đổi mọi đầu vào hình ảnh thông thường thành tệp .ico có độ phân giải đa dạng từ 16–256 px để sử dụng cho trình duyệt và máy tính để bàn được hỗ trợ.
Dùng thử ngay
Chuyển đổi hình ảnh
SVG sang PNG
Rasterize các tệp SVG dưới dạng PNG ở tỷ lệ 1×–8× với nền trong suốt, màu trắng hoặc tùy chỉnh.
Dùng thử ngay
Chuyển đổi hình ảnh
PNG sang WebP
Chuyển đổi hình ảnh PNG sang WebP với độ trong suốt được hỗ trợ và cài đặt chất lượng có thể điều chỉnh.
Dùng thử ngayCâu hỏi thường gặp
Để bao phủ rộng nhiều trình duyệt và thiết bị, các kích thước phổ biến bao gồm biểu tượng trình duyệt 16×16 và 32×32, biểu tượng Windows 48×48, biểu tượng Apple touch 180×180, cùng biểu tượng Android/PWA 192×192 và 512×512. Trình tạo sẽ tạo ra các biểu tượng này cùng với favicon.ico và site.webmanifest từ một hình ảnh, chữ cái đầu hoặc một emoji hay biểu tượng.
usageCác trình duyệt hiện đại hỗ trợ biểu tượng PNG, nhưng favicon.ico vẫn là phương án dự phòng tương thích hữu ích. Bộ tệp tải về bao gồm một favicon.ico đa độ phân giải cùng với các kích thước PNG hiện đại, nên bạn không cần chuyển đổi thêm lần nữa.
technicalMột web app manifest là một tệp JSON cho Android, Chrome và Edge biết trang web của bạn nên trông như thế nào khi được cài đặt dưới dạng ứng dụng web tiến bộ (PWA) — biểu tượng, tên, màu chủ đề và chế độ hiển thị. Trình tạo của chúng tôi bao gồm một manifest khởi đầu trỏ tới các biểu tượng Android Chrome; bạn chỉ cần chỉnh sửa tên và theme_color.
featuresDùng một hình ảnh vuông ở 512×512 hoặc lớn hơn, một đến ba chữ viết tắt đậm với độ tương phản mạnh, hoặc một emoji hay biểu tượng đơn giản. Hãy tránh những chi tiết nhỏ bị mất đi ở kích thước 16×16. Bản xem trước nguồn trực tiếp giúp bạn đánh giá chữ lồng hoặc emoji trước khi tạo gói.
tipsCác logo được tải lên được gửi qua HTTPS khi bạn chọn Tạo. Nguồn chữ viết tắt và emoji trước tiên được kết xuất cục bộ trong trình duyệt của bạn, sau đó hình ảnh nguồn đã tạo đó được gửi đi để tạo gói. Các tệp được xử lý trên máy chủ tuân theo Chính sách bảo mật; không có gì được tải lên chỉ vì bạn chỉnh sửa bản xem trước cục bộ.
privacyGiải nén tệp tải về vào thư mục /public (hoặc thư mục gốc web) của trang web, sau đó thêm đoạn mã HTML kèm theo vào <head>: các thẻ link cho biểu tượng PNG cùng một liên kết tới site.webmanifest. Hãy làm mới cứng trang web (Cmd+Shift+R) — trình duyệt lưu cache favicon rất mạnh, nên bạn có thể cần xóa cache để biểu tượng mới hiển thị.
usageGói cung cấp các biểu tượng 192×192 và 512×512 cùng một manifest khởi đầu được các ứng dụng web có thể cài đặt sử dụng. Riêng biểu tượng không làm cho một trang web có thể cài đặt được; ứng dụng của bạn còn phải đáp ứng các yêu cầu hiện tại của trình duyệt về manifest, HTTPS và service-worker.
technicalVâng. Xem trước và tải xuống ZIP favicon sạch mà không cần tạo tài khoản. Bộ biểu tượng được hiển thị trên máy chủ của chúng tôi, vì vậy việc sử dụng miễn phí sẽ được cho phép và Premium sẽ loại bỏ giới hạn.
pricingFavicon là biểu tượng nhỏ hiển thị trên các tab trình duyệt, dấu trang và lịch sử, cùng với các kích thước biểu tượng liên quan dùng cho lối tắt trên màn hình chính và ứng dụng đã cài đặt. Bắt đầu tại đây với một hình logo, chữ cái viết tắt hoặc một emoji hay ký hiệu, rồi tải bộ biểu tượng cùng site.webmanifest trong một tệp ZIP.
usageCó. Chọn Tạo từ chữ cái đầu để nhập một đến ba ký tự, một kiểu chữ và màu chữ/màu nền, hoặc chọn Tạo từ emoji để lấy một biểu tượng và nền. Bảng thiết kế tương ứng sẽ tự mở, nguồn được xem trước ngay trên máy, và không có gì được tạo cho đến khi bạn chọn thao tác tạo favicon.
featuresCó — trình tải lên chấp nhận các tệp nguồn PNG, JPEG, WebP và SVG, không chỉ PNG. SVG đáng dùng nếu bạn có: vì nó là vector, mọi kích thước đầu ra từ 16 đến 512 đều được dựng mới từ dữ liệu vector thay vì được phóng to từ ảnh raster, nên các cạnh vẫn sắc nét ngay cả ở 512×512. JPEG và WebP cũng dùng tốt, mặc dù bạn nên làm phẳng mọi độ trong suốt lên một nền trước vì JPEG không thể giữ một kênh alpha.
technicalChọn Dùng hình ảnh hoặc logo, tải lên tệp PNG và tạo bộ biểu tượng. Bộ này gồm một tệp favicon.ico đa độ phân giải, các kích thước PNG, biểu tượng Apple và Android, site.webmanifest và một đoạn mã HTML trong một tệp ZIP. Bạn cũng có thể bắt đầu từ JPEG, WebP hay SVG, hoặc chuyển chế độ để thiết kế một biểu tượng chữ từ chữ cái viết tắt hay dùng một emoji hoặc ký hiệu.
usageCó — Pixoate hỗ trợ xử lý hàng loạt và hàng loạt. Chuyển sang chế độ Hàng loạt, thêm tối đa 60 hình ảnh nguồn trên Premium hoặc 200 trên Pro, đặt các tùy chọn của bạn một lần và mọi hình ảnh nguồn đều được xử lý với cùng cài đặt trước khi bạn tải xuống một ZIP chứa kho lưu trữ gói favicon hoàn chỉnh cho mỗi hình ảnh nguồn. Xử lý hàng loạt là một tính năng Cao cấp; đầu ra sử dụng cùng chất lượng và cài đặt như chế độ đơn.
featuresCó — với tính năng xử lý hàng loạt, bạn định cấu hình cài đặt một lần và chúng áp dụng cho mọi mục trong lô — tối đa 60 hình ảnh nguồn trên Premium hoặc 200 trên Pro. Không cần phải lặp lại thiết lập cho mỗi mục và các tệp được tạo và tải lên tạm thời sẽ được xử lý an toàn và tự động xóa.
usageGần như luôn do một trong ba nguyên nhân. Tệp vượt quá giới hạn tải lên miễn phí 11 MB — Premium hỗ trợ 50 MB và Pro 120 MB. Hoặc định dạng không được công cụ này hỗ trợ, vì vậy hãy kiểm tra danh sách trên bảng tải lên. Hoặc tệp không thực sự có định dạng như tên gọi: đổi tên tệp không làm thay đổi nội dung bên trong, và đó là lý do một tệp có vẻ hợp lệ vẫn bị từ chối.
troubleshootingCó - điều chỉnh đầu vào và tạo lại bao nhiêu lần tùy ý; không có gì bị khóa cho đến khi bạn tải xuống. Kiểm tra kết quả ở kích thước thực sự sẽ được sử dụng vì nội dung nào đó đọc rõ ràng trên màn hình có thể bị lỗi khi được in nhỏ hoặc hiển thị trên điện thoại.
troubleshootingKhông. Bạn có thể chạy Favicon Generator và tải xuống kết quả miễn phí mà không cần có tài khoản và nó không có hình mờ. Premium là thứ bạn mua khi giới hạn bắt đầu bị giới hạn: tối đa 60 tệp trong một đợt, tải lên lớn hơn, không có giới hạn hàng ngày và kết quả có độ phân giải gốc. Không có gì được tiết lộ ở bước tải xuống mà bạn không thể nhìn thấy trước khi bắt đầu.
pricingKhông — Trình tạo Favicon chạy trong trình duyệt trên máy tính để bàn và điện thoại. Không cần cài đặt gì, không cần dùng thử để bắt đầu và không cần mua giấy phép trước khi bạn có thể xem liệu nó có đáp ứng được những gì bạn cần hay không. Hãy thử nó trên tập tin mà bạn thực sự đang gặp khó khăn thay vì một tập tin mẫu.
troubleshootingTrình tạo Favicon giúp bạn hoàn thành công việc như thế nào
Những vấn đề thực tế mà nó giải quyết hàng ngày — cho doanh nghiệp, người sáng tạo và các công việc hàng ngày. Tìm trường hợp sử dụng phù hợp với bạn và bắt đầu.
Ra mắt sản phẩm indie hacker
Nhà sáng lập đơn lẻ đang ra mắt MVP cần một favicon chỉn chu trước khi phát hành. Tạo mọi kích thước từ một ảnh logo duy nhất cùng tệp manifest chỉ bằng một cú nhấp — không cần Figma, không cần gói thiết kế trả phí.
Thiết lập khách hàng cho agency
Khi bàn giao một trang web mới cho khách hàng, bộ favicon hiếm khi được tính vào ngân sách nhưng luôn được kỳ vọng. Hãy tạo tệp ZIP vào cuối dự án, thả nó vào /public và đánh dấu hoàn thành sản phẩm bàn giao.
Khả năng cài đặt PWA
Để vượt qua kiểm tra khả năng cài đặt của Chrome, tệp manifest của bạn cần các biểu tượng 192×192 và 512×512. Đầu ra của chúng tôi đáp ứng yêu cầu đó ngay từ đầu, cùng với các thẻ HTML head tương ứng.
Không gian làm việc đa thương hiệu
Các agency và chuyên viên tư vấn quản lý nhiều thương hiệu khách hàng có thể tạo lại bộ favicon trong 10 giây mỗi khi thương hiệu đổi mới — không cần duy trì một action Photoshop.
Xây Dựng Thương Hiệu Dự Án Mã Nguồn Mở
Các trang trên GitHub Pages, Vercel, Netlify và Cloudflare Pages đều cần favicon để trông chỉn chu trên tab trình duyệt. Hãy thả các file đã tạo vào kho lưu trữ của bạn và dự án của bạn trông như đã hoàn thiện.
Làm mới thương hiệu
Khi logo của bạn thay đổi, hãy tạo lại mọi kích thước cần thiết — bao gồm biểu tượng Apple touch 180px và biểu tượng Android PWA 512px — mà không cần xuất lại thủ công từ Illustrator.
Biểu tượng cho Manifest tiện ích mở rộng trình duyệt
Lấy các PNG 16, 32 và 48px thẳng từ ZIP cho đối tượng icons trong manifest.json của bạn — một cách nhanh để có biểu tượng tiện ích mở rộng đúng chuẩn mà không cần xuất từng kích thước bằng tay trong công cụ thiết kế.
Lấp khoảng trống Favicon trên các trang No-Code
Webflow, Framer và Wix hiếm khi tự tạo được bộ favicon đầy đủ; hãy tải logo của bạn lên đây rồi dán các kích thước và đoạn HTML kết quả vào bảng cài đặt mã tùy chỉnh hoặc SEO của trang chỉ trong vài phút.
Tạo vẻ hoàn thiện cho blog sở thích
Các blog cá nhân trên Ghost, Jekyll hay Hugo thường không có favicon nào cả; hãy tạo bộ đầy đủ từ ảnh chân dung hoặc logo vẽ tay để tab trình duyệt trông có chủ đích thay vì trống trơn.
Sửa Favicon bị đánh dấu trong đánh giá SEO
Một favicon bị thiếu hoặc lỗi là dấu hiệu thường gặp trong báo cáo của Lighthouse và các trình thu thập SEO, và nó âm thầm làm giảm tỷ lệ nhấp trong kết quả tìm kiếm cũng như dấu trang. Hãy tạo lại toàn bộ bộ biểu tượng chỉ với một lần tải lên và xử lý dứt điểm vấn đề đó ngay hôm nay.
Ngắm nhìn từng vùng đất chuyển hóa
Mỗi bức ảnh đều vượt qua dấu gạch chéo và đi ra phía bên kia.
