Favicon or Icon not appearing in IOS Firefox on websites made with Astro.js

[dewodt]

Astro Info

Astro                    v4.10.1
Node                     v21.7.3
System                   Linux (x64)
Package Manager          npm
Output                   hybrid
Adapter                  @astrojs/vercel/serverless
Integrations             @astrojs/react
                         @astrojs/tailwind
                         @astrojs/sitemap
                         @sanity/astro

If this issue only occurs in one browser, which browser is a problem?

Firefox

Describe the Bug

As the title suggests, Favicon or Icon doesnt appear when seen using IOS Firefox on websites that are made with Astro.js. I spent hours debugging this, and it turns out I think it's a framework issue. I compared my Nextjs & Vue projects where it works and tried to apply it here, but nothing changes. Then I try to compare it with other Astro projects and it turns out other astro projects suffers from the same bug too.

Here are some examples:

1. Official Astro.js site (uses Astro 4.9.3) Repo link: (https://github.com/withastro/docs)[https://github.com/withastro/docs]

2. Starlight (uses Astro 4.8.6) Repo link: (https://github.com/withastro/starlight)[https://github.com/withastro/starlight]

3. T3.gg (uses Astro 3.0.5) Repo link: (https://github.com/t3dotgg/t3-astro)[https://github.com/t3dotgg/t3-astro]

4. My own website (uses latest Astro 4.10.1) Repo link: (https://github.com/dewodt/portfolio)[https://github.com/dewodt/portfolio]

   <!-- Icon -->
   <link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="48x48" />
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
   <link rel="manifest" href="/manifest.webmanifest" />

   

But then I tried to create a new minimal Astro project, add the favicon tags (same with like in my project), and deploy it to vercel. Suprisingly it works somehow. All of these (more complex) Astro site don't work but this minimal Astro site works. Repo link: https://github.com/dewodt/astro-favicon-bug

<!-- Icon -->
<link rel="icon" type="image/x-icon" href="/favicon.ico" sizes="48x48" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.webmanifest" />

What's the expected result?

The expected result is each website icon should be able to be seen in IOS Firefox. Here are the examples where the icon is loaded

1. MDN Website

2. Next.js's website

Link to Minimal Reproducible Example

https://github.com/dewodt/portfolio

Participation

• [X] I am willing to submit a pull request for this issue.

[matthewp]

Thanks, could you please create a more minimal reproduction. You can make one via https://astro.new/latest . It helps us to isolate the problem without having to remove extra things that are not related.

[github-actions[bot]]

Hello @dewodt. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[V3RON]

This is not an issue with the framework itself but with specific pages. The SVG format icon is not well supported by Safari on iOS, so it is best to define the icon also in PNG format and optionally add an apple-touch-icon.

[dewodt]

Update: I did not alter any metadata or image extensions. The only change I made was upgrading to the latest version of Astro. After waiting for about a week, everything resolved itself.

Thank you for the responses!