30 điểm bởi huiya 2025-02-13 | 6 bình luận | Chia sẻ qua WhatsApp

Favicon Generator

Sau khi xem Cách chuẩn bị Favicon trong năm 2025, tôi đã thử tạo một công cụ tự động sinh Favicon theo nội dung của bài viết đó.

Thử dùng

Cách dùng

  1. Tải lên một ảnh SVG có tỷ lệ vuông.
  2. Thêm đoạn mã HTML được tạo ra và các tệp ảnh đã tải xuống vào dự án.
  3. Xong.

Chi tiết

  • ✅ Tệp SVG được tối ưu hóa bằng SVGO.

  • ✅ Tệp ICO bao gồm ảnh 16px và 32px.

  • ✅ Tạo ra các ảnh PNG kích thước 180px, 192px, 512px.

  • ❌ Tệp PNG không được nén bằng Squoosh.

Cảm nhận

Tôi đã làm cùng với GPT; phần UI thì nó làm khá tốt, nhưng ở phần nhập các module bên ngoài thì gặp khá nhiều lỗi. Phần này con người vẫn phải can thiệp.
Nó cũng không tạo được tệp ICO, nên tôi phải mở một cuộc trò chuyện mới riêng để sinh lại đoạn mã.

Lâu rồi mới làm thứ như thế này nên rất vui.

6 bình luận

 
honglu 2025-02-19

Mình đã sử dụng rất hữu ích! Cảm ơn bạn.

 
hi098123 2025-02-13

Nén PNG thì không cần dùng Squoosh
Nếu dùng UPNG https://github.com/photopea/UPNG.js thì có lẽ có thể nén ngay trong code hiện tại mà không quá khó.
(Mình nhớ là khi từng so sánh trước đây thì với PNG, hiệu năng lẫn tỷ lệ nén của nó tương đương hoặc nhỉnh hơn một chút. Không hoàn toàn chắc chắn.)
Có thể chỉ định mức nén bằng giá trị cnum từ 0~256, và khoảng 128 thì có lẽ sẽ nén ở mức dùng ổn.

 
secret3056 2025-02-13

Có lẽ sẽ tốt hơn nếu bổ sung thông tin rằng việc tạo mask icon cần phải tự thực hiện bằng cách loại bỏ màu sắc.

 
secret3056 2025-02-13

À, vậy ra mask icon giờ không còn được dùng nữa nhỉ....

 
xguru 2025-02-13

Wow, hay thật. Đọc bài xong mới thấy đây đúng là một dự án làm ngay cùng AI haha. Có lẽ thế giới đang thay đổi theo cách như vậy.

 
huiya 2025-02-13

Vì bớt đi lao động đơn điệu nên có vẻ gánh nặng công việc cũng nhẹ hơn. Đúng là một thời đại tuyệt vời!