SVG Favicon не работает
Я пытаюсь разместить SVG-значок на своем сайте, но что бы я ни делал, он просто не работает.
У меня есть следующий код, сохраненный как файл .svg в моем обычном местоположении значка, но когда я изменяю путь значка на .svg вместо .ico, ничего не загружается.
Это код, который я использую для установки значка;
Я не могу понять, связана ли это с моим кодом .svg или я что-то упускаю. Благодарность
5 ответов
Иконки SVG теперь поддерживаются для Firefox, Safari, Chrome, Edge и Opera: https://caniuse.com/#feat=link-icon-svg
Поддержка Chrome была добавлена только с версии 80.x.
Оптимизированные значки избранного SVG могут иметь размер всего 100–200 байтов, поэтому имеет смысл сделать внешний запрос. Просто вставьте его на страницу. При этом вы сохраните внешний запрос изображения, размер которого может быть больше ожидаемого из-за того, что файлы cookie отправляются при запросе изображений.
Как отмечали другие, поддержка браузеров пока невелика, но SVG Favicons предоставляют некоторые вещи, которые вы просто не можете сделать с PNG, например, стилизацию с помощью CSS и даже анимацию на основе JS.
Вот проблема Chrome для добавления поддержки, открытая с 2013 года с никакого реального прогресса из-за блокировщиков.
Вы можете попробовать вот так
Но большинство браузеров не поддерживает
Вам необходимо растрировать SVG для браузеров, которые не поддерживают значки SVG (а сейчас их большинство). См. Есть ли способ отображать значки SVG в неподдерживаемых браузерах?
Прежде всего, в коде, который вы используете для своих значков, отсутствует одна часть, она должна где-то включать. что говорит: type = «image / x-icon». Итак, для значков, использующих .jpg или другие стандартные изображения, такие как .gif, код выглядит так:
1. Для расширения изображения подойдет .jpg [или вы можете использовать другое аналогичное расширение файла; .gif тоже работает.] 2. Для rel достаточно «icon» [но вы также можете поставить слово «ярлык» рядом с / перед словом «icon», если хотите, по желанию.]
Для «фавикона» SVG это немного сложнее по нескольким причинам. Это необязательно, но для наилучшей работы вам нужно, чтобы размер изображения SVG не превышал 256 квадратных пикселей (16 пикселей на 16 пикселей, но, поскольку SVG обычно масштабируется, я рекомендую сразу перед попыткой установить высоту и ширину как 7
Источник
Еще не используешь SVG фавиконки?
Тебе нужно использовать SVG фавиконки. Они поддерживаются во всех современных браузерах (Ну почти во всех).
Кроме того, не нужны все эти ссылки на значки и размеры, которые ты копируешь из проекта в проект. Давайте узнаем, какой абсолютный минимум для этого требуется.
Иконка
Главная фивиконка может быть SVG любого размера. Тип type=»image/svg+xml» не нужен.
Тач-иконки
Для иконки на IOS девайсах, а также для избранное на странице новой вкладки в браузере. Вам нужен только размер 180 x 180 , и атрибут sizes лишний.
Манифест
Файл manifest.json предоставляет информацию о вашем веб-приложении или веб-сайте. Эти строки являются обязательными для прохождения теста Lighthouse.
Значок используется Android и Chrome. Нужен только самый большой размер 512 x 512.
theme-color meta по-прежнему требуется для цвета иконки в Chrome и Android.
Готово
Вот и все, что вам нужно для современных браузеров, все остальное не нужно. msapplication-TileImage можно добавить, если вам нужен другой значок в плитках Windows, в противном случае используется apple-touch-icon . TileColor больше не используется.
Все остальное
К сожалению, не все используют современные браузеры, но это можно легко решить, поместив favicon.ico размером 32 x 32 в корень вашего веб-сайта. Это работает везде, даже у вашей бабушки.
Темный режим
В заключение, вот совет по темному режиму. Одним из преимуществ значка SVG является то, что вы можете изменить цвет с помощью CSS. При использовании медиа-запроса prefers-color-scheme цвет вашего значка меняется в зависимости от темного или светлого режима пользователя. Этот метод не будет работать со mask-icon , так как цвет указан в атрибуте, но Safari добавляет белый фон, если контраста недостаточно.
Источник
SVG Favicon не работает
Я пытаюсь получить SVG Favicon на своем сайте, но независимо от того, что я делаю, он просто не хочет работать.
у меня есть следующий код, Сохранить как .svg-файл в моем обычном местоположении favicon, но когда я изменяю путь favicon на be .svg вместо .ico, ничего не загружается.
это код, который я использую для установки favicon;
Я не могу разобраться, если это проблема с моим .код SVG, или я что-то упускаю. Спасибо
4 ответов
SVG favicons не поддерживаются нигде, кроме Firefox и Safari: http://caniuse.com/#feat=link-icon-svg
вы можете просто использовать .png до улучшения поддержки.
вам нужно растеризировать SVG для браузеров, которые не поддерживают значки SVG (которые в настоящее время большинство из них). См.есть ли способ отображать SVG-значки в неподдерживаемых браузерах?
прежде всего код, который вы используете для своих favicons отсутствует одна часть, она должна включать, где-то. это говорит: type= «image / x-icon». Так что для фавиконов, используя .jpg или другие стандартные изображения, такие как .gif код выглядит так:
1. Для расширения изображения, .jpg работает [или вы можете использовать другое сопоставимое расширение файла; .гиф тоже работает.] 2. Для rel достаточно «значок» [но вы также можете поместить слово «ярлык» рядом с / Перед «значком», Если вы хотите, по желанию.]
для SVG «favicon» это немного сложнее, по нескольким причинам. Это необязательно, но для лучшей работы вам нужно, чтобы изображение SVG было размером менее 256 квадратных пикселей (16 пикселей на 16 пикселей, но поскольку SVG обычно масштабируется, я рекомендую установить высоту и ширину в оба
это должно работать до тех пор, пока ваше изображение SVG было уменьшено уже, как описано выше. Вот хороший JSfiddle (не мой), который демонстрирует, что этот код работает. https://jsfiddle.net/Daniel_Hug/YawSn/ и у меня есть большой опыт работы с традиционными фавиконами, работающими с первым методом, который я описал.
надеюсь, что это помогает! Я очень хочу, чтобы кто-нибудь показал мне это, когда я . еще не знал, как использовать/настроить favicons! 🙂
Источник
Не появляется иконка svg
Не отображается иконка в svg формате. Прописал так:
Файл close.svg — это одна единственная иконка, не спрайт. Всё уже перепробовал. ПО id помоему определение делаю — это уже лишнее? Через стили появляется, бекграундом.
А мне нужно именно через разметку выводить её. В мозилле стала отображаться, а в остальных браузерах нет(
В инспекторе смотрю DOM — различий нет абсолютно в разных браузерах, но иконки появляются лишь в firefox.
Chrome пишет: Error: attribute width: Expected length, «auto». Хотя width=»auto» и стоит.
1 ответ 1
Код добавления svg иконки в HTML у вас абсолютно верный для случая, когда изображение svg сохранено в отдельный файл и находится в папке или на сетевом ресурсе с указанием естественно полного URL
Без кода иконки, а в ней часто бывают причины отказа, догадаться трудно, почему её не видно.
Поэтому только предположения:
- В браузере Chrome при запуске кода на localhost иконки не будет видно при добавлении с помощью , только в сетевом размещении иконки работают. Либо локально тестируйте в Firefox у него иконку будет видно.
- Если со стилями непорядок,- иконка не будет видна.
- С масштабированием, позиционированием, что-то не так. viewBox=»0 0 511.626 511.627″ Иконка может находиться за пределами области видимости.
update 19.12.2018
Попробуйте добавить иконку svg самым надёжным способом — инлайн, то есть непосредственно в Html разметку.
Код иконки, исключая шапку, нужно обернуть тегами . которые скроют содержание иконки до её вызова командой и полностью скопировать код иконки в HTML
Теперь в любом месте HTML можно многократно вызвать иконку
Update 21.12.2018
Теперь с кодом стали понятны причины
У вас код иконки обернут тегами , которые скрывают содержание Вызов содержания должен идти не через id svg, а через id
(Присвойте ID , а у SVG уберите)
Добавление SVG (инлайн способ) непосредственно в HTML без тегов
Источник
SVG Favicon Not Working
I’m trying to get an SVG Favicon on my site but no matter what I do, it just doesn’t want to work.
I’ve got the following code saved as an .svg file in my usual favicon location, but when I change the favicon path to be .svg instead of .ico, nothing loads.
This is the code I’m using to set the favicon;
I can’t work out if it is an issue with my .svg code, or I’m missing something. Thanks
. note to icebird . the v=4 is a cachebusting id.
6 Answers 6
SVG favicons are now supported for Firefox, Safari, Chrome, Edge and Opera: https://caniuse.com/#feat=link-icon-svg
Chrome support was added in version 80.x.
First of all the code you are using for your favicons is missing one part, it should include, somewhere. that says: type=»image/x-icon». So for favicons, using .jpg or other standard images like .gif the code looks like this:
1. For image extension, .jpg works [or you can use another comparable file extension; .gif works too.] 2. For rel, «icon» is sufficient [but you can also put the word «shortcut» next to/before «icon» if you want, optionally.]
For an SVG ‘favicon’ it’s a little trickier, for a few reasons. This is optional but to work best, you need the SVG image to be sized to under 256 square pixels (16 pixels by 16 pixels, but since SVG are normally scalable, I recommend setting the height and width to both
Источник