Это часть, связанная с значком:
Код: Выделить всё
[*] rel="icon"
href="/favicon-32x32-light.png"
sizes="32x32"
media="(prefers-color-scheme: light)"
/>
Код: Выделить всё
.inside {
fill: green;
}
@media (prefers-color-scheme: dark) {
.inside {
fill: red;
}
}

В Android Chrome (v129.0.xxx) и значок SVG, и значок Apple Touch просил и затем применяется apple touch (SVG имеет разные цвета, чтобы их можно было заметить):

Насколько я понимаю, Android Chrome поддерживает SVG в качестве значка, и его алгоритм выбора должен выбрать SVG. Думаю, что-то не так в настройке моей страницы. Вот MDN:
Если существует несколько , браузер использует их атрибуты мультимедиа, типа и размеров, чтобы выбрать наиболее соответствующий значок. Если несколько значков одинаково уместны, используется последний. Если впоследствии наиболее подходящий значок оказывается неподходящим, например, из-за того, что он использует неподдерживаемый формат, браузер переходит к следующему наиболее подходящему значку и так далее.
В сообщении на сайте Realfavicongenerator.net объясняется, что Android Chrome также использует значок Apple Touch на основе расчета ширины/высоты. Но SVG можно масштабировать по мере необходимости, поэтому я понимаю, что он должен иметь приоритет.
Что я пробовал, но безуспешно:
- изменение порядка тегов
- удаление атрибута размеров либо в значке Apple Touch, либо в SVG, либо в обоих случаях
- дублирование SVG с отдельными атрибуты media для темной/светлой схемы
- создание увеличенного SVG с viewBox размером более 180x180, например 200x200
- отображение локального сайта через HTTPS
Это окно с кодами, показывающее проблему, с более простой настройкой (без темных/светлых вариантов): https: //s3cnww.csb.app/
Кто-нибудь знает, как заставить Android Chrome выбирать SVG? ТА
Подробнее здесь: https://stackoverflow.com/questions/790 ... vg-favicon