search

sveltejs / cli

The Svelte CLI
MIT License
232 stars 9 forks source link

Include boilerplate icon assets, to improve DX #203

Open jasongitmail opened 1 year ago

jasongitmail commented 1 year ago

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

archiewood commented 1 year ago

This may be obvious to others, but was not obvious to me.

When adding these files, use the following locations:

./src/app.html

<html lang="en">
    <head>
               ...
        <link rel="icon" href="/favicon.ico" sizes="32x32">
        <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">
               ...

./static

Do not try to put the icon assets in other locations (eg in a subdirectory of /static as i tried). These will not work as expected