Icon Workshop1Tải ảnh lên
Bắt đầu với logo rõ nét hoặc hình đơn giản. Ảnh vuông cho kết quả tốt nhất.
Một ảnh. Mọi màn hình.
Công cụ tạo favicon và biểu tượng ứng dụng
Biểu tượng nhỏ. Ấn tượng lâu dài.
Chuyển đổi hình ảnh của bạn thành các biểu tượng trang web, biểu tượng ứng dụng và một gói biểu tượng sẵn sàng để sử dụng.
PNG ICO PWA
Tạo gói biểu tượng
Biến ảnh thành favicon, biểu tượng ứng dụng và hơn thế nữa.
- 1Tải lên
- 2Điều chỉnh
- 3Tải xuống
Thả ảnh vào đây
PNG, JPG hoặc SVG · Tối đa 5 MB
Hình ảnh của bạn được xử lý trong trình duyệt web của bạn. Không bao giờ rời khỏi thiết bị của bạn.
Điều chỉnh biểu tượng
Tinh chỉnh diện mạo cho từng màn hình.
Xem khi sử dụng thực tế(tải ảnh lên để xem trước biểu tượng)
Thẻ trình duyệt
×
https://example.com
Màn hình chính iOS
Biểu tượng của bạn ở đây
PWA / Android
Biểu tượng của bạn ở đây
Tạo favicon trong 3 bước
Từ một hình ảnh đến một bộ biểu tượng đầy đủ.
2Điều chỉnh và xem trước
Chọn cách đặt ảnh, nền và khoảng đệm. Kiểm tra kết quả ở kích thước nhỏ.
3Tải xuống và thêm vào trang web của bạn
Xuất gói biểu tượng, tải tệp lên và thêm liên kết biểu tượng vào HTML.
Một logo, sẵn sàng cho mỗi màn hình
Xem nơi các tập tin được tạo được sử dụng.
Favicon trang web
Trang web của tôi×16 × 1632 × 32Biểu tượng 16 × 16 và 32 × 32 giúp khách nhận diện trang web trong thẻ và dấu trang.
iPhone & iPad
Trang web của tôi180 × 180Dùng biểu tượng apple-touch 180 × 180 khi trang web được thêm vào màn hình chính.
PWA & Android
Cài đặt ứng dụng192 × 192512 × 512192 × 192 và 512 × 512 là kích thước ảnh phổ biến trong tệp kê khai ứng dụng web.
Gói biểu tượng có những gì?
Một bộ biểu tượng sẵn sàng để sử dụng cho tất cả các nền tảng.
- favicon.ico16 × 16, 32 × 32, 48 × 48, 256 × 256
- apple-touch-icon.png180 × 180
- icon-192.png192 × 192
- icon-512.png512 × 512
- site.webmanifestTệp kê khai ứng dụng web
Thêm biểu tượng vào trang web của bạn
Đặt các liên kết này trong HTML <head> của bạn.
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">Câu hỏi thường gặp
Favicon là gì?
Ảnh nhỏ đại diện cho trang web trong thẻ trình duyệt và dấu trang.
Tôi nên sử dụng định dạng hình ảnh nào?
PNG phù hợp với logo trong suốt. JPG, WebP và SVG an toàn cũng dùng được.
Tôi có thể sử dụng hình ảnh không vuông không?
Có. Chọn 'Vừa khung', 'Cắt ảnh' hoặc 'Kéo giãn' để tạo biểu tượng vuông.
Vì sao có nhiều kích thước biểu tượng?
Trình duyệt và màn hình chính dùng kích thước khác nhau. Biểu tượng nhỏ rõ nét trong thẻ; biểu tượng lớn phù hợp với lối tắt ứng dụng.