Apple Touch Icon là gì?
Apple Touch Icon (hay apple-touch-icon.png) là biểu tượng hiển thị khi người dùng thêm trang web vào màn hình chính (Home Screen) trên iPhone, iPad. Nó đóng vai trò như "app icon" cho web app.
Cú pháp cơ bản
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Các kích thước chuẩn (iOS 15+)
| Thiết bị | Kích thước (px) | Mô tả |
|---|---|---|
| iPhone (thường) | 180×180 | @3x display |
| iPad / iPad Air | 167×167 | @2x display |
| iPad Pro | 167×167 | @2x display |
| iPhone cũ (@2x) | 120×120 | iPhone 6/7/8/SE |
| iPad cũ (@1x) | 76×76 | iPad 1/2/Mini 1 |
| Spotlight Search | 120×120 | iPhone @2x |
| Settings | 87×87 | iPhone @2x |
Khai báo đầy đủ (Best Practice)
<!-- Phiên bản đơn giản: trình duyệt tự chọn size phù hợp --> <link rel="apple-touch-icon" href="/icons/apple-touch-icon-180x180.png"> <!-- Phiên bản chi tiết: chỉ định từng size --> <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon-180x180.png"> <link rel="apple-touch-icon" sizes="167x167" href="/icons/apple-touch-icon-167x167.png"> <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-touch-icon-57x57.png">
Lưu ý quan trọng
- Không cần bo góc: iOS tự động bo góc và thêm hiệu ứng bóng (gloss) trên iOS 6 trở xuống. Từ iOS 7+, thiết kế phẳng (flat).
- Định dạng: PNG (khuyên dùng), hỗ trợ trong suốt (transparency).
- Tên file: Nếu đặt tên
apple-touch-icon.pngở root domain, iOS sẽ tự tìm mà không cần thẻ<link>. - Precomposed: Thuộc tính
rel="apple-touch-icon-precomposed"(iOS 6-) báo cho iOS không thêm hiệu ứng bóng. Không cần thiết từ iOS 7+.
Tích hợp với PWA (Progressive Web App)
Khi có manifest.json, icon được định nghĩa trong icons array sẽ được ưu tiên:
// manifest.json
{
"name": "My Web App",
"icons": [
{ "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any maskable" },
{ "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
]
}
Vẫn nên giữ apple-touch-icon cho iOS Safari (chưa hỗ trợ đầy đủ PWA manifest icons).
Công cụ tạo icon tự động
- RealFaviconGenerator - Tạo tất cả size + HTML code
- Favicon Generator
- favicons (npm package) - Tích hợp build pipeline
Kiểm tra
Sau khi deploy, test bằng cách:
- Mở trang web trên Safari iOS
- Chia sẻ (Share) → "Thêm vào Màn hình chính" (Add to Home Screen)
- Kiểm tra icon hiển thị đúng