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

    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  
    Egg

    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
    Location
    Italy
    Posts
    115

    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.
    Marco.

  3. #3
    Join Date
    Nov 2016
    Location
    Stockport, UK
    Posts
    152

    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
    Location
    SW England
    Posts
    18,082

    Lightbulb Re: Anyone intersted in using svg favicons?

    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:
    <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
    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

Bookmarks

Posting Permissions

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