Anyone intersted in using svg favicons?

**Egg Bramhill** · 23 May 2024, 02:28 AM

If so I'll do a tutorial.

Here's an example of how clean an svg one of TG's is compared to the one on the TG forum:

**Marco D** · 27 May 2024, 09:53 AM

Originally Posted by Egg Bramhill

If so I'll do a tutorial.

Here's an example of how clean an svg one of TG's is compared to the one on the TG forum:

Sorry, but I can't under stand what do you mean. Are you referring at the fact that SVG are vectors and therefore cleaner than the usual favicon icons?
Or how to convert a raster favicon into an SVG (thus Vector) one?
Either way one of tour tutorial Is always welcome.

**IanB** · 27 May 2024, 10:34 AM

I certainly can see the advantage of a SVG favicon and would adopt the idea if it wasn't too complicated to understand and implement.

**Acorn** · 27 May 2024, 01:10 PM

Ahead of Egg's tut.

FOUNDATION
Create your favicon as normal - https://helpandsupport.xara.com/xara...-web-page.html
I usually leave mine off page on the left.

Select the shape and Export as SVG. I called mine logo.svg.
The shape is best as a vector/text at this point. Avoid transparencies to be sure.

NOVEL
Create a pop-up layer - mine was called logo.
Drag your newly created SVG, or other onto this layer.
Select it and Link it to the pop-up layer and close the layer.
This ensures that logo.svg is always published but is never seen.
This could be omitted if the website logo was the same with the same filename

NECESSARY
Ensure logo.svg is somehow rendered.
In Website > HTML Code (head) put <link rel="icon" type="image/svg+xml" href="index_html_files/logo.svg">
Check if you are rendering html or htm and match the href path accordingly.

Your <head> Tag will look like:

Xara generates the first four lines and yours overwrites the second.

Use this link to check your site: https://realfavicongenerator.net/fav...lkgraphics.com or https://realfavicongenerator.net/fav...n.xara.hosting
Obviously replace the site path with yours.

Acorn