Search code examples
xmlsvgw3c-validation

Correct way to insert favicon link tag in SVG


What is the correct way to insert a link tag that points to favicon? I've tried the following but the W3C Validator reports element "xhtml:link" undefined.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <title>De mægtige vikinger</title>
  <defs>
    <xhtml:link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  </defs>
</svg>

Solution

  • The validator isn't wrong per se, because what you have isn't pure svg, it's svg plus some xhtml and the validator has no such configuration. The way I see it you have two options:

    1. accept that this is how it is in browsers right now, and create a new validation profile / custom DTD for this use-case.
    2. pass the svg off as html5 instead, by changing the markup and removing the xml header and setting <!DOCTYPE html>. Then you can put the link as usual in the head section. Note that this may mean you won't be able to reference the file as an svg (since it's then html), so be sure to test in all browsers you target.