Welcome to TalkGraphics.com
Results 1 to 4 of 4
  1. #1
    Join Date
    Aug 2000
    Harwich, Essex, England

    Default Anyone intersted in using svg favicons?

    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:
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	export.png 
Views:	52 
Size:	5.6 KB 
ID:	134927  

    Minis Forum UM780XTX AMD Ryzen7 7840HS with AMD Radeon 780M Graphics + 32 GB Ram + MSI Optix Mag321 Curv monitor
    + 1Tb SSD + 232 GB SSD + 250 GB SSD portable drive + ISP = BT + Web Hosting = TSO Host

  2. #2
    Join Date
    Nov 2018

    Default Re: Anyone intersted in using svg favicons?

    Quote Originally Posted by Egg Bramhill View Post
    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.

  3. #3
    Join Date
    Nov 2016
    Stockport, UK

    Default Re: Anyone intersted in using svg favicons?

    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.

  4. #4
    Join Date
    Apr 2012
    SW England

    Lightbulb Re: Anyone intersted in using svg favicons?

    Ahead of Egg's tut.

    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.

    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

    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:
    <link rel="shortcut icon" type="image/ico" href="index_html_files/favicon.ico">
    <link rel="icon" type="image/ico" href="index_html_files/favicon.ico">
    <meta name="msapplication-TileImage" content="index_html_files/tileicon.png">
    <link rel="apple-touch-icon" href="index_html_files/tileicon.png">
    <link rel="icon" type="image/svg+xml" href="index_html_files/logo.svg">
    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 - installed Xara software: Cloud+/Pro+ and most others back through time (to CC's Artworks). Contact for technical remediation/consultancy for your web designs.
    When we provide assistance, your responses are valuable as they benefit the community. TG Nuggets you might like. Report faults: Xara Cloud+/Pro+/Magix Legacy; Xara KB & Chat



Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts