TIL
TIL: SVG Favicons
- Maturity
- Evergreen · Complete
- Published
- Reading time
- 1 min read
TIL favicons are more complicated than I knew.
- You CAN use SVGs for favicons more info in this blog post
- Favicons CAN also use PNGs
- Support for SVGs is mixed
SVG favicons, for example, are still not supported in Apple's Safari on mobile or desktop. For that, you'll need to fall back to a png favicon (which is supported by both).
Because HTML is flexible, you can still define both the newer svg and older png favicon, and if svgs are supported, the browser will use that, and if not, the PNG favicon will be used
<meta name="theme-color" content="#ffffff" />
<link rel="icon" href="/favicon.png" sizes="any" />
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="manifest" href="/manifest.json" />