Chuyển đổi ảnh thành biểu tượng và favicon
Chọn một ảnh và chúng tôi sẽ tạo ra một bộ biểu tượng hoàn chỉnh từ đó: một favicon.ico chứa sáu kích thước bên trong, cùng các biểu tượng PNG cho mọi kích thước mà trình duyệt và hệ điều hành yêu cầu.
Cách sử dụng
- 1
Chọn một ảnh — lý tưởng nhất là ảnh PNG hình vuông với nền trong suốt.
- 2
Chọn chế độ khớp và các kích thước bạn muốn.
- 3
Xem trước từng kích thước trước khi tải xuống.
- 4
Tải favicon.ico riêng, hoặc trọn bộ gồm các biểu tượng PNG và tệp manifest.
Vì sao một ảnh là chưa đủ
Trình duyệt cần 16 và 32 pixel cho tab, iOS cần 180 cho màn hình chính, và Android cần 192 và 512 cho tệp manifest. Đưa cho mỗi thiết bị một ảnh lớn duy nhất khiến nó phải tự thu nhỏ, dẫn đến hình ảnh mờ nhòe ở kích thước nhỏ, nên chúng tôi tạo riêng từng kích thước với thuật toán làm mịn chất lượng cao.
Tệp ICO là gì
Một tệp duy nhất chứa nhiều ảnh ở các kích thước khác nhau, hệ thống sẽ chọn ảnh phù hợp cho từng vị trí. Chúng tôi đưa 16, 32, 48, 64, 128 và 256 pixel vào bên trong — đủ cho mọi nhu cầu của trình duyệt và Windows.
Giữ nguyên toàn bộ hay lấp đầy và cắt?
Biểu tượng có hình vuông trong khi ảnh của bạn thường không phải vậy. Giữ nguyên toàn bộ giữ lại toàn bộ ảnh và thêm viền trong suốt, phù hợp cho logo. Lấp đầy và cắt sẽ lấp đầy hình vuông và cắt bớt cạnh, phù hợp cho ảnh chụp.
Hỏi đáp
- Sự khác biệt giữa favicon.ico và biểu tượng PNG là gì?
- Tệp ICO chứa nhiều kích thước cùng lúc và mọi trình duyệt đều hiểu nó, kể cả các trình duyệt cũ. Các biểu tượng PNG riêng biệt là những gì iOS, Android và tệp manifest web yêu cầu. Trọn bộ mang đến cho bạn cả hai.
- Các tệp này đặt ở đâu?
- Ở thư mục gốc của trang web của bạn, sau đó thêm các thẻ link hiển thị bên dưới công cụ vào phần head của các trang của bạn.
- Ảnh nguồn như thế nào là tốt?
- Một ảnh hình vuông có nền trong suốt, từ 512 pixel trở lên. Logo đơn giản hiển thị rõ hơn nhiều ở 16 pixel so với hình ảnh chi tiết phức tạp.
- Độ trong suốt có được giữ lại không?
- Có. Mọi kích thước đều được tạo dưới dạng PNG, cả bên trong lẫn bên ngoài tệp ICO, và PNG hỗ trợ độ trong suốt hoàn toàn.
- Có hỗ trợ SVG không?
- Có, và đó là nguồn tốt nhất có thể — nó được vẽ đúng theo kích thước chính xác của từng biểu tượng, nên kết quả sắc nét hoàn hảo.
- Biểu tượng iOS có kích thước bao nhiêu?
- 180 pixel, dành cho thẻ apple-touch-icon. Kích thước này được chọn mặc định trong danh sách.
- Ảnh của tôi có bị tải lên máy chủ không?
- Không. Quá trình tạo diễn ra hoàn toàn trong trình duyệt của bạn, và bản thân tệp ICO được lắp ráp từng byte ngay trên trang.
- site.webmanifest là gì?
- Một tệp cho Android biết nên dùng biểu tượng nào khi ai đó thêm trang web của bạn vào màn hình chính. Chúng tôi tạo sẵn tệp này bên trong trọn bộ.