Tạo Favicon miễn phí

Cách hoạt động

Công cụ này chuyển bất kỳ PNG, JPEG, WebP hoặc SVG nào thành gói favicon hoàn chỉnh — .ico nhiều kích thước, Apple touch icon, biểu tượng Android/PWA, web manifest và đoạn HTML sẵn sàng để dán — hoàn toàn trong trình duyệt bằng Canvas API và JSZip. Không có gì được tải lên; mọi thao tác hiển thị và ghép tệp diễn ra cục bộ.

1. 1
   Canvas thay đổi tỷ lệ ảnh của bạn

   Trình duyệt vẽ ảnh nguồn lên các phần tử HTML Canvas ngoài màn hình ở mỗi kích thước cần thiết (16, 32, 48, 180, 192 và 512 px). SVG không có thuộc tính width/height rõ ràng được chuẩn hóa trước qua DOMParser và XMLSerializer để Firefox và Chrome cho ra điểm ảnh giống hệt nhau thay vì canvas trống.
2. 2
   Bộ mã hóa ICO tự viết đóng gói tệp .ico

   Các mục ICO nhỏ (16, 32, 48 px) được mã hóa dạng bitmap DIB BGRA 32-bit thô — BITMAPINFOHEADER cộng các hàng XOR từ dưới lên và mặt nạ AND 1bpp — vì các thành phần shell của Windows yêu cầu định dạng DIB không nén ở các kích thước đó. Công cụ ghi phần đầu thư mục ICO và nối các mục hoàn toàn bằng DataView và Uint8Array, không dùng thư viện ICO bên ngoài.
3. 3
   Đầu ra PNG được tạo qua canvas.toBlob

   Mỗi biến thể PNG (favicon-16x16, favicon-32x32, apple-touch-icon-180x180, android-chrome-192x192, android-chrome-512x512) được lấy bằng cách gọi canvas.toBlob với 'image/png', giao việc mã hóa không mất dữ liệu cho bộ máy ảnh tích hợp của trình duyệt. Khoảng đệm, màu nền và cắt hình dạng (vuông, bo góc hoặc tròn) tùy chọn được áp dụng lên ngữ cảnh canvas trước khi lấy.
4. 4
   JSZip gói mọi thứ vào một lần tải

   JSZip ghép mọi tệp đã tạo — favicon.ico, năm tệp PNG, site.webmanifest với tên ứng dụng của bạn và favicon-snippet.html với các thẻ <link> đúng — thành một blob .zip duy nhất tự động tải về thiết bị.

Công cụ liên quan