Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix apple-icon.jpg takes precedence over favicon.ico in Android Chrome/Brave tab switcher after browser restart [1 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#93397•Fetched 2026-05-01 05:32:24
View on GitHub
Comments
0
Participants
1
Timeline
1
Reactions
0
Author
abrahamgalueabrahamgalue
Participants
abrahamgalueabrahamgalue
Timeline (top)
issue_type_added ×1

Code Example

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32105
  Available CPU cores: 12
Binaries:
  Node: 24.15.0
  npm: 11.12.1
  Yarn: 1.22.22
  pnpm: 10.33.2
Relevant Packages:
  next: 16.2.4 // Latest available version is detected (16.2.4).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/abrahamgalue/nextjs-favicon-mobile-bug

To Reproduce

  1. Create a Next.js project using the App Router.
  2. Place an apple-icon.jpg (e.g., 180x180) in the /app directory.
  3. Deploy the application.
  4. On an Android device (Chrome or Brave):
    • Open the website. The favicon shows correctly.
    • Open the "Tab Switcher" view. It looks fine.
    • Force close the browser (kill the app process).
    • Re-open the browser.
    • Look at the Tab Switcher or the tab preview: The apple-icon.jpg is now being used instead of favicon.ico.
    • If you click into the page again, it might swap back to the .ico.

https://github.com/user-attachments/assets/181ad144-d07c-4ae5-9072-3830c7950f80

Current vs. Expected behavior

The current behavior shows a conflict in icon priority on Android mobile browsers. When both favicon.ico and apple-icon.jpg are present in the /app directory, Next.js correctly generates the metadata for both; however, Chromium-based browsers like Chrome and Brave on Android swap them incorrectly. During an active session, the favicon.ico is displayed, but if the browser process is killed and then restarted, the tab switcher UI and the restored tab preview show the apple-icon.jpg instead of the favicon. This creates a visual inconsistency where the high-resolution icon intended for Apple devices overrides the standard tab icon during session recovery.

I expected the favicon.ico to remain the persistent icon for browser tabs regardless of the browser's execution state.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 32105
  Available CPU cores: 12
Binaries:
  Node: 24.15.0
  npm: 11.12.1
  Yarn: 1.22.22
  pnpm: 10.33.2
Relevant Packages:
  next: 16.2.4 // Latest available version is detected (16.2.4).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Not sure

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

Vercel (Deployed)

Additional context

The reproduction is straightforward: by simply placing a 180x180 apple-icon.jpg alongside a standard favicon.ico in the root of the App Router. The behavior is specific to Android OS using Chromium-based browsers like Chrome and Brave.

Project deployed in Vercel: https://nextjs-favicon-mobile-bug.vercel.app/

extent analysis

TL;DR

The issue can be mitigated by ensuring the correct favicon is specified in the HTML metadata or by removing the apple-icon.jpg from the /app directory.

Guidance

  • Verify that the favicon.ico is correctly referenced in the HTML head section to ensure it is the default icon for browser tabs.
  • Check if removing the apple-icon.jpg resolves the issue, as its presence might be causing the conflict in icon priority on Android mobile browsers.
  • Consider specifying the icon priorities using HTML metadata tags, such as <link rel="icon" href="favicon.ico"> for the standard favicon and <link rel="apple-touch-icon" href="apple-icon.jpg"> for Apple devices.
  • Test the application on different browsers and devices to ensure the fix does not introduce any new issues.

Example

<head>
  <link rel="icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="apple-icon.jpg">
</head>

Notes

The issue seems to be specific to Chromium-based browsers on Android and might be related to how these browsers handle favicon priorities. The provided solution is a workaround and might need further adjustments based on the specific requirements of the application.

Recommendation

Apply workaround: Specify the correct favicon in the HTML metadata or remove the apple-icon.jpg to prevent the icon conflict, as this approach directly addresses the observed behavior without requiring changes to the Next.js version or dependencies.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#output truncation#response parsing#generation error#database connection#vector store

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix apple-icon.jpg takes precedence over favicon.ico in Android Chrome/Brave tab switcher after browser restart [1 participants]