Inlining a favicon outside of /public folder doesn't work

alexandernst commented 5 months ago

I'm aware of the limitation which prevents this plugin from inlining assets from the public folder, however I have the following HTML:

<!doctype html>
<html lang="en">
  <head>
    <link rel="icon" type="image/png" href="/src/assets/favicon.png">
  </head>
  <body>
    <header>
        <img src="/src/assets/logo.png" />
    </header>
    <main> (...js and css...)</main>
  </body>
</html>

This is how the structure of my project looks like:

src
├── assets
│   ├── favicon.png
│   ├── logo.png
└── vite.config.js
└── index.html

And my vite.config.js

export default defineConfig({
  plugins: [viteSingleFile()],
  build: {
    assetsInlineLimit: 999999,
  }
})

In theory, both assets (the favicon and the logo) should be inlined as they both are located outside of the public folder and they both meet the file size limit criteria. However, when I build the project I get this:

vite v5.2.8 building for production...
✓ 15 modules transformed.
rendering chunks (1)...

Inlining: index-phi6qHca.js
Inlining: style-DfwcZBBi.css
NOTE: asset not inlined: favicon-Ch38otTT.png
dist-single-file/favicon-Ch38otTT.png    0.83 kB
dist-single-file/index.html            542.08 kB │ gzip: 202.44 kB
✓ built in 764ms

And if I look inside the generated .html file, indeed the favicon isn't inlined, but the logo is.

Is this a limitation of this plugins or am I hitting a bug?

richardtallent commented 5 months ago

It's not a bug, but the README may have some info that is specific to VueJS, which is the only framework I use with it personally.

With Vue, assets in the "public" folder are never bundled, so this plugin can't inline them.

If you're using another framework that doesn't have a public folder or applies different rules to what is or isn't bundled, those rules would still apply here as well.

alexandernst commented 5 months ago

I'm not using any framework, this is plain html + js. What strikes me is that both the favicon and the logo are located inside the assets folder, but only the second is inlined.

richardtallent commented 2 months ago

Closing, this appear to be out of scope for this plugin, and should be addressed by rollup or by using a Data URL

alexandernst commented 2 months ago

Note that this can actually be done with this plugin once https://github.com/richardtallent/vite-plugin-singlefile/issues/95 is implemented

richardtallent / vite-plugin-singlefile

Inlining a favicon outside of /public folder doesn't work #96