Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Generate webmanifest images

See original GitHub issue

I’m trying to use this plugin to generate a favicon and webmanifest icons and I come to this working solution:

First of all I import the icon in different sizes without using the import result anywhere (so the icons will get generated in different sizes):

---
import Favicon from '../assets/logo.png?w=64&format=ico';
import Icon48 from '../assets/logo.png?w=48&format=png';
import Icon72 from '../assets/logo.png?w=72&format=png';
import Icon96 from '../assets/logo.png?w=96&format=png';
import Icon144 from '../assets/logo.png?w=144&format=png';
import Icon168 from '../assets/logo.png?w=168&format=png';
import Icon192 from '../assets/logo.png?w=192&format=png';

---
<html lang={locale}>
<head>
        ....
	<link rel="manifest" href="manifest.webmanifest" />
	<link rel="icon" type="image/x-icon" href={Favicon} />
</head>
<body>
...
</body>
</html>

Then I get the filename from the filesystem and use it in the (static) manifest.webmanifest file:

{
    ...
    "icons": [{
      "src": "/assets/logo@48w.2106fe6c.png",
      "sizes": "48x48",
      "type": "image/png"
    }, {
      "src": "/assets/logo@72w.c4bb68f4.png",
      "sizes": "72x72",
      "type": "image/png"
    }, {
      "src": "/assets/logo@96w.d28bed5c.png",
      "sizes": "96x96",
      "type": "image/png"
    }, {
      "src": "/assets/logo@144w.f094205f.png",
      "sizes": "144x144",
      "type": "image/png"
    }, {
      "src": "/assets/logo@168w.0a076ecc.png",
      "sizes": "168x168",
      "type": "image/png"
    }, {
      "src": "/assets/logo@192w.e25558fa.png",
      "sizes": "192x192",
      "type": "image/png"
    }]
  }

This is working pretty good, however it would be nice to inject the asset path instead of copying it to the static webmanifest ifle. As far as I see, astro does not support any static generated non-html routes, otherwise it would be very easy to just create a manifest.webmanifest.astro page and generate it here

Does anyone have an idea, how to create webmanifest icon paths more easily?

Issue Analytics

State:
Created a year ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

franzwildingcommented, Apr 19, 2022

Ah cool! I tried this some days ago, back than it was only working with the node server running. I will check it out with the newest beta build. I also checked the release notes but did not found any hint that this will work.

0reactions

RafidMuhymincommented, Apr 20, 2022

@franzwilding closing this issue now. Feel free to comment on this issue or ask in the Discord channel if you are facing any kind of problems related to Astro.