Xem trước kết quả từ “Trình tạo Favicon”

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.

Favicon nên bắt đầu từ đâu?

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á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.
Sử dụng miễn phí · Không cần đăng ký · Không có hình mờTải lên được mã hóa trong quá trình chuyển tiếpĐã bị xóa theo chính sách lưu trữ của chúng tôi

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

Trì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.

Cho nhà phát triển

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í.

Cho doanh nghiệp

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.

Cho nhà phát triển

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.

Cho doanh nghiệp

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.

Cho nhà phát triển

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.

Tiếp thị

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.

Cho nhà phát triển

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ế.

Web và SEO

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.

Sử dụng cá nhân

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.

Tiếp thị

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.