Một bộ favicon đúng chuẩn không chỉ là một tệp: trình duyệt cần một tệp .ico đa kích thước, iOS cần apple-touch-icon 180px, Android cần PNG 192 và 512px cùng một web manifest. Công cụ này kết xuất tất cả từ một ảnh duy nhất và đóng gói vào một tệp ZIP, kèm đúng các thẻ HTML để dán vào <head> của bạn.
Bản xem trước hiển thị biểu tượng ở đúng cỡ 16, 32 và 48px để bạn kiểm tra nó vẫn dễ nhận ra ở kích thước tí hon trước khi phát hành.
Cách sử dụng
- Thêm logo của bạnẢnh vuông cho kết quả tốt nhất; ảnh khác sẽ được cắt giữa.
- Kiểm tra các cỡ nhỏBản xem trước 16px là thứ hầu hết người dùng thực sự nhìn thấy trên tab.
- Tải tệp ZIP vềfavicon.ico, sáu tệp PNG, site.webmanifest và một tệp html-snippet.txt sẵn để dán.
Một ảnh vào, cả một bộ favicon ra
Thả vào một logo hay biểu tượng đơn và trình tạo này dựng cả bộ mà một website hiện đại cần: một favicon.ico đa kích thước gói các bản 16, 32 và 48 pixel, các PNG riêng lẻ ở 16, 32, 48, 180 cho biểu tượng Apple touch, và 192 và 512 cho các bản cài Android và PWA, cùng một site.webmanifest. Mọi thứ tải về dưới dạng một tệp ZIP để bạn thả thẳng vào thư mục gốc dự án.
Bạn cũng nhận được một đoạn HTML head sẵn để dán với các thẻ link và meta đã được nối đúng. Sao chép nó vào mẫu của bạn, tải các tệp lên, và favicon hiện ra trên tab trình duyệt, dấu trang và lối tắt màn hình chính mà bạn không phải viết tay bất kỳ đánh dấu nào.
Biểu tượng sắc nét ở mọi kích thước
Favicon nhỏ đến khắc nghiệt, nên trình tạo kết xuất các bản xem trước đúng kích thước ở 16, 32 và 48 pixel, chính xác như cách một tab trình duyệt sẽ hiển thị chúng. Điều đó giúp bạn bắt được một logo bị nhòe nát ở 16px trước khi phát hành. Nếu ảnh nguồn của bạn không vuông, công cụ cắt vào giữa để biểu tượng vẫn cân đối thay vì bị bóp méo.
Cả quá trình chạy trong trình duyệt từ ảnh gốc của bạn, nghĩa là bạn có thể tạo các PNG favicon và một ICO từ một logo độ phân giải cao mà không cần tải lên hay tài khoản.
Mọi người dùng để làm gì
Ra mắt một website mới — Tạo favicon.ico và mọi kích thước PNG trong một lượt để tab và dấu trang trông hoàn thiện ngay ngày đầu.
Thêm biểu tượng cài đặt PWA — Xuất các PNG 192 và 512 cùng một site.webmanifest để ứng dụng của bạn cài với một biểu tượng màn hình chính đàng hoàng.
Biểu tượng Apple touch — Tạo apple-touch-icon 180x180 để dấu trang và màn hình chính iOS hiển thị một ô sắc nét.
Đổi thương hiệu một website hiện có — Đưa một logo mới qua trình tạo và thay cả bộ biểu tượng cùng lúc.
Bàn giao cho khách — Trao một tệp ZIP duy nhất gồm ico, các PNG, manifest và đoạn head để lập trình viên chỉ việc thả vào.
Kiểm tra khả năng đọc ở kích thước nhỏ — Dùng bản xem trước đúng kích thước 16px để xác nhận một logo chi tiết vẫn đọc được như một biểu tượng.
Logo không vuông — Đưa vào một chữ hiệu rộng và để việc cắt vào giữa biến nó thành một favicon vuông cân đối.
Dự án site tĩnh hay framework — Sao chép các thẻ head được tạo vào mẫu Next, Astro hay HTML thuần của bạn rồi phát hành.
Tạo trọn bộ favicon từ một tấm ảnh — trong trình duyệt, trong một lượt
Một favicon nghe như một điều nghĩ sau cùng chỉ vỏn vẹn 16×16 điểm ảnh, và suốt nhiều năm nó đúng là vậy. Các trình duyệt và nền tảng hiện đại đã âm thầm biến nó thành cả một dây chuyền nhỏ. Để làm cho đúng ngày nay, bạn cần một favicon.ico, một loạt PNG từ 16px lên tới 512px, một icon cảm ứng Apple cho màn hình chính iOS, một site.webmanifest để trang có thể được cài như một ứng dụng, và đúng khối thẻ <link> và <meta> trong <head> HTML của bạn. Thiếu một kích thước thì icon trên tab của bạn trông mờ nhòe trên màn hình retina; thiếu manifest thì icon "thêm vào màn hình chính" tụt về một ảnh chụp màn hình; làm sai khối thẻ thì một số nền tảng bỏ qua toàn bộ.
Đó là cả một mớ kết quả lích kích cho một việc mà bạn làm một lần cho mỗi dự án rồi quên hết chi tiết. IMG.DIY lấy một tấm ảnh nguồn duy nhất và tạo ra trọn bộ — tệp .ico, mọi kích thước PNG, web manifest, và một đoạn HTML để sao-chép-dán — đổi kích thước hoàn toàn trong trình duyệt của bạn bằng Canvas. Logo của bạn được đọc tại chỗ và kết xuất ra từng kích thước đích ngay trên thiết bị; không có gì được tải lên. Với một dấu hiệu thương hiệu hay logo của một sản phẩm chưa ra mắt mà bạn không muốn đăng lên máy chủ của bên thứ ba trước khi phát hành, sự bảo đảm tại chỗ đó đáng có, và nó chẳng tốn gì.
Vì toàn bộ dây chuyền chạy phía máy khách, nó cũng hoạt động ngoại tuyến một khi PWA đã được lưu bộ nhớ đệm, nên bạn có thể tạo lại icon trên một máy làm việc bị khóa chặt hoặc khi không có kết nối. Miễn phí, không tài khoản, không hình mờ nướng vào icon của bạn.
Điều làm nên khác biệt
- Trọn bộ, không chỉ một tệp .ico. ICO, các PNG từ 16 tới 512, icon cảm ứng Apple, và
site.webmanifesttrong một lần tải về. - Kèm HTML để sao-chép-dán. Đúng khối
<link>/<meta>để thả vào<head>của bạn, để các icon thực sự được ghi nhận trên các trình duyệt. - Không tải gì lên. Logo của bạn được đổi kích thước tại chỗ — hữu ích khi dấu hiệu là bí mật hoặc trước ra mắt.
- Một lượt, không cần trợ lý từng bước. Đưa vào một tấm ảnh, nhận về mọi thứ; không có luồng nhiều bước hỏi các lựa chọn nền tảng mà rồi bạn phải đi tra cứu.
- Ngoại tuyến và sạch. PWA lưu bộ nhớ đệm, không đăng ký, không hình mờ trên bất kỳ icon nào được tạo.
IMG.DIY so với các công cụ tạo favicon khác
| Khía cạnh | favicon.io | realfavicongenerator.net | Thủ công (ứng dụng thiết kế + mã) | IMG.DIY |
|---|---|---|---|---|
| Tệp tải lên | Có, lên máy chủ của họ | Có, lên máy chủ của họ | Không, tại chỗ | Không, ở lại trong trình duyệt |
| Trọn bộ (.ico + PNG + manifest) | Có | Có, rất kỹ lưỡng | Bạn tự lắp ráp | Có |
| Có cung cấp đoạn HTML | Có | Có, chi tiết | Bạn tự viết | Có |
| Số bước tới kết quả | Ít | Nhiều hơn (nhiều tùy chọn) | Nhiều | Một lượt |
| Hoạt động ngoại tuyến | Không | Không | Có | Có, sau lần truy cập đầu |
| Giá | Miễn phí | Gói miễn phí; tùy chọn trả phí | Chi phí ứng dụng + thời gian của bạn | Miễn phí |
| Yêu cầu tài khoản | Không | Không | Không | Không |
Nói thẳng về đối thủ: realfavicongenerator xuất sắc và thực sự kỹ lưỡng hơn — nó xem trước icon của bạn trên các nền tảng thật, xử lý các trường hợp biên như mặt nạ tab ghim của Safari và tạo chủ đề, và cho bạn tinh chỉnh diện mạo theo từng nền tảng. Nếu bạn muốn mức kiểm soát đó và không ngại tải ảnh của mình lên, thì đó là lựa chọn tuyệt vời. favicon.io thì nhanh, đơn giản và cũng tạo ra một bộ vững chắc. Khác biệt của IMG.DIY là sự kết hợp giữa kết quả trọn vẹn với không tải lên và một lượt: bạn nhận được đúng những sản phẩm bàn giao thực dụng — ico, các PNG, manifest, và HTML để nối chúng vào — mà không để logo của bạn rời khỏi trình duyệt và không phải bước qua một trợ lý cấu hình. Với "tôi có một logo, cho tôi mọi thứ cần dán vào, và đừng gửi tệp của tôi đi đâu cả", đó chính là sự phù hợp.
Vì sao chọn IMG.DIY
Bộ hoàn chỉnh
ICO + PNG 16/32/48/180/192/512 + manifest.
HTML sao chép-dán
Đúng các thẻ link được kèm dưới dạng một tệp văn bản.
Xem đúng kích thước
Thấy biểu tượng ở đúng cỡ 16/32/48px trước tiên.
Riêng tư
Logo của bạn không bao giờ rời khỏi trình duyệt.