Bộ icon đầy đủ cho web, iOS, Android & PWA — dựa trên symbol Crescent Eye đã chốt. Có simplification cho size nhỏ để vẫn đọc được ở 16px.
Ở 16px, chấm pupil chỉ còn ~1px nên drop bỏ — chỉ giữ crescent gold trên nền navy. Ở 32/48px giữ đủ pupil nhưng phóng to nhẹ để vẫn rõ trên màn hình thấp DPI.
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png">
<link rel="shortcut icon" href="/favicon.ico">
180×180px, full-bleed navy. iOS tự bo góc thành squircle — không tự bo. Symbol padding ~16% mỗi cạnh để vẫn cân khi system mask vào.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Đăng ký trong manifest.json với purpose:"any". Dùng cho splash screen + home khi cài web app. Full-bleed navy, symbol căn giữa padding ~17%.
{
"name": "SoiTarot",
"short_name": "SoiTarot",
"background_color": "#0F1B3D",
"theme_color": "#0F1B3D",
"display": "standalone",
"icons": [
{
"src": "/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
Android có thể crop bất kỳ hình dạng nào (tròn, vuông bo, squircle, teardrop). Symbol nhỏ lại còn ~58% canvas, nằm gọn trong vòng tròn safe zone 80% trung tâm. Nền navy tràn ra mép.
Cho native app sau. Full-bleed navy, symbol căn giữa, padding ~18%. KHÔNG bo góc, KHÔNG transparency — Apple & Google reject icon trong suốt.
Toàn bộ file cần xuất, tên đề xuất, format và tình huống dùng. Click ↓ ở mỗi dòng để tải PNG.
| Preview | Tên file đề xuất | Size | Format | Dùng cho | DL |
|---|---|---|---|---|---|
| favicon.ico | 16, 32, 48 (đa) | ICO | Tab trình duyệt cũ (IE/Edge legacy). Multi-resolution. | ||
| favicon.svg | vector | SVG | Tab trình duyệt hiện đại. Tự scale, sắc nét mọi DPI. | ||
| favicon-16.png | 16×16 | PNG | Fallback cho tab trên màn 1× DPI. Drop pupil ở size này. | ||
| favicon-32.png | 32×32 | PNG | Fallback Retina, bookmark bar. | ||
| apple-touch-icon.png | 180×180 | PNG | "Add to home screen" trên iOS Safari. Full-bleed, iOS tự bo. | ||
| icon-192.png | 192×192 | PNG | PWA purpose:"any". Home screen sau khi cài web app. |
||
| icon-512.png | 512×512 | PNG | PWA splash + share preview + iOS web app shortcut. | ||
| icon-maskable-512.png | 512×512 | PNG | Android adaptive. Symbol trong safe zone 80%. purpose:"maskable" |
||
| icon-1024.png | 1024×1024 | PNG · sRGB | App Store. KHÔNG transparency, KHÔNG bo góc. | ||
| mark.svg | vector | SVG · transparent | Symbol gốc, dùng bất cứ đâu cần vector. |