1. Thêm ảnh
Kéo file vào vùng chỉ định hoặc chọn đồ họa từ thiết bị. Định dạng hỗ trợ: PNG, JPG, SVG. Kích thước khuyến nghị: tối thiểu 512×512 pixel.
Tạo favicon — tạo favicon.ico miễn phí
Tạo favicon.ico và bộ biểu tượng PNG hoàn chỉnh cho website từ một ảnh duy nhất. Tất cả xử lý diễn ra cục bộ trong trình duyệt.
Xem trước và file favicon
favicon.ico
Hoàn tất! Đã tạo file favicon. Xem danh sách file bên dưới.
favicon-16x16.png
Hoàn tất! Đã tạo file favicon. Xem danh sách file bên dưới.
favicon-32x32.png
Hoàn tất! Đã tạo file favicon. Xem danh sách file bên dưới.
apple-touch-icon.png
Hoàn tất! Đã tạo file favicon. Xem danh sách file bên dưới.
android-chrome-192x192.png
Hoàn tất! Đã tạo file favicon. Xem danh sách file bên dưới.
android-chrome-512x512.png
Hoàn tất! Đã tạo file favicon. Xem danh sách file bên dưới.
Favicon là gì và tại sao nên có?
Favicon là biểu tượng nhỏ xuất hiện trên tab trình duyệt bên cạnh tiêu đề trang. Bạn cũng thấy nó trong bookmark, lịch sử duyệt web và trên màn hình chủ điện thoại khi ai đó thêm trang web làm phím tắt.
Đồ họa nhỏ này phục vụ chức năng quan trọng — giúp người dùng nhanh chóng nhận ra trang web giữa nhiều tab đang mở. Khi ai đó mở hàng chục tab trong trình duyệt, favicon thường là yếu tố duy nhất có thể nhìn thấy để nhận diện trang.
Công cụ tạo bộ biểu tượng hoàn chỉnh: file favicon.ico cổ điển cho trình duyệt, biểu tượng PNG ở nhiều kích thước và apple-touch-icon cho thiết bị Apple. Nếu bạn xây dựng ứng dụng web (PWA), bạn cũng có thể tạo biểu tượng 192x192 và 512x512 cùng file manifest.
Cách tạo favicon trong 3 bước
Tạo favicon chỉ mất vài giây:
2. Chọn kích thước
Chọn kích thước biểu tượng bạn cần. Cho website thông thường: favicon.ico, 32×32 và 180×180. Cho PWA, thêm 192×192 và 512×512.3. Tải file
Sau khi tạo, tải tất cả file dạng ZIP hoặc từng biểu tượng riêng lẻ. Bên dưới công cụ bạn sẽ tìm thấy hướng dẫn cách thêm favicon vào trang.
Công cụ tạo những kích thước biểu tượng nào?
Mỗi kích thước có công dụng riêng:
favicon.ico (32×32)
Định dạng cổ điển được tất cả trình duyệt nhận biết. Hiển thị trên tab trình duyệt.
PNG 16×16 và 32×32
Kích thước tiêu chuẩn cho trình duyệt hiện đại. Hiển thị trên tab và trong bookmark.
PNG 180×180 (apple-touch-icon)
Biểu tượng cho thiết bị Apple (iPhone, iPad). Hiển thị khi ai đó thêm trang vào màn hình chủ.
PNG 192×192 và 512×512
Biểu tượng cho ứng dụng web (PWA). Yêu cầu bởi manifest và sử dụng trong cửa hàng ứng dụng.
Nếu bạn không xây dựng PWA, bạn chỉ cần: favicon.ico, PNG 32×32 và PNG 180×180. Ba file này đáp ứng hầu hết trường hợp sử dụng.
Điều gì làm công cụ tạo favicon đặc biệt?
Quyền riêng tư — file không bao giờ rời máy tính
Tất cả thao tác được thực hiện cục bộ trong trình duyệt. Ảnh không được gửi đến bất kỳ máy chủ nào. Sau khi đóng trang, tất cả dữ liệu được xóa.Bộ hoàn chỉnh tại một nơi
Favicon.ico, biểu tượng PNG, apple-touch-icon, biểu tượng PWA và manifest — tất cả từ một ảnh, trong một công cụ.Hỗ trợ PNG, JPG và SVG
Bạn có thể sử dụng logo ở bất kỳ định dạng nào. Nếu bạn có SVG — biểu tượng sẽ sắc nét ở tất cả kích thước.Sẵn sàng cho website và PWA
Công cụ tạo file manifest.json cho ứng dụng web. Bên dưới bạn sẽ tìm thấy hướng dẫn tích hợp biểu tượng.
Cách sử dụng công cụ tạo favicon
Tạo favicon là vài bước đơn giản:
1. Thêm ảnh nguồn
Kéo file vào vùng chỉ định hoặc chọn đồ họa từ thiết bị. Định dạng hỗ trợ: PNG, JPG, SVG. Logo đơn giản hoặc biểu tượng ít nhất 512×512 pixel phù hợp nhất.2. Chọn kích thước biểu tượng
Chọn kích thước biểu tượng bạn cần. Bạn có thể chọn tất cả hoặc chỉ một số. Cho website thông thường: favicon.ico, 32×32 và 180×180.3. Cấu hình tùy chọn tạo
Đặt tùy chọn bổ sung: nền (trong suốt hoặc màu đã chọn), manifest (file cấu hình PWA) và tự động tải.4. Tạo và tải file
Sau khi bắt đầu tạo, công cụ xử lý ảnh cục bộ — không gì được gửi đến máy chủ. Tải tất cả file dạng ZIP hoặc từng biểu tượng riêng.
Kích thước PNG
16×1632×32180×180
Nền trong suốt (PNG/ICO)
Tùy chọn tạo — mỗi tùy chọn làm gì?
Nền (trong suốt hoặc màu)
Mặc định, công cụ giữ trong suốt. Bạn cũng có thể chọn màu nền cụ thể.
Tạo manifest (site.webmanifest)
File JSON cho ứng dụng web (PWA). Nếu bạn không xây dựng PWA, tùy chọn này không bắt buộc.
Cách tải file đã tạo
Sau khi tạo biểu tượng, bạn có nhiều tùy chọn tải:
Tải tất cả dạng ZIP
Nút "Tải tất cả" đóng gói tất cả file đã tạo vào một file ZIP duy nhất. Đây là tùy chọn tiện lợi nhất khi bạn cần bộ biểu tượng đầy đủ.Tải file riêng lẻ
Mỗi biểu tượng đã tạo có nút tải riêng — bạn có thể tải một file mà không cần tải toàn bộ. Hữu ích khi chỉ cần cập nhật một kích thước.
Cách thêm favicon vào đâu và như thế nào
WordPress
Hầu hết theme WordPress có tùy chọn tích hợp để đặt biểu tượng trang. Bạn tìm thấy nó trong bảng quản trị:
Giao diện → Tùy chỉnh → Nhận dạng trang → Biểu tượng trang
Tải file 512×512 lên đó — WordPress sẽ tự động tạo các kích thước nhỏ hơn. Để kiểm soát đầy đủ biểu tượng, bạn cũng có thể tải file trực tiếp vào thư mục gốc qua FTP.
Ảnh nguồn nào phù hợp nhất?
Favicon là đồ họa rất nhỏ — nhỏ tới 16×16 pixel. Không phải hình ảnh nào cũng phù hợp làm nguồn:
Hình dạng đơn giản và ký hiệu dễ đọc
Logo đơn giản, chữ cái đơn lẻ hoặc ký hiệu phù hợp nhất. Tránh đồ họa phức tạp với nhiều chi tiết.Định dạng vuông
Favicon là hình vuông. Nếu ảnh nguồn có tỷ lệ khác 1:1, nó sẽ bị cắt hoặc kéo giãn.Kích thước đủ lớn
Chúng tôi khuyến nghị ảnh nguồn ít nhất 512×512 pixel. Ảnh nhỏ hơn sẽ bị phóng to.Định dạng SVG là nguồn lý tưởng
SVG phóng to mà không mất chất lượng, nên biểu tượng ở tất cả kích thước sẽ sắc nét.Màu tương phản cao
Favicon phải hiển thị rõ trên các nền khác nhau (tab sáng, chế độ tối). Chọn màu duy trì khả năng đọc.
Câu hỏi thường gặp về công cụ tạo favicon
Khám phá các công cụ khác
Chuyển đổi JPG/PNG sang WebP
Giảm kích thước file hình ảnh mà không mất chất lượng. Chuyển đổi JPG và PNG sang WebP và tăng tốc trang web.
Chỉnh sửa hình ảnh
Chuẩn bị khung hình hoàn hảo cho mạng xã hội hoặc trang web của bạn. Chọn định dạng có sẵn hoặc nhập kích thước tùy chỉnh.
Tạo favicon
Tạo favicon.ico và biểu tượng PNG từ một hình ảnh duy nhất, phù hợp với yêu cầu của trình duyệt và Lighthouse.
Kiểm tra meta title & description
Kiểm tra số ký tự và xem trước trang của bạn trên Google. Tránh tiêu đề và mô tả bị cắt trong kết quả tìm kiếm.
Đếm từ và ký tự
Kiểm tra độ dài văn bản và đánh giá xem có phù hợp với trang chủ, trang dịch vụ, bài blog hay mô tả sản phẩm không.
Tạo chữ ký email
Tạo chữ ký email chuyên nghiệp trong vài phút. Sao chép mã HTML sẵn vào Gmail hoặc Outlook.
Kiểm tra độ tương phản màu
Kiểm tra xem màu chữ và màu nền của bạn có dễ đọc không. Công cụ tính độ tương phản theo WCAG và giúp chọn màu phù hợp.
Trích xuất màu từ hình ảnh
Tải lên ảnh hoặc logo và công cụ sẽ trích xuất các màu chủ đạo. Sao chép mã màu được tạo với một lần nhấn.
Tạo mã QR miễn phí
Tạo mã QR cho trang web, vCard, menu hoặc tờ rơi. Xuất ra PNG và SVG, không cần đăng nhập, không giới hạn.