[Resolved] SVG as Favicon – support all browsers

[Koll]

Hi
I read the posts about the favicon and SVG. The answer you seem to suggest is just to add the icon to the site icon field.
That sounds fine. Another answer I noted on the forums is to upload your favicon.ico to the root and that should cover everything.

However, unless I missed something, using an SVG for the favicon is a bit more involved.

I note several articles, like this one:
https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs

You need to do 2 steps; add this code:

<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">

The this to the web manifest

// manifest.webmanifest
{
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
  ]
}

My question is which method is correct. Just adding to generate press or using a method like the above.

It might be I’m not aware how generatepress works and it’s built in but I just want to check.

Thanks

[Ying]

Hi Koll,

You can just upload the SVG to site icon field.

[Koll]

Hi
Thanks.
No actually, it’s not working in other browsers, this is for SVG not PNG.
SVG is not compatible across all browsers and on mobile.
Is there someone else that can chime in perhaps? Thanks

[Fernando]

Hi Koll,

The Site Icon/favicon rescaling is handled by WordPress.

Using a PNG favicon would be an alternative if you want more support: https://caniuse.com/link-icon-png

As for SVG, you are correct that it isn’t supported in all browsers especially on mobile, and here is an article you may refer to for more information regarding this, and possibly a way to increase its support: https://css-tricks.com/dynamic-favicons-for-wordpress/#:~:text=plain%20old%20SVG.-,Browser%20support,-If%20we%20were

As for the code you sent, this is also seems a viable/good workaround as it provides fallback site icon images if the icon isn’t supported.

I suggest you try uploading a 512×512 PNG site icon first and let WordPress handle the rescaling, and see how it goes. 🙂

Hope this answers your inquiry! 🙂

[Koll]

Hey thanks for the detail. The caniuse link is really helpful.
I’ll try the PNG as it’s well supported – thanks again.

[Fernando]

You’re welcome Koll! Glad to be of assistance! Feel free to reach out anytime if you’ll have any more inquiries. 🙂

[Author]

Posts