SVG Favicon не работает

Я пытаюсь получить SVG Favicon на своем сайте, но независимо от того, что я делаю, он просто не хочет работать.

У меня есть следующий код, сохраненный как .svg файл в моем обычном местоположении favicon, но когда я изменяю путь favicon, чтобы быть .svg вместо .ico, ничего не загружается.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.5 283.4" style="enable-background:new 0 0 384.5 283.4;" xml:space="preserve"  width="100%" height="100%">

<style type="text/css">
    .shape1 {fill: #DB6B2A;}
    .shape2 {fill: #AE1A31;}
</style>

<path class="shape1" d="M384.5,83.7c-4.6-19.3-14.3-36.3-29.3-51.3C333.4,10.6,307.6,0,276.7,0c-30.9,0-56.7,10.6-78.4,32.4
l-4.6,5.1l-4.5-5.1C167.4,10.6,141.6,0,110.8,0S54.1,10.6,32.4,32.4C10.6,54.1,0,79.9,0,110.8v61.1l55.1-12.8v-48.4
c0-15.2,5.6-28.3,16.2-39C82,60.7,95.1,55.1,110.8,55.1c30.4,0,55.1,25.3,55.1,55.6v22.9l55.6-12.7v-10.1c0-2.5,0-4.6-0.5-7.1
c1.5-12.1,7.1-22.8,16.2-31.9c10.6-11.1,23.8-16.7,39.5-16.7c25.4,0,46.9,17.2,53.3,40.7"/>

<path class="shape2" d="M54.5,187.6c6.4,23.5,27.9,40.7,53.3,40.7c15.7,0,28.8-5.6,39.5-16.7c9.1-9.1,14.7-19.7,16.2-31.9
c-0.5-2.5-0.5-4.6-0.5-7.1v-10.1l55.6-12.7v22.9c0,30.4,24.8,55.6,55.1,55.6c15.7,0,28.8-5.6,39.5-16.7
c10.6-10.6,16.2-23.8,16.2-38.9v-48.4l55.1-12.7v61.1c0,30.9-10.6,56.7-32.4,78.4c-21.7,21.7-47.5,32.4-78.4,32.4
c-30.9,0-56.7-10.6-78.4-32.4l-4.6-5.1l-4.6,5.1c-21.7,21.7-47.6,32.4-78.4,32.4s-56.7-10.6-78.4-32.4C14.3,236,4.6,219,0,199.7"/>
</svg>

Это код, который я использую для установки favicon;

<link rel="icon" href="#" onclick="location.href='http://www.MYSITE.co.uk/favicon.svg?v=4'; return false;">

Я не могу разобраться, если это проблема с моим кодом .svg, или я что-то упустил. Благодаря

Ответ 1

Значки SVG не поддерживаются нигде, кроме Firefox и Safari: http://caniuse.com/#feat=link-icon-svg

Возможно, вы захотите просто использовать .png, пока поддержка не улучшится.

Ответ 2

Вам нужно растрировать SVG для браузеров, которые не поддерживают значки SVG (в настоящее время большинство из них). См. Есть ли способ отображать значки SVG в неподдерживаемых браузерах?

Ответ 3

Вы можете попробовать как это

<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">

но большая часть браузера не поддерживает

Ответ 4

Прежде всего, код, который вы используете для ваших значков, отсутствует в одной части, он должен включать где-то. который говорит: type = "image/x-icon". Итак, для favicons, используя .jpg или другие стандартные изображения, например .gif, код выглядит следующим образом:

<link href="someimagesourcefileorURL.jpg" rel="icon"  type="image/x-icon" />

1. Для расширения изображения .jpg работает [или вы можете использовать другое сопоставимое расширение файла;.gif тоже.] 2. Для rel достаточно "значка" [но вы также можете поместить слово "ярлык" рядом с/перед "значком", если хотите, необязательно.]

Для SVG 'favicon' это немного сложнее, по нескольким причинам. Это необязательно, но для лучшей работы вам нужно, чтобы изображение SVG было размером до 256 квадратных пикселей (16 пикселей на 16 пикселей, но поскольку SVG обычно масштабируемо, я рекомендую установить высоту и ширину как на <= 16px непосредственно перед пытаясь использовать их в качестве "значка". Таким образом, вам нужно разделить высоту на любое число, необходимое для того, чтобы высота была равной или была меньше 16 пикселей, и то же самое верно для ширины. Если у вас есть квадрат, равномерно распределенный изображение, то вы должны иметь возможность просто изменить весь размер изображения на процент, и все изображение будет уменьшаться без существенного искажения при сохранении квадратной формы. Если у вас нет квадратной формы, вам придется исказить некоторые из них превращают его в квадратную форму, потому что favicons имеют квадраты 16px на 16px. Предполагая, что вы уже сделали эти настройки, мы движемся дальше. Теперь, после того, как эта часть будет выполнена, вы используете этот формат для SVG 'favicons':

<link rel="icon" href="someimagefileorURL.svg" type="image/svg+xml" />

Это должно работать до тех пор, пока ваше изображение SVG будет отклонено уже как описано выше. Здесь хороший JSfiddle (не-мой), который демонстрирует, что этот код работает. https://jsfiddle.net/Daniel_Hug/YawSn/ И у меня есть большой опыт работы с традиционными знаками, работающими с первым описанным мной методом.

Надеюсь, это поможет! Я уверен, что кто-то показал мне это, когда я еще не знал, как использовать/настроить значки!: -)

Ответ 5

Попробуйте добавить SVG-изображение, сделанное в Photoshop, например, и используйте его. Если это работает, это показывает, что ошибка в коде SVG. В противном случае вы неправильно свяжете файл.