Смена фавикона по событию

@Mailo · Регистрация: 18.02.2010

Author24 — интернет-сервис помощи студентам

Возможно ли как то обратиться к фавикону по событию и сменить его, например по наличию класса:

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
if ($(".wrapper").hasClass(".light")) {
  <link rel="shortcut icon" href="favicon.svg" type="image/svg">
},
else if ($(".wrapper").hasClass(".dark")) {
  <link rel="shortcut icon" href="favicon_dark.svg" type="image/svg">
}

@barabar · 22.10.2024, 19:37

Сообщение от Mailo

братиться к фавикону по событию и сменить его,

Ну, это будет уникальное явление. Такого точно нигде нет

Как могло такое прийти в голову? Я бы никогда не додумался

Добавлено через 1 минуту
Думаю, что можно... не проверял. Вот только браузер может кэшировать старую иконку и новая не сразу будет появляться. Так что идея не прокатит.

Добавлено через 31 минуту
У меня на одном сайте при смене темы день/ночь меняется не фавикон, а иконка сайта. На темном фоне она светлая, а на светлом - темная. Но я меняю не файл svg, а код svg и поэтом смена происходит без проблем с кэшированием.

@Mailo · 22.10.2024, 20:31 **[ТС]**

а на гитхабе вроде как фавикон меняется при смене тем, видать как то можно сделать.

@barabar · 22.10.2024, 21:08

Mailo, ошибаешься. У них меняется иконка сайта, а не фавикон. И заменяется не ссылка на файл, а как я говорил код иконки.
Вот скрин:

@Mailo · 22.10.2024, 22:38 **[ТС]**

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

@voraa · 23.10.2024, 18:41

Ну такие вещи делаются через сервер. Выбор темы запоминается в куках и идет на сервер при вызове страницы. А страница генерится сервером с учетом настроек.

@barabar · 23.10.2024, 18:46

Сообщение от voraa

Ну такие вещи делаются через сервер.

А мне кажется, что такие вещи никто никогда не делал и делать не собирается. Если есть пример, что кто-то меняет на сайте фавикон при выборе темы - я тогда принесу публично извинения. Жду ссылку на сайт, где такое делают.

@voraa · 23.10.2024, 19:30

Сообщение от barabar

Если есть пример, что кто-то меняет на сайте фавикон при выборе темы

Не обязательно при смене темы. Но, как пример discord. Там может меняться фавикон, например, если для меня есть сообщения. Важен сам факт того, что он может меняться, а когда - зависит от фантазии разработчика.

@barabar · 23.10.2024, 19:42

Сообщение от voraa

Но, как пример discord. Там может меняться фавикон, например, если для меня есть сообщения.

Действительно? Значит приношу извинения. Просто я не в курсе. Не пользовался. Меняется прямо на сайте или в мобильном приложении? Если в приложении - не считается.
Вот их фавикон на сайте https://cdn.prod.website-files... 73177e.ico
Покажешь, какой становится при наличии сообщения?

@voraa · 23.10.2024, 20:02

Я сейчас не дома, и по инету с мобильного оператора не могу туда войти. Дома (на прошлой неделе) заходил нормально. По памяти, там вроде появляется красный кружочек на фавиконе.

@gogolik · 23.10.2024, 20:58

barabar, да на самом деле дофига кто меняет.

@barabar · 23.10.2024, 21:15

gogolik, буду знать

Мне Яндекс не поменял. Я редко им пользуюсь. Может не обращал внимание.

@Eva Rosalene · 30.10.2024, 00:40

Сообщение от Mailo

Возможно ли как то обратиться к фавикону по событию и сменить его, например по наличию класса:

Да, конечно же.

HTML5    
        
    Скопировано
1
<link id="favicon" rel="shortcut icon" href="favicon.svg" type="image/svg">

JavaScript    
        
    Скопировано
1
2
3
if ($(".wrapper").hasClass(".dark")) {
  document.getElementById("favicon").href = "favicon_dark.svg";
}

Никаких особых проблем с кэшированием быть не должно (кроме стандартных), вопреки тому, что тут говорят

@barabar · 30.10.2024, 07:03

Сообщение от Eva Rosalene

Никаких особых проблем с кэшированием быть не должно (кроме стандартных), вопреки тому, что тут говорят

Не соглашусь. Очень хорошо кэшируется и мне не раз приходилось чистить кэш браузера при смене иконки и даже делать жесткую перезагрузку.
К тому же бывает по несколько favicon на сайте. Для различных устройств и ОС.

@gogolik · 30.10.2024, 07:17

barabar, в хроме нормально меняются, кстати, без перезагрузок и танцев с бубном. Вчера как раз делал смену фавикона (11 вариантов) при поступлении новой заявки, на ура работает. Что локально, что на проде.

@barabar · 30.10.2024, 07:26

gogolik, может быть. У меня обычно при смене проблема. Да и вообще идея со сменой мне непонятна. На сайте меняется светлая тема на темную, но тема браузера не меняется при этом. А эта иконка закреплена на вкладке браузера.

@Eva Rosalene · 30.10.2024, 09:14

Сообщение от barabar

и мне не раз приходилось чистить кэш браузера при смене иконки

Вы href внутри link меняли, или иконка подменялась на серверной стороне без смены URL? В первом случае браузер должен подхватить сразу же, во втором - применяются все правила касательно обычного кэширования ресурсов.

@barabar · 30.10.2024, 09:56

Сообщение от Eva Rosalene

В первом случае браузер должен подхватить сразу же

Соглашусь. Не подумал сразу об этом.

@Mailo · 30.10.2024, 11:56 **[ТС]**

Сообщение от Eva Rosalene

1
2
3
if ($(".wrapper").hasClass(".dark")) {
document.getElementById("favicon").href = "favicon_dark.svg";
}

Строка с id работает как надо,
добавил id к фавикону всё меняется

HTML5    
        
    Скопировано
1
<link id="favicon" rel="shortcut icon" href="favicon.svg" type="image/svg">

но у меня почемут условие не отрабатывает на клике, толи лыжи не едут, толь снег ещё не выпал.

JavaScript    
        
            
                
                
                
                
            
        
    Скопировано
1
2
3
4
5
6
7
8
9
10
$(".header").click(function() {
  if ($(".wrapper").hasClass(".dark")) {
    $("#favicon").href = "favicon_dark.svg"
    console.log("dark")
  }
  else if($(".wrapper").hasClass(".light")) {
    $("#favicon").href = "favicon.svg"
    console.log("light")
  }  
})

@barabar · 30.10.2024, 12:12

Сообщение от Mailo

hasClass(".dark")

Точно не нужна перед классом.

Новые блоги и статьи Все статьи Все блоги /
Агрегаты и сущности в DDD микросервисах Javaican 10.04.2025 Разработка современных программных систем часто приводит на распутье: монолит или микросервисы? Даже при выборе микросервисной архитектуры многие команды сталкиваются с проблемой правильного. . .	Многопоточность в C#: Task и параллельное программирование UnmanagedCoder 10.04.2025 Современные процессоры уже давно перестали наращивать тактовую частоту в пользу увеличения количества ядер. Это создало интересную ситуацию: разработчики, привыкшие к последовательному. . .	Линейное решение нелинейной задачи. Формулы от LM по моему решению пока не проверял. В итоговой её формуле видно её заблуждение. Hrethgir 10.04.2025 В продолжение Эта LM дала ответ похожий на нормальный. В комментриях мой комментарий - похоже она ошиблась с выведением итоговой формулы, но остальные проверю. Assistant qwen2. 5-14b-instruct . . . .	Переменные в Python py-thonny 10.04.2025 Переменная в программировании — это символическое имя, связанное с областью памяти, в которой хранится значение. Она позволяет получать доступ к данным через понятные человеку идентификаторы, а не. . .	Многопоточность в C#: Task и асинхронные операции UnmanagedCoder 10.04.2025 Многопоточность позволяет выполнять несколько операций одновременно, что важно для решения двух основных задач: повышения скорости выполнения вычислительно-сложных операций и сохранения отзывчивости. . .
Линейное решение не линейной задачи (емкость вычислений в сравнении с традиционными решениями пока не определена). Hrethgir 10.04.2025 В рамках предстоящих вычислений пришлось (да, я тоже знаю про корень числа, и про степеня, и прочие теоремы, но. . . ) найти способ нахождения отношения двух углов. . . .	Запуск контейнеров Docker на ARM64 Mr. Docker 09.04.2025 Появление таких решений, как Apple M1/ M2, AWS Graviton, Ampere Altra и Raspberry Pi, сделало использование ARM-систем обыденностью для многих разработчиков и DevOps-инженеров. При этом Docker,. . .	Vue SFC компонент на PHP с Fusion Jason-Webb 09.04.2025 PHP на сервере и JavaScript на клиенте — классическое сочетание, которое, несмотря на свою эффективность, создает определенный когнитивный диссонанс при разработке. В этом контексте появляются. . .	TypeScript vs JavaScript: Отличия и когда что использовать Reangularity 09.04.2025 JavaScript появился в 1995 году как творение Брендана Эйха и быстро стал основой интерактивности в вебе. За свою историю он прошел путь от простого языка для манипуляций с DOM до полноценной. . .	Подключение Kafka к Elasticsearch Codd 09.04.2025 Apache Kafka и Elasticsearch — две мощные технологии, которые при совместном использовании создают эффективную платформу для обработки и анализа данных в реальном времени. Kafka, выступая в роли. . .

@barabar Заблокирован
	22.10.2024, 19:37
	Сообщение от Mailo братиться к фавикону по событию и сменить его, Ну, это будет уникальное явление. Такого точно нигде нет Как могло такое прийти в голову? Я бы никогда не додумался Добавлено через 1 минуту Думаю, что можно... не проверял. Вот только браузер может кэшировать старую иконку и новая не сразу будет появляться. Так что идея не прокатит. Добавлено через 31 минуту У меня на одном сайте при смене темы день/ночь меняется не фавикон, а иконка сайта. На темном фоне она светлая, а на светлом - темная. Но я меняю не файл svg, а код svg и поэтом смена происходит без проблем с кэшированием. 0

@Mailo 247 / 225 / 31 Регистрация: 18.02.2010 Сообщений: 2,311
	22.10.2024, 20:31 [ТС]
	а на гитхабе вроде как фавикон меняется при смене тем, видать как то можно сделать. 0

@barabar Заблокирован
	22.10.2024, 21:08
	Mailo, ошибаешься. У них меняется иконка сайта, а не фавикон. И заменяется не ссылка на файл, а как я говорил код иконки. Вот скрин: Миниатюры 1

@Mailo 247 / 225 / 31 Регистрация: 18.02.2010 Сообщений: 2,311
	22.10.2024, 22:38 [ТС]
	Ну да так оно и есть, сам не проверял, а люди оказывается толи лого от фавиконов не научились отличать, толи мне забыли отсыпать, что бы у меня тоже поменялось....думаю те же, у которых возникла идея, менять фон на фавиконе, вместе с изменением темы. 0

@voraa 914 / 660 / 136 Регистрация: 21.01.2024 Сообщений: 3,190
	23.10.2024, 18:41
	Ну такие вещи делаются через сервер. Выбор темы запоминается в куках и идет на сервер при вызове страницы. А страница генерится сервером с учетом настроек. 0

@barabar Заблокирован
	23.10.2024, 18:46
	Сообщение от voraa Ну такие вещи делаются через сервер. А мне кажется, что такие вещи никто никогда не делал и делать не собирается. Если есть пример, что кто-то меняет на сайте фавикон при выборе темы - я тогда принесу публично извинения. Жду ссылку на сайт, где такое делают. 0

@voraa 914 / 660 / 136 Регистрация: 21.01.2024 Сообщений: 3,190
	23.10.2024, 19:30
	Сообщение от barabar Если есть пример, что кто-то меняет на сайте фавикон при выборе темы Не обязательно при смене темы. Но, как пример discord. Там может меняться фавикон, например, если для меня есть сообщения. Важен сам факт того, что он может меняться, а когда - зависит от фантазии разработчика. 1

@barabar Заблокирован
	23.10.2024, 19:42
	Сообщение от voraa Но, как пример discord. Там может меняться фавикон, например, если для меня есть сообщения. Действительно? Значит приношу извинения. Просто я не в курсе. Не пользовался. Меняется прямо на сайте или в мобильном приложении? Если в приложении - не считается. Вот их фавикон на сайте https://cdn.prod.website-files... 73177e.ico Покажешь, какой становится при наличии сообщения? 0

@voraa 914 / 660 / 136 Регистрация: 21.01.2024 Сообщений: 3,190
	23.10.2024, 20:02
	Я сейчас не дома, и по инету с мобильного оператора не могу туда войти. Дома (на прошлой неделе) заходил нормально. По памяти, там вроде появляется красный кружочек на фавиконе. 1

@gogolik Супер-модератор 2950 / 1928 / 818 Регистрация: 13.03.2010 Сообщений: 6,331
	23.10.2024, 20:58
	barabar, да на самом деле дофига кто меняет. Изображения 3

@barabar Заблокирован
	23.10.2024, 21:15
	gogolik, буду знать Мне Яндекс не поменял. Я редко им пользуюсь. Может не обращал внимание. Изображения 0

@barabar Заблокирован
	30.10.2024, 07:03
	Сообщение от Eva Rosalene Никаких особых проблем с кэшированием быть не должно (кроме стандартных), вопреки тому, что тут говорят Не соглашусь. Очень хорошо кэшируется и мне не раз приходилось чистить кэш браузера при смене иконки и даже делать жесткую перезагрузку. К тому же бывает по несколько favicon на сайте. Для различных устройств и ОС. Миниатюры 0

@gogolik Супер-модератор 2950 / 1928 / 818 Регистрация: 13.03.2010 Сообщений: 6,331
	30.10.2024, 07:17
	barabar, в хроме нормально меняются, кстати, без перезагрузок и танцев с бубном. Вчера как раз делал смену фавикона (11 вариантов) при поступлении новой заявки, на ура работает. Что локально, что на проде. 1

@barabar Заблокирован
	30.10.2024, 07:26
	gogolik, может быть. У меня обычно при смене проблема. Да и вообще идея со сменой мне непонятна. На сайте меняется светлая тема на темную, но тема браузера не меняется при этом. А эта иконка закреплена на вкладке браузера. 0

@Eva Rosalene Модератор 5240 / 2114 / 416 Регистрация: 06.01.2013 Сообщений: 4,845
	30.10.2024, 09:14
	Сообщение от barabar и мне не раз приходилось чистить кэш браузера при смене иконки Вы href внутри link меняли, или иконка подменялась на серверной стороне без смены URL? В первом случае браузер должен подхватить сразу же, во втором - применяются все правила касательно обычного кэширования ресурсов. 0

@barabar Заблокирован
	30.10.2024, 09:56
	Сообщение от Eva Rosalene В первом случае браузер должен подхватить сразу же Соглашусь. Не подумал сразу об этом. 0

@barabar Заблокирован
	30.10.2024, 12:12
	Сообщение от Mailo hasClass(".dark") Точно не нужна перед классом. 1