Không tải lên, 100% cục bộ, không cần tài khoản

Trình tạo favicon

Tải lên logo hoặc biểu tượng của bạn và tải xuống tất cả kích thước favicon chuẩn dưới dạng PNG. Bao gồm Apple Touch Icon và biểu tượng PWA. Không có gì rời khỏi thiết bị của bạn.

Cách Trình tạo favicon hoạt động

Công cụ tạo favicon lấy bất kỳ ảnh nào bạn cung cấp và thay đổi kích thước nó sang các kích thước favicon tiêu chuẩn bằng Canvas drawImage API: 16x16, 32x32, 48x48, 180x180 (Apple touch icon), 192x192 (Android Chrome) và 512x512 (PWA manifest). Tất cả sáu kích thước được tạo trong trình duyệt của bạn, cùng với một file favicon.ico đa kích thước gộp các ảnh 16x16, 32x32 và 48x48 vào một file kế thừa duy nhất. Ảnh nguồn của bạn không bao giờ rời thiết bị của bạn.

Bộ favicon hoàn chỉnh bao phủ toàn bộ phạm vi biểu tượng tab trình duyệt, dấu trang, phím tắt màn hình chính và splash screen PWA. Sử dụng ảnh nguồn độ phân giải cao (ít nhất 512x512 pixel) cung cấp cho thuật toán thu nhỏ nhiều chi tiết nhất để làm việc. Các thẻ link HTML bạn cần để tham chiếu mỗi file đã tạo được hiển thị trong đoạn code bạn có thể sao chép trực tiếp vào phần tử head của trang.

Tác giả: Bastien Sulyan

Cách sử dụng Trình tạo favicon, từng bước

  1. Kéo thả ảnh nguồn vào khu vực tải lên. Dùng ảnh vuông 512px hoặc lớn hơn để có kết quả tốt nhất.
  2. Xem trước sáu kích thước đã tạo trong bảng kết quả.
  3. Tải xuống sáu tệp PNG và tệp favicon.ico từ bảng kết quả.
  4. Sao chép đoạn code HTML hiển thị các thẻ link cho tất cả kích thước.
  5. Đặt các file PNG ở gốc trang web của bạn và dán các thẻ link vào head trang.

Trường hợp sử dụng thường gặp

  • Một lập trình viên thiết lập trang web mới và cần tất cả kích thước favicon được tạo từ logo thương hiệu mà không cần đăng ký công cụ thiết kế.
  • Tác giả PWA tạo các biểu tượng 192x192 và 512x512 theo yêu cầu trong web app manifest để cài đặt lên màn hình chính.
  • Blogger làm mới nhận dạng trang web và thay thế favicon mặc định bằng biểu tượng tùy chỉnh xây dựng từ logo của họ.
  • Freelancer nhanh chóng tạo bộ favicon đầy đủ cho dự án khách hàng mà không cần chờ cài đặt phần mềm thiết kế ngoại tuyến.

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

Tôi có thể dùng định dạng ảnh nào làm nguồn?

Bất kỳ định dạng nào trình duyệt có thể giải mã đều hoạt động làm đầu vào: JPEG, PNG, WebP, GIF và SVG. Với nguồn SVG, trình duyệt raster hóa vector sang Canvas trước khi thay đổi kích thước, vì vậy các PNG đầu ra là ảnh raster bất kể.

Tại sao favicon của tôi bị mờ trong tab trình duyệt?

Các kích thước 16x16 và 32x32 rất nhỏ. Nếu ảnh nguồn chứa chi tiết tinh tế hoặc đường mỏng, chúng sẽ không còn sau khi thu nhỏ. Thiết kế đơn giản, đậm với hình dạng rõ ràng hoạt động tốt hơn nhiều ở kích thước nhỏ so với hình minh họa phức tạp.

Công cụ có tạo file ICO không?

Có. Ngoài sáu file PNG, công cụ còn tạo một file favicon.ico gộp các ảnh 16x16, 32x32 và 48x48 vào một file duy nhất, đây là thứ mà các trình duyệt Windows cũ hơn và một số trình thu thập dữ liệu vẫn tìm ở gốc trang web. Các trình duyệt hiện đại đã hài lòng với các liên kết PNG, vì vậy việc xuất bản cả hai không tốn thêm gì và để mỗi bên tự chọn.

Ảnh nguồn có được xử lý trên máy chủ không?

Không. Các lệnh gọi Canvas drawImage tạo ra mỗi kích thước chạy trong tab trình duyệt. Ảnh nguồn được đọc từ ổ đĩa cục bộ của bạn và sáu đầu ra PNG được tạo trong bộ nhớ rồi cung cấp để tải xuống. Không có dữ liệu file nào đi qua máy chủ.

Tôi nên dùng kích thước nào cho Apple touch icon?

iOS và iPadOS sử dụng PNG 180x180 pixel được tham chiếu bằng thẻ link apple-touch-icon. Kích thước này được dùng khi người dùng thêm trang web của bạn vào màn hình chính trên thiết bị Apple. Công cụ tạo file này cùng với các kích thước khác.

Tôi có thể dùng ảnh hình chữ nhật làm nguồn không?

Có, nhưng đầu ra sẽ được thêm letterbox hoặc pillarbox để vừa với canvas vuông. Để có kết quả tốt nhất, hãy bắt đầu với ảnh vuông hoặc cắt ảnh nguồn thành hình vuông trước khi dùng công cụ.

Công cụ liên quan

Giữ mọi thứ cục bộ, khám phá các công cụ bổ trợ.

Tất cả công cụ ảnh