Hướng dẫn biểu tượng cảm ứng Apple
Khi ai đó thêm trang web của bạn vào màn hình chính iOS, Safari sử dụng apple-touch-icon — không phải favicon.ico. Gửi một hình vuông 180×180 PNG (hoặc hình vuông lớn hơn có thể thu nhỏ rõ ràng) và liên kết nó trong <head> của bạn.
Apple không áp dụng tính năng tạo mặt nạ trên iOS hiện đại cho các clip trên web như cách thực hiện đối với các ứng dụng gốc, nhưng biểu tượng của bạn vẫn phải là hình vuông với lề an toàn — hãy đặt logo vào ~10% để các góc tròn không bao giờ cắt bớt tác phẩm nghệ thuật.
Sử dụng <link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png">. Một tệp 180×180 duy nhất bao gồm tất cả các iPhone hiện tại; các mục nhập 152×152 và 167×167 tùy chọn giúp bố trí iPad cũ hơn.
Cách hoạt động
- 1
Xuất 180×180 PNG
Từ trình tạo favicon hoặc trình chỉnh sửa hình ảnh của chúng tôi.
- 2
Tải lên thư mục gốc của trang web
/apple-touch-icon.png cùng với favicon.ico.
- 3
Thêm thẻ liên kết
<link rel="apple-touch-icon" size="180x180" href="/apple-touch-icon.png"> trong <head>.
Thử ngay
Tạo apple-touch-icon
Tạo FaviconCâu hỏi thường gặp
apple-touch-icon có kích thước bao nhiêu?+
180×180 pixel cho iPhone hiện tại. Xuất từ bản gốc 512×512 hoặc 1024×1024.
PNG hoặc ICO cho iOS?+
Chỉ PNG. iOS bỏ qua .ico đối với các biểu tượng trên màn hình chính.
Tôi vẫn cần favicon.ico phải không?+
Có — các tab và các trình duyệt khác vẫn sử dụng .ico. Apple-touch-icon là phụ gia.
Công cụ liên quan
Tạo Favicon
Tạo bộ favicon hoàn chỉnh (ICO + PNG) cho mọi thiết bị và trình duyệt.
Thay đổi Kích thước Ảnh
Thay đổi kích thước hình ảnh PNG, JPG và WebP theo kích thước chính xác.
Chuyển đổi PNG sang ICO
Công cụ chuyển đổi PNG sang ICO trực tuyến miễn phí cho icon Windows, icon ứng dụng và website favicon.