Cách tạo favicon trong trình duyệt hoạt động
Toàn bộ quy trình tạo chạy bên trong tab trình duyệt của bạn bằng Canvas API và thư viện nén fflate. Không xử lý phía máy chủ, không tải lên, không có dịch vụ bên thứ ba.
- Tải hình ảnh nguồn của bạn hoặc hiển thị văn bản hoặc emoji trên một canvas ngoài màn hình ở độ phân giải cao. Nếu bạn chọn hình ảnh, nó được giải mã bởi trình duyệt gốc. Nếu bạn chọn chế độ văn bản, trang sẽ vẽ từ của bạn lên một canvas với phông chữ, màu chữ và màu nền đã chọn.
- Đối với mỗi kích thước mục tiêu (16, 32, 48, 180, 192, 512 pixel), trang tạo một canvas ngoài màn hình mới ở kích thước chính xác đó, sau đó vẽ nội dung nguồn lên đó bằng Canvas API. Tính năng thay đổi kích thước hình ảnh tích hợp của trình duyệt xử lý việc giảm kích thước với bộ lọc song tuyến tính hoặc hai khối một cách tự động, tạo ra một favicon sắc nét ở mọi kích thước.
- Mỗi canvas được xuất sang PNG Blob qua
canvas.toBlob(). Bảng xem trước hiển thị tất cả sáu kích thước để bạn có thể kiểm tra kết quả trước khi tải xuống. Một khối HTML sẵn sàng để dán và một đoạn manifest ứng dụng web (manifest.json) được xây dựng từ tên tệp để bạn có thể đưa chúng trực tiếp vào thẻ head của trang web. - Khi bạn nhấp Tải xuống ZIP, trang đọc mọi PNG Blob vào bộ nhớ, sử dụng fflate để đóng gói chúng cùng với tệp
manifest.jsonthành một kho lưu trữ ZIP duy nhất và kích hoạt tải xuống chỉ với một cú nhấp chuột. Toàn bộ gói được xây dựng trong trình duyệt của bạn — không có gì được tải lên ở bất kỳ giai đoạn nào.
Tại sao nên tạo favicon trong trình duyệt?
- Một bộ favicon đầy đủ loại bỏ lỗi 404 không tìm thấy favicon của trình duyệt khi truy cập lần đầu và đảm bảo trang web của bạn trông chuyên nghiệp trong dấu trang, tab trình duyệt và màn hình cài đặt PWA. Các kích thước bị thiếu có nghĩa là trình duyệt không tải gì hoặc dựa vào tỷ lệ lân cận gần nhất bị mờ.
- HTML và đoạn manifest đi kèm giúp bạn khỏi phải tự viết sáu thẻ và một khối JSON manifest. Dán chúng vào head trang web của bạn, điều chỉnh đường dẫn nếu cần và bạn hoàn thành trong vài giây thay vì vài phút.
- Tạo phía máy khách là lựa chọn duy nhất trên các thiết bị công ty bị khóa chặt không có trình chỉnh sửa ảnh. Vì không có gì được tải lên, không có rủi ro rò rỉ dữ liệu và không cần đánh giá tuân thủ cho hình ảnh nhạy cảm hoặc có thương hiệu.
- Chế độ văn bản và emoji cho phép bạn tạo favicon mà không cần bất kỳ hình ảnh nào. Gõ chữ cái đầu của thương hiệu, một chữ cái hoặc emoji, chọn phông chữ và màu sắc, và nhận một bộ đầy đủ — hoàn hảo cho các dự án cá nhân, nguyên mẫu hoặc các trang web chỉ cần một favicon tạm thời.
Các ứng dụng tạo favicon phổ biến
Mọi trang web mà mọi người đánh dấu hoặc cài đặt đều cần một favicon. Dưới đây là ba tình huống mà trình tạo trong trình duyệt tiết kiệm thời gian.
- Thiết lập một trang đích hoặc microsite mới. Tạo một bộ favicon đầy đủ từ logo thương hiệu trong vòng chưa đầy một phút, sao chép các thẻ vào head trang web và triển khai. Không cần công cụ thiết kế.
- Tạo biểu tượng PWA cho một ứng dụng web tiến bộ. Các biểu tượng PNG 192×192 và 512×512 được yêu cầu cho manifest.json. Tạo chúng cùng với phần còn lại của bộ favicon trong một bước thay vì thay đổi kích thước logo thủ công.
- Tạo biểu tượng tạm thời cho nguyên mẫu và trang web tạm. Gõ một chữ cái hoặc emoji, chọn màu nền và nhận các favicon thực tế mà không cần chờ tài sản thương hiệu cuối cùng từ nhóm thiết kế.
Ví dụ thực tế: tạo bộ favicon từ logo công ty
Bạn có logo PNG 500×500 và cần bộ favicon đầy đủ cho một trang web tiếp thị mới.
Mở trang này và thả logo PNG vào vùng tải lên. Hình ảnh được tải và bản xem trước xuất hiện bên cạnh lưới kích thước. Nhấp Tạo favicon. Trang vẽ logo lên sáu canvas ngoài màn hình ở kích thước 16, 32, 48, 180, 192 và 512 pixel và hiển thị từng kết quả. Bên dưới bảng xem trước, khối HTML sẵn sàng để dán xuất hiện với các mục rel="icon" cho kích thước 16/32/48, một liên kết apple-touch-icon cho kích thước 180 và một liên kết manifest cho các biểu tượng PWA. Đoạn manifest bên dưới liệt kê các biểu tượng 192 và 512. Nhấp Tải xuống ZIP — trang đóng gói tất cả sáu PNG cùng với manifest.json thành một kho lưu trữ ZIP duy nhất qua fflate. Toàn bộ quá trình mất hai giây và không tiêu tốn băng thông nào ngoài lần tải trang ban đầu.
Công cụ tạo ra những kích thước favicon nào?
Sáu kích thước: 16×16, 32×32 và 48×48 cho favicon trình duyệt tiêu chuẩn, 180×180 cho Apple Touch Icon và 192×192 và 512×512 cho biểu tượng manifest PWA. Mọi kích thước đều được xuất dưới dạng PNG. Các trình duyệt hiện đại chấp nhận favicon PNG qua .
Tôi có thể tạo favicon từ văn bản hoặc emoji không?
Có. Chuyển sang chế độ văn bản hoặc emoji, gõ một từ hoặc dán emoji, chọn phông chữ, màu chữ và màu nền, và nhấp Tạo. Văn bản được hiển thị trên một canvas ngoài màn hình ở độ phân giải cao và sau đó được thay đổi kích thước thành mọi kích thước favicon mục tiêu.
Hình ảnh có được tải lên máy chủ không?
Không. Hình ảnh không bao giờ rời khỏi thiết bị của bạn. Trang sử dụng File API của trình duyệt để đọc hình ảnh vào bộ nhớ và Canvas API để thay đổi kích thước và xuất từng favicon. Mở bảng Network trong DevTools trong khi tạo — các yêu cầu ra ngoài duy nhất là tải trang ban đầu và các cuộc gọi quảng cáo. Không có dữ liệu hình ảnh nào được truyền đi.
Những định dạng nào được chấp nhận để tải lên hình ảnh?
Bất kỳ định dạng nào trình duyệt có thể giải mã: PNG, JPEG, WebP, GIF và SVG (được trình duyệt raster hóa). Giới hạn kích thước tệp là 10 MB cho mỗi lần tải lên.
Tải xuống ZIP hoạt động như thế nào?
Trang sử dụng thư viện fflate (được tải theo yêu cầu từ đường dẫn vendor dùng chung) để đóng gói tất cả PNG đã tạo cùng với manifest.json thành một kho lưu trữ ZIP tiêu chuẩn. Việc đóng gói diễn ra hoàn toàn trong bộ nhớ trình duyệt — không tải lên, không có vòng lặp máy chủ. ZIP được phục vụ dưới dạng tải xuống Blob chỉ với một cú nhấp chuột.
Tôi có thể sử dụng các favicon này trên bất kỳ trang web nào không?
Có. Các favicon PNG được tạo hoạt động trên mọi trình duyệt hiện đại hỗ trợ thẻ . Apple Touch Icon 180×180 bao phủ iOS và Safari. Các biểu tượng PWA 192×192 và 512×512 đáp ứng các yêu cầu manifest cho Chrome trên Android và các trình duyệt hỗ trợ PWA khác.
Có tùy chọn định dạng .ico thực sự không?
Phiên bản hiện tại xuất ra PNG vì mọi trình duyệt hiện đại đều chấp nhận chúng qua . Định dạng .ico đa độ phân giải thực sự chưa được hỗ trợ và có thể được thêm vào trong bản phát hành trong tương lai.