Summary
With Safari 26 all the major browsers support SVG icons. See present support here. ICO files are still needed as a fallback.
Code
HTML
<link rel="icon" type="img/x-icon" href="/svg/favicon.svg">
<!-- 180×180 PNG -->
<link rel="icon" href="/img/favicon.ico" sizes="any">
<!-- 180×180 -->
<link rel="apple-touch-icon" href="/img/apple-touch-icon.png">
<!-- Needed is making aPWA (Progressive Web App) 192×192 and 512×512 PNG -->
<link rel="manifest" href="/manifest.webmanifest">Light/dark mode SVG favicon
This example uses prefers color scheme to change colors.
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve"
fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"
clip-rule="evenodd" viewBox="0 0 968 883">
<defs>
<style>
.bars { fill: #c6313d; }
.brackets { fill: #17171c; }
@media (prefers-color-scheme: dark) {
.bars { fill: #ed505d; }
.brackets { fill: #ffffff; }
}
</style>
</defs>
<path class="bars" d="M532.59 239.368c0-27.673-22.466-50.138-50.138-50.138-27.671 0-50.137 22.465-50.137 50.138v378.835c0 27.67 22.466 50.137 50.137 50.137 27.672 0 50.137-22.466 50.137-50.137V239.368ZM668.069 332.636c0-22.22-18.04-40.26-40.26-40.26-22.221 0-40.261 18.04-40.261 40.26v192.298c0 22.22 18.04 40.26 40.26 40.26s40.26-18.04 40.26-40.26V332.636ZM784.431 402.634c0-18.938-15.375-34.314-34.313-34.314-18.937 0-34.313 15.376-34.313 34.314v52.303c0 18.938 15.376 34.313 34.313 34.313 18.938 0 34.313-15.375 34.313-34.313v-52.303ZM251.037 402.634c0-18.938-15.375-34.314-34.313-34.314-18.938 0-34.313 15.376-34.313 34.314v52.303c0 18.938 15.375 34.313 34.313 34.313 18.938 0 34.313-15.375 34.313-34.313v-52.303ZM367.97 334.336c0-23.159-18.8-41.96-41.959-41.96-23.158 0-41.96 18.801-41.96 41.96v188.899c0 23.158 18.802 41.96 41.96 41.96s41.96-18.802 41.96-41.96v-188.9Z"/>
<path class="brackets" fill-rule="nonzero" d="M0 0h283.052v98.098H119.556V784.78h163.496v98.097H0V0ZM967.032 882.877H682.958V784.78h163.496V98.098H682.958V0h284.074v882.877Z"/>
</svg>Example
This is the SVG from the code example. The site's dark and light button has no impact as it uses its own theme atributes to set colours, but it works as a favicon.
Notes:
- Does not alter inline with incognito and private modes dark theme.
- Works if device and/or broswer is changed.