<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">
{
"name":"site title long",
"short_name":"short",
"start_url":"\/",
"lang":"en",
"display":"standalone",
"background_color":"#E2E8F0",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
Avoid unused css ! use tailwind with vite for example. It compiles your css to keep only used properties.
If possible defer the css declaration before the </body>
tag