Chuyển SVG sang ICO Scalable Vector Graphics ↔ Icon Miễn phí Trực tuyến An toàn

Vì sao người ta chuyển SVG sang ICO

Một tệp ICO là một biểu tượng. Đó là hình ảnh nhỏ xuất hiện trên thẻ của trình duyệt bên cạnh tên một trang, trong danh sách dấu trang, trên một lối tắt và ở góc cửa sổ chương trình trên Windows. Nếu bạn điều hành một trang web, bạn muốn có một biểu tượng mang dấu hiệu của mình. Nếu bạn viết một chương trình, bạn cần một biểu tượng cho tệp thực thi của nó. Và nếu bạn có một logo, rất có thể đó là một bản vẽ vector ở định dạng SVG. Đó là lý do người ta chuyển SVG sang ICO: họ có bản vẽ của dấu hiệu, và họ cần tệp biểu tượng mà trình duyệt và hệ điều hành vẫn gọi đích danh.

Một tệp SVG không phải một bức ảnh. Nó là một tập hợp chỉ dẫn để vẽ ra một bức ảnh: vẽ một hình tròn ở đây, một đường cong ở kia, tô hình này bằng màu đó. Vì là chỉ dẫn chứ không phải điểm ảnh, một SVG có thể hiển thị ở bất kỳ kích thước nào mà không bị mờ. Ngược lại, một biểu tượng là một nhúm hình ảnh nhỏ gói trong một tệp, mỗi hình làm cho một kích thước cụ thể. Trang này làm theo chỉ dẫn của SVG của bạn một lần cho mỗi kích thước và gói các kết quả vào một tệp ICO.

Trang này chuyển SVG sang ICO ngay trong trình duyệt của bạn. Bản vẽ được dựng trong một hộp cát nơi không có gì trong tệp có thể chạy, và không có gì được tải lên. Bên dưới bạn sẽ thấy cách nó hoạt động, tệp chứa những kích thước nào, vì sao biểu tượng nhỏ là một vấn đề đặc biệt và nên làm gì với nó.

Phép chuyển đổi hoạt động như thế nào

Sáu kích thước trong một tệp

Tệp ICO tạo ra chứa sáu kích thước trong một tệp: 16, 32, 48, 64, 128 và 256 điểm ảnh. Mỗi kích thước được vẽ lại từ SVG thay vì thu nhỏ từ cái này sang cái kia, nên phiên bản 16 điểm ảnh là các chỉ dẫn được làm theo ở 16 điểm ảnh, chứ không phải một bản sao thu nhỏ của bản lớn. Tất cả đều giữ độ trong suốt. Một hệ điều hành hay trình duyệt sau đó chọn kích thước nào hợp với nơi biểu tượng được hiển thị.

Một hộp cát nơi không gì có thể chạy

Về nguyên tắc, một tệp SVG có thể chứa tập lệnh và tham chiếu đến những thứ khác. Để điều đó không bao giờ là rủi ro, bản vẽ được dựng trong một hộp cát nơi không có gì trong tệp có thể chạy. Chỉ có các hình được tô. Điều này an toàn ngay cả với các tệp bạn tải xuống từ nơi bạn không hoàn toàn tin cậy.

Vì sao vẽ lại tốt hơn thu nhỏ

Khi bạn thu nhỏ một bức ảnh lớn thành một bức rất nhỏ, các chi tiết hòa lẫn vào nhau và đường nét thành màu xám. Vẽ lại từ các chỉ dẫn vector ở kích thước đích cho kết quả sắc nét nhất mà mỗi kích thước có thể có, vì các đường được đặt trực tiếp trên lưới điểm ảnh.

Điều gì được giữ lại

Sáu kích thước

Bạn nhận được 16, 32, 48, 64, 128 và 256 điểm ảnh, bao quát những nơi biểu tượng thường được hiển thị: thẻ trình duyệt, thanh tác vụ, lối tắt màn hình, danh sách tệp và bản xem trước lớn.

Độ trong suốt

Độ trong suốt được giữ ở cả sáu kích thước. Các vùng của SVG không có màu tô vẫn trong suốt trong ICO, nên biểu tượng mang màu của bất cứ thứ gì nằm sau nó.

Hình dạng của dấu hiệu

Bản vẽ được giữ nguyên, với màu sắc và hình dạng của nó. Nếu SVG không vuông, nó được đặt vừa vào hình vuông của mỗi biểu tượng mà không bị kéo giãn.

Điều bạn nên biết trước khi chuyển SVG sang ICO

Một biểu tượng là một bản vẽ khác

Một biểu tượng không phải một bức ảnh nhỏ, nó là một bản vẽ khác. Bất cứ thứ gì có đường nét mảnh hay chữ nhỏ đều thành một mớ nhoè ở 16 điểm ảnh, dù được dựng cẩn thận đến đâu. Một logo trông tuyệt vời trên áp phích có thể không đọc được khi làm favicon. Nếu kết quả trông đục, câu trả lời là một SVG đơn giản hơn thay vì một phép chuyển đổi tốt hơn.

Thiết kế cho kích thước nhỏ nhất

Các biểu tượng tốt nhất được làm với kích thước nhỏ nhất trong đầu: một hình đậm, số màu hạn chế, không có đường chân tóc và không có chữ ngoài một chữ cái đơn. Nếu có thể, hãy chuẩn bị một phiên bản đơn giản hóa của logo làm một SVG riêng cho mục đích này, rồi chuyển SVG sang ICO với nó.

Phông chữ và hình ảnh từ nơi khác không được xử lý

Phông chữ và hình ảnh mà SVG kéo từ nơi khác không được xử lý trong hộp cát. Văn bản đặt bằng phông web tải từ máy chủ rơi về phông hệ thống, và một hình ảnh liên kết từ bên ngoài tệp sẽ bị thiếu. Để có kết quả tốt nhất, hãy chuyển văn bản thành đường viền và nhúng các hình ảnh.

Cách chuyển SVG sang ICO ở đây

Thêm bản vẽ của bạn

Thả SVG lên trang hoặc chọn nó từ thiết bị của bạn. Nó được đọc bên trong trình duyệt và không được tải lên.

Chuyển đổi

Bấm nút. Sáu kích thước được vẽ lần lượt, mất một lát. Hãy để trang mở cho đến khi xong.

Tải xuống và thử

Tải tệp ICO xuống và thử nó ở nơi nó sẽ được dùng. Trên một trang web, hãy đặt nó trong thư mục gốc với tên favicon.ico, hoặc liên kết đến nó trong phần đầu của trang, và nhìn vào thẻ của trình duyệt. Trên Windows, bạn có thể gán nó cho một lối tắt và xem nó trông thế nào ở nhiều kích thước.

Nhìn kỹ hơn vào SVG và ICO

Vector và gói

Một SVG là một bản vẽ đơn có thể dựng ở bất kỳ kích thước nào. Một ICO là một vật chứa với nhiều hình ảnh bên trong, mỗi hình có kích thước cố định. Phần mềm hiển thị một biểu tượng chọn hình gần nhất với kích thước nó cần, tránh việc co giãn gây mờ. Chuyển SVG sang ICO là dựng bản vẽ ở những kích thước mà vật chứa được mong đợi chứa.

Biểu tượng được dùng ở đâu

Trình duyệt dùng các kích thước nhỏ nhất cho thẻ và các kích thước lớn hơn cho dấu trang và trang thẻ mới. Windows dùng chúng cho thanh tác vụ, menu Start và Explorer. Thiết bị di động có các bộ kích thước hình riêng cho màn hình chính, thường là tệp PNG, không phải ICO. Nếu bạn đang chuẩn bị một biểu tượng ứng dụng cho điện thoại, Chuyển SVG sang PNG ở các kích thước nền tảng yêu cầu là con đường tốt hơn.

Favicon ngày nay

Các trình duyệt hiện đại chấp nhận PNG và thậm chí SVG làm favicon, nhưng ICO vẫn là định dạng hoạt động ở mọi nơi, kể cả trình duyệt cũ, một số trình đọc nguồn cấp và công cụ tự động tìm favicon.ico. Có một tệp là lựa chọn an toàn.

Các tình huống thường gặp chi tiết

Favicon của một trang web

Chuyển SVG sang ICO, lưu tệp là favicon.ico ở thư mục gốc của trang và liên kết đến nó. Thẻ của mọi trình duyệt sẽ mang dấu hiệu của bạn, khiến trang dễ nhận ra giữa nhiều thẻ đang mở.

Biểu tượng của một chương trình Windows

Các chương trình trên Windows mang một biểu tượng trong tệp thực thi và trong các lối tắt của chúng. Lập trình viên cần một ICO nhiều kích thước cho việc này. Sáu kích thước bạn nhận được bao quát các yêu cầu thông thường.

Lối tắt và thư mục

Trên Windows bạn có thể cho một lối tắt hay một thư mục biểu tượng riêng của bạn. Một ICO làm từ logo của bạn giúp màn hình hoặc các thư mục dự án dễ nhận ra hơn.

Trang của doanh nghiệp nhỏ và blog

Favicon là một chi tiết nhỏ khiến trang trông hoàn chỉnh. Nếu logo của bạn là một SVG, phép chuyển đổi này tạo ra tệp mà các công cụ xây dựng trang yêu cầu bạn tải lên.

Lời khuyên thực tế trước khi chuyển SVG sang ICO

Đơn giản hóa bản vẽ

Hãy bỏ các đường mảnh, bỏ chữ hoặc giữ một chữ cái, và dùng các hình đậm. Hãy xem SVG ở 16 điểm ảnh trong chương trình vẽ trước khi chuyển, để thấy biểu tượng nhỏ nhất sẽ trông thế nào.

Làm bản vẽ vuông

Biểu tượng là hình vuông. Nếu logo của bạn rộng, hãy đặt nó trên một khung vuông có chút lề, để nó không bị cắt và không nhỏ xíu trong hình vuông.

Kiểm tra độ tương phản

Thẻ trình duyệt có thể sáng hoặc tối. Một dấu hiệu có độ tương phản mạnh với cả hai nền dễ thấy hơn. Một đường viền trắng mảnh quanh dấu hiệu tối, hoặc một hình màu đặc, thường hiệu quả.

Giữ SVG

SVG là bản chủ. Nếu sau này bạn quyết định đổi biểu tượng, bạn sẽ cần nó để chuyển SVG sang ICO lần nữa.

Những câu hỏi mọi người hay hỏi trước khi chuyển đổi

Vì sao biểu tượng của tôi trông mờ ở 16 điểm ảnh?

Vì 16 điểm ảnh là rất ít. Đường nét mảnh và chữ nhỏ không thể biểu diễn ở đó. Hãy đơn giản hóa bản vẽ thay vì tìm một phép chuyển đổi tốt hơn.

Tệp chứa những kích thước nào?

16, 32, 48, 64, 128 và 256 điểm ảnh, mỗi kích thước được vẽ lại từ SVG, tất cả đều có độ trong suốt.

Độ trong suốt có được giữ không?

Có. Một nền trong suốt trong SVG vẫn trong suốt ở cả sáu kích thước của ICO.

Tôi có thể dùng tệp làm favicon không?

Có. Hãy đặt tên là favicon.ico, đặt nó ở thư mục gốc của trang, hoặc liên kết đến nó từ phần đầu các trang của bạn.

Tệp của tôi có được tải lên không?

Không. Phép chuyển đổi chạy trong trình duyệt của bạn và tệp không bao giờ rời khỏi thiết bị của bạn.

Tôi có thể tạo SVG từ một biểu tượng không?

Có, ở một mức độ. Chuyển ICO sang SVG vẽ theo một biểu tượng thành các hình, dù kích thước nhỏ giới hạn những gì có thể khôi phục.

Chọn khôn ngoan khi bạn chuyển SVG sang ICO

ICO hay PNG?

Với một favicon hoạt động ở mọi nơi, hãy chọn ICO. Với biểu tượng ứng dụng trên điện thoại và hình ảnh trên trang web, PNG là định dạng thông thường. Chuyển SVG sang PNG cho bạn điều đó.

Hãy nghĩ đến cả bộ

Nếu bạn đang chuẩn bị một thương hiệu, bạn có thể cần một logo dạng PNG, một favicon dạng ICO và một phiên bản in được dạng PDF. Chuyển SVG sang PDF giữ bản vẽ là một bản vẽ cho in ấn.

Thử trên một thẻ thật

Hãy nhìn biểu tượng trong một thẻ trình duyệt thật, ở cả giao diện sáng và tối. Đó là nơi hầu hết mọi người sẽ gặp nó.

Có được kết quả tốt sau khi chuyển đổi

Xóa bộ nhớ đệm của trình duyệt

Trình duyệt giữ favicon rất lâu. Nếu bạn thay một biểu tượng mà vẫn thấy cái cũ, hãy xóa bộ nhớ đệm hoặc mở trang trong cửa sổ riêng tư.

Kiểm tra mọi kích thước

Nếu bạn có một công cụ mở được tệp ICO, hãy xem từng kích thước. Một dấu hiệu ổn ở 256 điểm ảnh có thể không đọc được ở 16, và điều đó cho bạn biết có nên đơn giản hóa không.

Đặt tên đúng

Trình duyệt mặc định tìm favicon.ico ở thư mục gốc của một trang. Hãy giữ tên đó trừ khi bạn liên kết rõ ràng đến tệp.

Thiết kế một dấu hiệu sống sót ở kích thước nhỏ nhất

Bắt đầu từ lưới 16 điểm ảnh

Cách đáng tin nhất để có kết quả tốt khi bạn chuyển SVG sang ICO là thiết kế với kích thước nhỏ nhất trong đầu. Hãy tưởng tượng một lưới mười sáu nhân mười sáu ô vuông và hỏi bạn có thể đặt gì lên đó. Một hình tròn, một chữ cái, một ký hiệu đơn giản: được. Một chữ ký, một huy hiệu có khẩu hiệu: không. Các kích thước lớn hơn sẽ trông ổn dù bạn vẽ gì, nên kích thước nhỏ là ràng buộc để thiết kế theo.

Dùng hình mạnh và ít màu

Hai hoặc ba màu có độ tương phản rõ đọc tốt hơn một dải chuyển sắc nhiều màu. Các hình đặc lấp đầy phần lớn hình vuông dễ nhận ra hơn các đường viền mảnh, vì mỗi điểm ảnh mang nhiều dấu hiệu hơn.

Chừa một chút khoảng thở

Một dấu hiệu chạm mép hình vuông có thể trông chật, và một số hệ thống tự thêm bo tròn hay viền. Một lề một hoặc hai điểm ảnh ở kích thước nhỏ nhất giữ hình dạng nguyên vẹn.

Đặt cạnh các biểu tượng khác

Hãy mở vài thẻ của các trang nổi tiếng và so sánh. Bạn sẽ thấy các biểu tượng hoạt động tốt nhất rất đơn giản. Hãy vay mượn kỷ luật đó trước khi chuyển SVG sang ICO, và kết quả của bạn sẽ nổi bật giữa một đám thẻ.

Quyền riêng tư và xử lý

Vì sao chuyển đổi cục bộ quan trọng với bản vẽ

Logo và dấu hiệu thương hiệu có thể còn bí mật trước khi được công bố. Nhiều bộ chuyển đổi trực tuyến tải tệp của bạn lên máy chủ, xử lý và gửi lại kết quả, và trong một lúc một bản sao nằm trên một máy bạn không kiểm soát. Ở đây trình duyệt của chính bạn làm việc, nên bản vẽ ở lại trên thiết bị của bạn.

Điều gì xảy ra khi bạn rời đi

Khi bạn đóng trang, tệp đã chuyển đổi biến mất khỏi trình duyệt, nên hãy tải xuống trước. Không có gì về bản vẽ của bạn được giữ lại.

Nếu có gì trục trặc

Biểu tượng ra trống

SVG có thể thiếu kích thước hoặc khung nhìn (view box). Hãy mở nó trong trình soạn thảo văn bản và kiểm tra nó có chiều rộng và chiều cao hoặc khung nhìn, hoặc sửa trong chương trình vẽ.

Biểu tượng bị cắt

Một số SVG có phần tử kéo ra ngoài vùng đã khai báo. Hãy điều chỉnh khung nhìn trong bản gốc để mọi thứ nằm vừa bên trong.

Trang bị treo

Mọi thứ chạy trên thiết bị của bạn. Hãy thử lại trên máy tính, hoặc với một bản vẽ đơn giản hơn.

Công cụ liên quan

Cùng họ công cụ này bao gồm các công việc lân cận. Cho hình ảnh ở các kích thước tùy chọn, dùng Chuyển SVG sang PNG hoặc Chuyển SVG sang JPG. Cho một tài liệu giữ sắc nét ở mọi mức phóng to, Chuyển SVG sang PDF giữ bản vẽ là một bản vẽ. Để vẽ theo hình ảnh trở lại thành các hình, Chuyển ICO sang SVG, Chuyển PNG sang SVG và Chuyển JPG sang SVG làm được việc đó.

Một ví dụ cụ thể

Giả sử bạn vừa bắt đầu một blog nhỏ, và logo của bạn là một SVG: một chiếc lá xanh với tên blog bên dưới. Bạn thả SVG vào đây và bấm nút. Tệp ICO đến, và trên thẻ trình duyệt chiếc lá nhận ra được, nhưng tên bên dưới không đọc được. Bạn mở chương trình vẽ, làm một phiên bản chỉ có chiếc lá, chuyển SVG sang ICO lần nữa và tải tệp mới lên làm favicon.ico. Thẻ giờ hiện một chiếc lá xanh rõ ràng, và logo đầy đủ ở lại trên trang.

Một danh sách kiểm tra ngắn

Trước khi chuyển đổi

Đơn giản hóa bản vẽ. Làm nó vuông. Chuyển văn bản thành đường viền và nhúng hình ảnh.

Trong khi chuyển đổi

Ở lại trang cho đến khi tệp sẵn sàng.

Sau khi chuyển đổi

Thử ICO trong một thẻ trình duyệt và trong một lối tắt, ở giao diện sáng và tối, và giữ SVG.

Những lỗi thường gặp

Dùng logo đầy đủ

Chữ và chi tiết mảnh biến mất ở 16 điểm ảnh. Hãy dùng một dấu hiệu đơn giản.

Mong một phép chuyển đổi tốt hơn sửa được một bản vẽ rối

Lỗi nằm ở kích thước, không phải ở công cụ. Hãy đơn giản hóa SVG.

Quên bộ nhớ đệm

Một favicon cũ có thể bám lại trong trình duyệt. Hãy xóa bộ nhớ đệm trước khi kết luận cái mới đã thất bại.

Bản vẽ của bạn ở lại trên thiết bị của bạn

Phép chuyển đổi diễn ra cục bộ. Bản vẽ của bạn được trình duyệt của chính bạn đọc, tô ở đó và trao lại dưới dạng ICO. Không có gì được tải lên, nên không có bản sao nào nằm trên máy chủ và không ai khác có thể thấy nó. Với các dấu hiệu thương hiệu chưa công bố, đó là cách an toàn để chuyển SVG sang ICO.

Tóm tắt

Để chuyển SVG sang ICO ở đây, hãy thả bản vẽ và bấm nút. Một SVG không phải một bức ảnh mà là các chỉ dẫn để vẽ ra nó, và ở đây các chỉ dẫn đó được làm theo một lần cho mỗi kích thước và các kết quả được lưu thành ICO. Bản vẽ được dựng trong một hộp cát nơi không có gì trong tệp có thể chạy, và không có gì được tải lên. Tệp chứa sáu kích thước: 16, 32, 48, 64, 128 và 256 điểm ảnh, mỗi kích thước được vẽ lại từ SVG thay vì thu nhỏ từ cái này sang cái kia, và tất cả đều có độ trong suốt. Một biểu tượng không phải một bức ảnh nhỏ, nó là một bản vẽ khác: bất cứ thứ gì có đường nét mảnh hay chữ nhỏ đều thành một mớ nhoè ở 16 điểm ảnh dù được dựng cẩn thận đến đâu. Nếu kết quả trông đục, câu trả lời là một SVG đơn giản hơn thay vì một phép chuyển đổi tốt hơn. Phông chữ và hình ảnh kéo từ nơi khác không được xử lý.