You could argue against using an inline SVG favicon because linking to a file can be cached, and adding the inline SVG on every page would increase the HTML size, but I don’t think it would make much difference, and I prefer the maintainability here.
I really like this method because I can just forget about placing the icon file in a folder somewhere, and I can copy/paste this code to any project (most of my side projects use the same icon now). Instead of linking to the path, prefix your entire SVG code with data:image/svg+xml utf8, (including that last comma) and pass the whole thing to the href attribute."> I’ve used the Data-URI trick before with inline images or backgrounds and it works like a charm. Inlining SVG Favicons As Data-URIĪfter switching to SVG favicons, the first thing I tried to do was to see if I could use them with an inline format rather than linking to a separate file. If you need to search for free icons, icones is a good resource, or you can create your own with penpot. īecause we are using an SVG, the icon can be whatever size you want, just make sure that the canvas is square. In your HTML file’s tag you place a element with the rel attribute set to “icon” and the href attribute set to the path where your icon lives. The syntax for adding a favicon to your website hasn’t changed in a long time, and the same applies for SVG favicons (minus the file extension).
0 kommentar(er)
