8000 Include boilerplate icon assets, to improve DX · Issue #203 · sveltejs/cli · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Include boilerplate icon assets, to improve DX #203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
jasongitmail opened this issue Jul 8, 2023 · 1 comment
Open

Include boilerplate icon assets, to improve DX #203

jasongitmail opened this issue Jul 8, 2023 · 1 comment
Labels
enhancement New feature or request pkg:create

Comments

@jasongitmail
Copy link
jasongitmail commented Jul 8, 2023 •
edited
Loading

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
Copy link

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

  • favicon.ico
  • icon.svg
  • apple-touch-icon.png
  • icon-192.png
  • icon-512.png

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

@benmccann benmccann transferred this issue from sveltejs/kit Oct 22, 2024
@manuel3108 manuel3108 added enhancement New feature or request pkg:create labels Nov 29, 2024
@manuel3108 manuel3108 mentioned this issue Mar 22, 2025
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request pkg:create
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@manuel3108 @jasongitmail @archiewood
0