search

sveltejs / kit

web development, streamlined
https://svelte.dev/docs/kit
MIT License
18.76k stars 1.95k forks source link

%sveltekit.assets% should behave the same for "shortcut icon" and "apple-touch-icon" as it does for "icon" #10317

Open schlundd opened 1 year ago

schlundd commented 1 year ago

Describe the problem

I am getting lots of 404 errors for apple-touch-icon files as (some?) browsers try to load it from deeper paths.

Describe the proposed solution

This was solved for rel="icon" in https://github.com/sveltejs/kit/pull/5583. The same behaviour should be applied to rel="shortcut icon" and rel="apple-touch-icon"

Alternatives considered

No response

Importance

nice to have

Additional Information

No response

dummdidumm commented 1 year ago

Whoever implements this should have access to a Safari browser to check that the weird scroll breakage observed in an earlier version of #5583 does not occur.

jasongitmail commented 1 year ago

FWIW, SvelteKit automatically adding the origin to create absolute URLs for certain images, but not others, was a huge headache getting started with Svelte Kit for a couple days as I figured out how to handle metadata for my images and when to include the origin for canonical URLs, icons, og image, etc and not knowing when and why Svelte Kit was magically doing stuff to some meta URLs, but not others...

The thought process as a dev is: npm run dev shows relative URLs in dev console (makes sense because of Vite), npm run build outputs relative URLs (okay good to know), but running the production app has absolute URLs in dev console for some meta URLs (!) automatically added, but not all(!) and inspecting the actual source (cmd+option+u in Chrome) shows relative paths in the production HTML.

I ended up with double origins in my URLs before realizing SK adds them in some places automatically.

TLDR I'd recommend not making this permanent in SK. It's worth revisiting if the browser bug warranting this has been resolved because the fix makes SK's DX unpredictable for URL handling. Or at the very least, should be documented.

IMO, for a real project, it doesn't make sense to include any assets, like apple-touch-icon, modern SVG favicon, etc directly from app.html using the static dir--other than the one favicon.ico for old RSS readers basically--, which might make this issue null.

A better approach is to include them in a <svelte:head> ... </svelte:head> in a main +layout.svelte, so they can be imported via Vite, have file names hashed and far futures cache headers used, which may help address any browser 404 issue. Only favicon.ico should be unhashed for old clients.

Here's a really great, well-researched article on the required metadata today's for favicon and touch icons for today's browsers: https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

I am getting lots of 404 errors for apple-touch-icon files as (some?) browsers try to load it from deeper paths.

Curious if your paths start with / like /image.png or are image.png? The latter could cause issues.

Serator commented 1 year ago

I'm using the same method described by @jasongitmail, because I've encountered a problem that when posting a message to Slack, Slack uses apple-touch-icon for the site icon in the message preview and can't get it from <link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" /> from src/app.html.

P.S. The article from EvilMartians is really great, but partially outdated. Chrome, due to a bug, loads both the ICO and SVG version of the favicon. You can check this in Chrome at the link from the previous post. On my side, I fixed this by replacing sizes="any" with sizes="32x32".

ai commented 1 year ago

@Serator thanks for the note, I updated the article

andylib93 commented 1 year ago

@ai loved your article!! Just a little update: In chapter Step 2: Create an ICO file the cli argument for inkscape is (maybe nowadays) invalid. I made it work with --export-png instead of --export-filename :blush:

Accordingly for chapter Step 3: Create PNG images :+1:

ai commented 1 year ago

@andylib93 thanks =^_^=

Strange.

$ inkscape --help | grep export-filename
  -o, --export-filename=FILENAME             Output file name (defaults to input filename; file type is guessed from extension if present; use '-' to write to stdout)
    inkscape --export-filename=out.pdf in.svg

And I can’t find export-png in inkscape --help.

andylib93 commented 1 year ago

@ai that is indeed strange, but it seems like I need to upgrade my version, in the cli-documentation under Deprecations and Replacements it says --export-png needs to be replaced with --export-filename=file.xyz.

My mistake 😇