DEV Community

Discussion on: Definitive edition of "How to Favicon" in 2023

Collapse
 
xcuses profile image
xcuses

Hi, this works for me:
<link rel="icon" sizes="48x48" href="/favicon.ico">
<link rel="icon" type="image/svg+xml" sizes="any" href="/favicon.svg">

Like this, Chrome and Edge only load the SVG Icon.

Collapse
 
guitarzan profile image
Doug Waldron

Cool, have you had a chance to see how it works on Safari? (I believe Safari is currently the only reason to still include the ".ico" link.)

Thread Thread
 
xcuses profile image
xcuses • Edited

Yes, that's why I included the ".ico" link. I don't own any Apple device..... if someone wants to check out if this setup works in Safari, this is the site I'm working on: ciceroneberlino.com
If someone checks it out, please let us know :)

Collapse
 
masakudamatsu profile image
Masa Kudamatsu

Thanks a lot for your input! (Sorry for this belated reply...)

I myself tried your suggestion for the web app I'm developing, and I can confirm that Safari on Mac OS (and iOS browsers) does use the ICO favicon with this code!

I'm planning to update the article to incorporate your suggestion once a few more people post comments on their experiences with it.