Icon Workshop1Tải ảnh lên
Chuyển SVG an toàn thành biểu tượng ICO và PNG. Xem kết quả raster ở kích thước nhỏ rồi xuất bộ biểu tượng về máy.
Một ảnh. Mọi màn hình.
Chuyển SVG thành favicon
Biểu tượng nhỏ. Ấn tượng lâu dài.
Chuyển SVG an toàn thành biểu tượng ICO và PNG. Xem kết quả raster ở kích thước nhỏ rồi xuất bộ biểu tượng về máy.
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
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">- Giải nén bộ biểu tượng vào public/ ở gốc dự án Nuxt. Giữ nguyên tên tệp và đặt site.webmanifest cạnh favicon.ico, không đặt trong app/.
- Thêm mã vào khối script setup của app/app.vue. Thay liên kết biểu tượng cũ, tạo bản dựng mới rồi xuất bản dự án.
useHead({
"link": [
{
"rel": "icon",
"type": "image/x-icon",
"href": "/favicon.ico"
},
{
"rel": "apple-touch-icon",
"sizes": "180x180",
"href": "/apple-touch-icon.png"
},
{
"rel": "manifest",
"href": "/site.webmanifest"
}
]
})Mở /favicon.ico, /apple-touch-icon.png và /site.webmanifest trên trang của bạn. Kiểm tra phản hồi thành công và dữ liệu ảnh hoặc JSON thật; mã 200 chứa trang lỗi HTML vẫn là sai đường dẫn. Kiểm tra mọi URL biểu tượng trong manifest.
Nếu vẫn thấy biểu tượng cũ, kiểm tra liên kết trùng trong head, tắt bộ nhớ đệm ở công cụ trình duyệt rồi tải lại. Kiểm tra cả bộ nhớ đệm CDN và service worker nếu dùng. So sánh bản xem trước thật 16 và 32 pixel: đơn giản hóa chữ nhỏ và nét mảnh.
Các tệp cung cấp biểu tượng và siêu dữ liệu manifest. Chúng không tự biến trang thành PWA có thể cài đặt. Ví dụ dùng gốc tên miền; nếu triển khai trong thư mục con, hãy điều chỉnh mọi liên kết và đường dẫn biểu tượng trong manifest.
Chuyển SVG thành favicon
Chuyển SVG an toàn thành biểu tượng ICO và PNG. Xem kết quả raster ở kích thước nhỏ rồi xuất bộ biểu tượng về máy.
Đường SVG an toàn vẫn là vector. Ảnh raster và ảnh chữ không được vector hóa.
SVG phải chứa hình vẽ an toàn, tự đầy đủ và không phụ thuộc tài nguyên ngoài.
Bắt đầu tạoCâ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.