sẵn sàng cho ngày ra mắt
Chuyển ảnh thành icon ngay trên web
OneImageTool biến một logo, ảnh đại diện, linh vật hay dấu hiệu sản phẩm thành đúng bộ tệp icon mà một website hay ứng dụng thật sự cần. Hãy nạp ảnh lên, nắn nó thành hình vuông gọn gàng, xem trước trên tab trình duyệt và màn hình chính điện thoại, rồi lưu favicon.ico, các tệp PNG, Apple Touch Icon và một manifest PWA. Nếu ảnh nguồn còn cần dọn dẹp, hãy cắt vuông trước, hoặc nén bớt bản xuất quá nặng — cả hai công cụ đều chạy ngay trong trình duyệt của bạn.
Mọi thứ đều chạy trong trình duyệt. Điều đó rất quan trọng khi ảnh nguồn là logo riêng của khách hàng, dấu hiệu của một ứng dụng chưa ra mắt hay một ý tưởng chớp nhoáng mà bạn không muốn gửi lên máy chủ nào khác. Hãy chỉnh lề trong, màu nền và độ bo góc trong lúc theo dõi bản xem trước trên các thiết bị.
Favicon cho website
Tạo icon trên tab trình duyệt từ chính ảnh nguồn đó. Hãy dùng Cắt cho một dấu hiệu đậm nét, hoặc Thu vừa kèm lề trong khi logo cần khoảng thở.
Tệp ICO cho lối tắt
Tải về một tệp ICO đa kích thước cho favicon kiểu cũ và lối tắt trên máy tính. Các cỡ nhỏ đã được tinh chỉnh để vẫn sắc nét trên tab.
Icon ứng dụng và PWA
Sinh ra các cỡ PNG lớn hơn cho màn hình chính và hộp thoại cài đặt. Gói tải về có sẵn tệp web manifest và đoạn mã HTML đã cấu hình.
Xem trước nhiều thiết bị
Khác với những công cụ chỉ xem trước trên tab, OneImageTool dựng cả màn hình chính iOS, thanh cài đặt Android và ô tile Windows — tất cả cập nhật ngay khi bạn chỉnh.
một lần tải, dùng khắp nơi
Công cụ chuyển ảnh thành icon sinh ra những gì
Một quy trình tử tế không chỉ đưa cho bạn đúng một tấm hình bé xíu. Trang giới thiệu, tài liệu, ứng dụng, PWA và các dự án phụ đều cần nhiều tệp cùng những đoạn mã HTML đi kèm. Hãy lấy trọn bộ thân thiện với trình duyệt trong một tệp ZIP.
Gói tải về gồm favicon.ico, các cỡ PNG thông dụng, một tệp web manifest, đoạn mã HTML và README — đủ dùng cho cả website thường lẫn cấu hình PWA.
- favicon.icoICO
- favicon-16x16.png … 512x512.pngPNG
- apple-touch-icon.pngiOS
- android-chrome-192x192.pngPWA
- site.webmanifestJSON
- favicon-html.txtHTML
- README.txtDOC
năm thao tác nhỏ
Cách dùng công cụ chuyển ảnh thành icon
Nạp ảnh
Kéo vào một tệp PNG, JPG, WebP hoặc SVG. Ảnh nguồn hình vuông là hợp nhất, nhưng ảnh ngang vẫn dùng được.
Nắn hình
Chọn Thu vừa, Cắt hoặc Kéo giãn. Hãy xem các bản mô phỏng trình duyệt, iOS và Android cập nhật tức thì.
Tạo kiểu
Thêm lề trong, bo tròn góc, giữ nền trong suốt hoặc chọn một ô nền đặc.
Xem trước
Hãy kiểm tra bản mô phỏng tab 16px và màn hình chính. Nếu icon trên tab khó nhìn, hãy thêm lề trong hoặc một nền đặc.
Tải về
Lưu trọn gói icon gồm favicon.ico, các tệp PNG, manifest, đoạn mã HTML và README.
từ tí hon tới sẵn sàng cài đặt
Những kích thước icon nên xuất ra
Icon xuất hiện ở những nơi rất khác nhau. Tab trình duyệt cần một biểu tượng đậm nét, gần như không có chi tiết. Màn hình cài đặt PWA thì hiển thị được dấu hiệu lớn hơn. Công cụ này tạo mọi kích thước thông dụng chỉ từ một ảnh nguồn.
| Kích thước | Dùng ở đâu | Xem trước trong công cụ | Mẹo |
|---|---|---|---|
| 16×16 | Tab trình duyệt, favicon kiểu cũ | Mô phỏng tab trình duyệt | Hãy dùng dáng hình đậm nét, tối giản chi tiết |
| 32×32 | Favicon PNG hiện đại, tab màn hình nét cao | Lưới kích thước | Mức mặc định thực dụng cho khai báo favicon |
| 48×48 | Lối tắt trên máy tính, ô tile Windows | Mô phỏng ô tile Windows | Hãy giữ hình dạng nằm giữa |
| 180×180 | Apple Touch Icon | Mô phỏng màn hình chính iOS | Nền đặc thường trông gọn gàng hơn trên iOS |
| 192×192 | Chrome trên Android, PWA | Mô phỏng cài đặt Android | Được dùng trong mục icons của manifest.json |
| 512×512 | Màn hình chờ PWA, giao diện cài đặt | Lưới kích thước | Hãy bắt đầu từ một ảnh nguồn chất lượng cao |
làm bản tí hon cho thật rõ
Danh sách kiểm tra thiết kế trước khi tải về
Favicon rất nhỏ — nét mảnh, chữ li ti, ảnh chụp rối mắt và ảnh màn hình thường bị nhòe thành một mảng. Hãy dùng bản xem trước trực tiếp trên tab và màn hình chính để thử độ dễ nhìn trước khi xuất tệp.
Nếu bản xem trước tab 16px khó đọc, hãy thử cắt sát hơn, thêm lề trong hoặc đặt một nền đặc. Những hình dạng nằm giữa và tương phản rõ sẽ chịu được cú nhảy từ ảnh lớn xuống icon tốt hơn nhiều.
Logo đơn giản, linh vật vẽ phẳng, dấu hiệu vuông vắn, chữ cái đầu đậm nét và biểu tượng tương phản cao.
Ảnh chụp nhiều chi tiết, nét viền mảnh, ảnh màn hình, chữ dài và những dấu hiệu chạm sát mép.
dán vào là chạy
Đặt các tệp icon vừa tạo vào đâu
Với trang tĩnh, hãy để các tệp ở thư mục gốc công khai hoặc trong thư mục tài nguyên được sao lên bản chạy thật. Dán đoạn mã HTML vào bên trong <head>. Hãy giữ nguyên đường dẫn favicon sau khi ra mắt để dấu trang và lối tắt đã cài vẫn giữ đúng icon.
Bộ nhớ đệm favicon rất lì trong lúc thử nghiệm — hãy dùng cửa sổ ẩn danh hoặc đổi tên tệp khi đang thử.
public/
├── favicon.ico
├── favicon-32x32.png
├── apple-touch-icon.png
├── android-chrome-192x192.png
├── android-chrome-512x512.png
└── site.webmanifest