Chuyển SVG sang icon

Q: Trang này khác gì so với trang chuyển SVG sang ICO?

[SVG sang ICO](/svg-to-ico) tập trung vào một file .ico duy nhất cho favicon và Windows. Trang này bao quát mọi nơi cần biểu tượng, gồm ICNS cho macOS và các file PNG kích thước cố định mà Android, iOS và cửa hàng ứng dụng yêu cầu.

Chỉ một logo vector có thể dùng cho mọi vị trí cần icon: favicon, lối tắt trên Windows, ứng dụng Mac và icon màn hình chính trên điện thoại. Trang này mặc định tạo file ICO đa kích thước và cho phép bạn chuyển sang ICNS hoặc PNG cho các nền tảng khác.

hoặc thả tệp JPG, JPEG, JPE … vào đây ·

Tối đa 95 MB mỗi tệp· Tối đa 20 tệp· Xóa sau 30 phút

Đầu ra

Chuyển sang

Tệp được xử lý trên máy chủ của chúng tôi và bị xóa sau 30 phút.

Chất lượng và màu sắc

Ảnh động đầu vào

Định dạng này chỉ chứa một ảnh duy nhất. Hãy chọn đầu ra GIF hoặc WebP nếu bạn muốn giữ chuyển động.

Kích thước biểu tượng

Biểu tượng đa kích thước chứa nhiều độ phân giải trong một tệp; trình duyệt và hệ điều hành sẽ chọn độ phân giải cần dùng.

Đổi kích thước đầu ra

Đổi kích thước ảnh đầu ra

Giữ kích thước gốc, hoặc nhập một cạnh và tỷ lệ khung hình sẽ được giữ nguyên.

Siêu dữ liệu và hồ sơ màu

Tự động xoay đúng chiều

Xoay ảnh theo thông tin hướng lưu trong EXIF để ảnh hiển thị đúng chiều ở mọi nơi.

Xóa siêu dữ liệu

Gỡ vị trí GPS, thông tin máy ảnh và chú thích. Hồ sơ màu có thể được giữ riêng ở bên dưới.

Giữ hồ sơ màu

Giữ lại hồ sơ ICC được nhúng để màu sắc vẫn chính xác sau khi chuyển đổi.

Không gian màu

sRGB phù hợp cho màn hình và web. Giữ nguyên bản gốc cho quy trình in ấn; thang độ xám sẽ loại bỏ màu.

Thẻ DPI

dpi

Chỉ là siêu dữ liệu, 0 giữ giá trị gốc. Máy in và một số cổng thông tin đọc con số này; nó không thay đổi kích thước điểm ảnh.

Cách sử dụng công cụ này

1
Tải lên file SVG hình vuông
Thêm file SVG logo của bạn, tốt nhất có viewBox hình vuông. Bạn có thể thêm tối đa 20 file cùng lúc, ví dụ một bản nền sáng và một bản nền tối.
2
Chọn định dạng icon
Mặc định đã chọn ICO với Kích thước biểu tượng là Tất cả kích thước (16–256). Chọn ICNS trong Chuyển sang cho macOS, hoặc PNG kèm chiều rộng trong Đổi kích thước ảnh đầu ra cho biểu tượng điện thoại hoặc cửa hàng ứng dụng.
3
Chuyển đổi và đặt file vào đúng chỗ
Nhấn Chuyển sang ICO (nhãn nút thay đổi theo định dạng bạn chọn), tải xuống rồi đặt từng file vào đúng nơi mà nền tảng đó yêu cầu.

Không có một định dạng biểu tượng duy nhất. Windows và trình duyệt dùng ICO, macOS dùng ICNS, còn điện thoại dùng bộ file PNG. Bắt đầu từ SVG nghĩa là mỗi định dạng đều được vẽ mới từ vector, sắc nét ở từng kích thước.

Chuyển SVG sang icon: một file vector, ba loại file icon

File biểu tượng là một bộ chứa các ảnh bitmap nhỏ, không phải vector. Hệ điều hành chọn bitmap gần nhất với kích thước cần dùng, nên một biểu tượng tốt có nhiều bitmap, mỗi cái được vẽ theo lưới riêng của nó.

Thiết lập ICO trên trang này tạo một file chứa mọi kích thước từ 16 đến 256 px, đủ cho favicon.ico và lối tắt Windows. Đổi Chuyển sang thành ICNS để có biểu tượng cho Apple, hoặc PNG cho các kích thước đơn mà Android, iOS và cửa hàng ứng dụng yêu cầu.

Bảng dưới liệt kê những gì các nền tảng lớn công bố cho từng vị trí biểu tượng.

File icon mà mỗi nền tảng yêu cầu
Tổ chức	Yêu cầu	Nguồn
Màn hình nền và thanh tác vụ Windows	ICO chứa nhiều kích thước, gồm 16, 32, 48 và 256 px	—
Favicon website	favicon.ico ở thư mục gốc của website với 16, 32 và 48 px; PNG 180 × 180 px cho apple-touch-icon	—
Biểu tượng ứng dụng macOS	ICNS hoặc asset catalog của Xcode, kích thước tối đa 1024 × 1024 px	—
Trang ứng dụng trên Google Play	PNG 32 bit 512 × 512 px, tối đa 1.024 KB	—
Apple App Store	PNG 1024 × 1024 px, không trong suốt	—

SVG

Đồ họa vector SVG

SVG là định dạng vector dựa trên XML được W3C chuẩn hóa năm 2001. Thay vì điểm ảnh, SVG mô tả hình khối, đường path và văn bản, nên luôn sắc nét ở mọi kích thước và thường rất nhỏ với logo và biểu tượng. Định dạng hỗ trợ nền trong suốt, định kiểu bằng CSS, script và ảnh động, và mọi trình duyệt đều hiển thị nguyên bản. SVG không phù hợp cho ảnh chụp, và các hình minh họa phức tạp có thể hiển thị chậm. Illustrator, Inkscape, Figma và trình duyệt đều mở và chỉnh sửa được SVG.

Nén: –
Độ trong suốt: Có
Ảnh động: Có
Ra mắt: 2001 · W3C

Công cụ chuyển đổi SVG

ICO

Biểu tượng Windows (ICO)

ICO là định dạng biểu tượng của Microsoft, dùng cho biểu tượng chương trình Windows và favicon của trang web. Một tệp .ico có thể chứa nhiều ảnh ở các kích thước khác nhau, như 16×16, 32×32, 48×48 và 256×256 pixel, để hệ thống chọn kích thước phù hợp nhất. Mỗi ảnh có thể được lưu dưới dạng bitmap hoặc dữ liệu PNG và hỗ trợ đầy đủ nền trong suốt alpha. ICO không dành cho ảnh chụp hay tác phẩm cỡ lớn. Trình duyệt, Windows và hầu hết trình chỉnh sửa biểu tượng đọc được định dạng này.

Nén: Không mất dữ liệu
Độ trong suốt: Có
Ảnh động: Không
Ra mắt: Microsoft

Công cụ chuyển đổi ICO

Người ta tìm cách chuyển SVG sang biểu tượng khi có một logo vector và nhiều nền tảng cần phục vụ, mỗi nền tảng có định dạng biểu tượng riêng, từ favicon.ico trên website đến ICNS trên Mac và các file PNG theo kích thước trên cửa hàng ứng dụng.

Chuyển SVG sang file icon cho Windows, Mac, Android và iOS

Giữ ICO và đặt Kích thước biểu tượng là Tất cả kích thước. Đổi tên kết quả thành favicon.ico để đặt ở thư mục gốc website, hoặc chọn file này trong hộp thoại Change Icon của lối tắt Windows.

Một file .ico dùng được cho tab, dấu trang và thanh tác vụ
Thêm PNG 180 px cho dấu trang trên màn hình chính iPhone

Thiết kế SVG vẫn rõ nét ở 16 px

Biểu tượng 16 × 16 px chỉ có tổng cộng 256 pixel. Hầu hết thương hiệu giữ một biểu tượng riêng, thường chỉ là ký hiệu hoặc một chữ cái, với hình khối đậm và ít màu; nếu chưa có, hãy tạo một bản SVG đơn giản hóa dành cho biểu tượng.

Hãy kiểm tra viewBox trước khi chuyển. viewBox rộng sẽ tạo ra biểu tượng có dải trống phía trên và dưới hình, nên hãy cắt về hình vuông trước; hướng dẫn cắt ảnh theo tỉ lệ nói về cách cắt vuông, còn SVG sang PNG cho bản xem trước lớn nhanh để đánh giá thiết kế.

Câu hỏi thường gặp về chuyển SVG sang icon

Trang này khác gì so với trang chuyển SVG sang ICO?

SVG sang ICO tập trung vào một file .ico duy nhất cho favicon và Windows. Trang này bao quát mọi nơi cần biểu tượng, gồm ICNS cho macOS và các file PNG kích thước cố định mà Android, iOS và cửa hàng ứng dụng yêu cầu.

Mỗi hệ điều hành dùng định dạng icon nào?

Windows đọc ICO, macOS đọc ICNS hoặc asset catalog tạo trong Xcode, còn Android và iOS dùng ảnh PNG cung cấp theo các kích thước pixel cố định.

Có thể nhận đủ mọi kích thước PNG cho ứng dụng chỉ trong một lần chuyển đổi không?

Không. Một file PNG chỉ chứa một kích thước nên mỗi lần chuyển đổi chỉ tạo ra một chiều rộng. Hãy đặt Đổi kích thước ảnh đầu ra thành một kích thước, chuyển đổi, sau đó đổi số và chuyển lại; mỗi kích thước đều được vẽ sắc nét từ ảnh vector.

File ICNS tạo từ trang này có hỗ trợ icon Retina trên Mac không?

File chứa các kích thước từ 16 đến 256 px. Biểu tượng ứng dụng macOS hiện nay còn có các mục 512 px và 1024 px cho màn hình Retina, do Xcode hoặc iconutil của Apple tạo từ PNG; hãy xuất hai kích thước này dạng PNG tại đây rồi thêm vào bộ biểu tượng.

Icon có nên giữ nền trong suốt không?

Với ICO, ICNS và các lớp biểu tượng khởi chạy của Android thì nên giữ nền trong suốt: hệ thống sẽ tự vẽ nền của riêng nó. Biểu tượng App Store của iOS là ngoại lệ; Apple từ chối biểu tượng quảng bá 1024 px có kênh alpha, nên hãy đặt nền đặc trong SVG cho file PNG đó.

Vì sao logo nhiều chi tiết lại thành một vệt nhòe khi làm icon nhỏ?

Ở 16 hoặc 32 px không còn chỗ cho nét mảnh hay chữ nhỏ. Hãy làm nét dày hơn để phủ ít nhất một pixel đầy đủ ở kích thước nhỏ nhất và bỏ phần chữ thương hiệu.