Include boilerplate icon assets, to improve DX #203
Description
Describe the problem
Knowing what favicon (ICO, PNG, SVG), apple-touch-icons, manifest, which resolutions, etc is a pain for modern developers and hard to keep up with.
Describe the proposed solution
If SvelteKit included boilerplate assets (using SvelteKit logo) in the Skeleton project, it would indicate suggested branding assets and smooth this aspect for future devs.
I found a solution for myslelf in this article, referenced by Chris Coyier.
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs Updated, based on the fix mentioned in this comment to prevent Chrome downloading both ico and svg favicons.
<link rel="icon" href="/favicon.ico" sizes="32x32"><!-- 32×32 PNG -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 PNG-->
<link rel="manifest" href="/manifest.webmanifest">// manifest.webmanifest
{
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
]
}
The article has really good research and reasoning.
The extra benefit is these can be put into suggested locations--e.g. static/favicon.ico and linked from within app.html, and the rest in a main +svelte.layout imported via Vite to receive hashed file names and far futures cache headers, likely imported from somewhere like $lib/assets/images/foo.png. It teaches good conventions and will help improve SK's already-good DX.
Alternatives considered
No response
Importance
nice to have
Additional Information
No response