Можно указывать CSS только для устройств, поддерживающих :hover. Такой вариант подойдет?
@media not all and (hover: none)

Источник: StackOverflow

1. Зачем вы говнокодите, размещая два логотипа рядом для hover-эффекта, когда можно сделать так:

.intro__logo:hover {
  background: url("https://demo.robbien.ru/slider/img/logo-blue.png");
}

вместо этого (и лишнего логотипа в DOM):

.intro__logo:hover {
  display: none;
}
.intro__logo:hover ~ .intro__logo--blue {
  display: block;
}
.intro__logo--blue {
  width: 62px;
  height: 57px;
  background: url("https://demo.robbien.ru/slider/img/logo-blue.png");
  display: block;
  float: left;
  display: none;
}

2. Зачем для :hover лишняя картинка, когда можно сделать с прозрачностью?

.intro__logo:hover {
opacity: .9;
}

Выучите азы CSS — вы пишите много лишнего.

Что-то вроде такого?
https://jsfiddle.net/9tov22xs/