Skip to content
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

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

Open
alexandernst opened this issue Apr 10, 2024 · 2 comments
Open

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

alexandernst opened this issue Apr 10, 2024 · 2 comments

Comments

@alexandernst
Copy link

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

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

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@alexandernst @richardtallent