This page is part of the legacy 1.0.x documentation. We recommend using the latest documentation instead.
Add Icon Files
The best practice for a WebSpatial project is to include at least the following icon files:
| Icon Size | Purpose | Context | Transparent Background | Rounded Corners | How to Provide |
|---|---|---|---|---|---|
| 48 × 48 | favicon.ico | Browser tab bar | Required | Allowed | HTML <link> |
| 180 × 180 | iOS app | "Add to Home Screen" | Not allowed | Not allowed | HTML <link> |
| 192 × 192 | Regular PWA | Small icon on the home screen | Required | Required | Web App Manifest |
| 512 × 512 | Regular PWA | Larger icon for splash screens, app stores, and similar | Required | Required | Web App Manifest |
| 1024 × 1024 | visionOS app | App icon in Vision Pro | Not allowed | Not allowed | WebSpatial + Web App Manifest |
Ready-to-use sample icons (you can use this directly in your demo): webspatial-icon-examples.zip
In addition to the standard PWA requirements, a Packaged WebSpatial App has extra icon rules:
Because the minimum icon size for a visionOS app is 1024 × 1024 and the system automatically crops icons into a circle, your site must supply a PWA-standard icon with a minimum size of 1024 × 1024 and of type maskable (no transparent background or rounded corners) before it can be published to the visionOS App Store.
Other PWA icons (such as the 512 × 512 and 192 × 192 versions) are typically type "any" and may include rounded corners and transparency, because not every platform performs automatic cropping.
At the very minimum, to run as a standalone app on desktop and visionOS, you need to provide two icon sizes:
- 512×512 (
"any"type) - 1024×1024 (
"maskable"type)
In the Web App Manifest, these two icons are configured like this:
"icons": [
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-1024-maskable.png",
"sizes": "1024x1024",
"type": "image/png",
"purpose": "maskable"
}
]