DEV Community

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

Collapse
 
guitarzan profile image
Doug Waldron

This is an amazing article and definitely the most thorough that I've found!

I have some bad news though 🙁

It looks like Chromium has changed how it scores icons with the sizes="any" attribute and is now using the ICO file instead of the SVG file. See this code review: chromium-review.googlesource.com/c...

My best estimate is that started shipping with version 110.

Collapse
 
masakudamatsu profile image
Masa Kudamatsu

Hi Doug! Sorry for my late reply, but thank you for your comment! It has solicited the response from xcuses below, which I can confirm works with Safari.

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.