Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Unable to process favicon #71609

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.

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

Open
Dragate opened this issue Oct 22, 2024 · 13 comments
Open

Unable to process favicon #71609

Dragate opened this issue Oct 22, 2024 · 13 comments
Labels
bug Issue was opened via the bug report template. linear: turbopack Confirmed issue that is tracked by the Turbopack team. Turbopack Related to Turbopack with Next.js.

Comments

@Dragate
Copy link
Contributor

Dragate commented Oct 22, 2024

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/romantic-ace-vn6rqz

To Reproduce

  1. Place in the app folder the specific favicon.ico I have provided in the codesandbox
  2. Run dev with turbo enabled
  3. Receive the following error:
 ⨯ ./app/favicon.ico
Processing image failed
unable to decode image data

Caused by:
- failed to fill whole buffer

Current vs. Expected behavior

Would expect the following the favicon to render:
image

but instead get:
image

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP PREEMPT_DYNAMIC Sun Aug  6 20:05:33 UTC 2023
  Available memory (MB): 4102
  Available CPU cores: 2
Binaries:
  Node: 20.9.0
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: 8.10.2
Relevant Packages:
  next: 15.0.0 // Latest available version is detected (15.0.0).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: N/A
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This error started occuring on [email protected] and persists on [email protected]. It was not occuring on [email protected].

@Dragate Dragate added the bug Issue was opened via the bug report template. label Oct 22, 2024
@github-actions github-actions bot added the Turbopack Related to Turbopack with Next.js. label Oct 22, 2024
@timneutkens timneutkens added the linear: turbopack Confirmed issue that is tracked by the Turbopack team. label Oct 22, 2024
@Dragate
Copy link
Contributor Author

Dragate commented Oct 22, 2024

I asked for another favicon and I'm getting the same issue with different reasoning:

 ⨯ ./src/app/favicon.ico
Processing image failed
unable to decode image data

Caused by:
- Format error decoding Ico: Entry(48, 48) and BMP(16, 16) dimensions do not match!
- Entry(48, 48) and BMP(16, 16) dimensions do not match!

The updated favicon is in the codesandbox as well.

@cilliemalan
Copy link

I got this issue because my favicon file, for whatever reason, was not a valid icon. Deleting favicon.ico fixed the problem.

@HupanFabricio
Copy link

put it in ./public not in /app

@ezeparziale
Copy link

I got the same error in version 15.0.3. I moved favicon.ico to the public folder, and it works fine now. I'm not sure what happened, as the documentation indicates it should be in the app folder:
https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

@elliottcoe
Copy link

Also got the same as above, putting it in /public sorts it out.

@NicHaley
Copy link

put it in ./public not in /app

Weirdly enough this works for me in Chrome / Arc, but not in Firefox and Safari

@aixegorri
Copy link

Moving the favicon.ico to the public folder works because it prevents the favicon from being injected. It is not a solution.

@mathewcst
Copy link

As most things Next15 recently, try running dev without --turbo. That was the issue for me. Turbopack is the problem here.

@DVendy
Copy link

DVendy commented Mar 21, 2025

For now I'm putting it in public folder, because I need the turbopack.
Without turbopak, my compile time could be up to 30 seconds and sometimes it ran out of memory and need to restart the server again.
With turbopakc, it's smooth 👌

@ezeparziale
Copy link

I got the same error in version 15.0.3. I moved favicon.ico to the public folder, and it works fine now. I'm not sure what happened, as the documentation indicates it should be in the app folder: https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons

Working fine in the app folder on version 15.2.3

@H01001000
Copy link

Seem related to images-rs crate for turbopack (image-rs/image#1590)

@paaggeli
Copy link

I had the same problem as @Dragate

⨯ ./src/app/favicon.ico
Processing image failed
unable to decode image data

Caused by:
- Format error decoding Ico: Entry(48, 48) and BMP(16, 16) dimensions do not match!
- Entry(48, 48) and BMP(16, 16) dimensions do not match!

The issue was that the favicon didn’t have the correct dimensions. Mine was 32x32, while Next.js requires 48x48.
I fixed it by regenerating the favicon using this free online tool: https://favicon.io/
Hope this helps!

@devjsluis
Copy link

If you have the same problem that me, put your image in the folder app with the name favicon.ico and if the icon doesn't appear press Ctrl + Alt + R in Windows to reload and clean cache. This worked for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. linear: turbopack Confirmed issue that is tracked by the Turbopack team. Turbopack Related to Turbopack with Next.js.
Projects
None yet
Development

No branches or pull requests