Favicon НЕ работает на Edge

У меня проблема с этим favicon, сгенерированным для локального сервера php-проекта. Он отлично работает в большинстве браузеров (Google Chrome, Mozilla Firefox и Opera), но на Microsoft Edge он не работает (он показывает вкладку настроек по умолчанию).

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

Вот строки кода, которые я включил в заголовок HTML:

<link rel="icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico" type="image/x-icon" />

У кого-то была такая же проблема и она была решена?

Ответ 1

Для меня проблема заключалась в том, что на localhost он никогда не работал в Edge. Независимо от того, что я сделал. Это всегда было прекрасно в Chrome и Firefox. Решением было то, что он работал только в Edge после того, как я развернулся на веб-сервере.

Ответ 2

В Edge есть 2 проблемы. Оба избегаются при развертывании на веб-сервере (вот почему он начал работать в других ответах после развертывания на веб-сервере). Тем не менее, вы можете заставить его работать и на localhost.

1. Неполные заголовки возвращены с сервера

Похоже, что для Edge веб-сервер должен вернуть заголовок Cache-Control для значка.

Например, это значение работает:

Cache-Control: public, max-age=2592000

Обычные веб-серверы, вероятно, отправляют этот заголовок автоматически. Однако, если у вас есть какое-то нестандартное решение, вы должны реализовать его вручную. Например, в WCF:

WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "public, max-age=2592000");

2. Edge не может получить доступ к localhost из-за некоторых настроек безопасности Windows

По умолчанию приложения магазина Windows не могут использовать петлевой интерфейс. Похоже, это влияет на загрузку favicon, которая загружается другим способом, что означает, что веб-страница одна (даже если веб-страница работает, favicon не работает).

Чтобы включить обратную петлю для Edge, запустите это в PowerShell от имени администратора:

CheckNetIsolation LoopbackExempt -a -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"

Перезапуск по краю не требуется - после обновления страницы (F5) значок должен быть загружен.

Чтобы снова отключить петлю:

CheckNetIsolation LoopbackExempt -d -n="Microsoft.MicrosoftEdge_8wekyb3d8bbwe"

Значок будет кэшироваться в Edge, поэтому он все еще будет виден.

Другая информация

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

Ответ 3

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

<link rel="shortcut icon" href="http://example.com/favicon.ico" type="image/x-icon" />

Ответ 4

для меня я добавил id = "favicon"

вся строка выглядит как

    <link  id="favicon" href="~/favicon.png" rel="shortcut icon" type="image/x-icon"  />

Ответ 5

Вам следует изменить имя файла favicon.ico. Как "myFavicon.ico".

Вы также должны добавить ? в конце своей ссылки, например:

<link rel="icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico?" type="image/x-icon" />
<link rel="shortcut icon" href="<?php echo Yii::$app->request->baseUrl; ?>/favicon.ico?" type="image/x-icon" />

Кроме того, вы обновили кеш перед тестированием? Если нет, reset кэш, или вы не увидите изменений.

Наконец, это может быть и ваш значок. Попробуйте использовать favicon generator.

Ответ 6

Возможно, ваш значок слишком велик. Согласно ответу в потоке в этой ссылке должен быть значок 16 x 16 px: https://forum.yola.com/yola/topics/edge-not-displaying-favicon

На моем веб-сайте (loekbergman.nl) он работает, и у меня есть значок 16x16px.

Ответ 7

Решение для EDGE

TL; DR;

Размещайте ваши изображения favicon внешне.

Если у вас еще нет значка сайта, вы можете создать его здесь или здесь.

Я загрузил свой 32x32 png на imgur.com. Он работает во время локального тестирования, только если изображение favicon/png размещено ! , как imgur.com.

В head части страницы я установил значок следующим образом:

 <link href="https://i.imgur.com/xxxx32x32.png" rel="shortcut icon" type="image/x-icon">

Соглашения об именах не существует, вы можете назвать favicon как угодно xyz.png но я думаю, это должно быть 32x32!

Я также настроил запись hosts указывающую на мое веб-приложение в IIS, например:

127.0.0.1   www.your-app.com

Шаги: Закройте браузер, подождите 30 секунд и снова откройте его.

Введите свой URL-адрес, например: www.your-app.com или localhost/yourApp или localhost:xxxx/yourApp.

Попробуйте оба!

Убедитесь, что вы очистили кеш. Хит F5. Вероятно, вам нужно повторить эти шаги, два-три раза.

Эджу понадобится некоторое время, чтобы понять это.

Это работает в IIS. После этого я проверил его с IIS Express, и он тоже работает там. Это не важно Важно то, что вы должны разместить иконку внешне.

Например, IE11 вообще не показывает иконки, независимо от того, какой сайт я посещаю. Так что забудьте про IE11 ;-)

Ответ 8

Сначала попробуйте обычный способ фиксации: очистить кеш, историю и файлы cookie.

Если это не работает, попробуйте:

<html>    
<head>
<title> Your Title</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
<body> Your content </body>
</html>

Убедитесь, что favicon.ico находится в папке той же, что и ваш html файл.

Если он все еще не работает, это может быть проблемой с MS Edge. Проверьте сайт ниже: https://www.wix.com/support/html5/ugc/b4b4a8f2-217d-4e25-aa55-00c19f5d5fc4/1a8ee7cd-3092-42e8-9078-dc528f8bfc87

Ответ 9

Добавление Cache-Control: public, max-age = 14400 в заголовок http сработало для меня. Проверил это с IE, Edge и Chrome в Windows 10, используя ESP8266-12E с Arduino в качестве веб-сервера в локальной сети. (Еще не пробовал поддержку Apple или Android). FWIW - вот часть HTML-кода с корневой страницы моего сервера:

<!DOCTYPE html>
<html>
<head>
<title>Favicon Test</title>
<link rel="shortcut icon" href="/faviconS.ico" type="image/x-icon">
<link id="favicon" rel="icon" href="/favicon.ico" type="image/x-icon">
<link id="favicon-16x16" rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link id="favicon-32x32" rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link id="favicon-96x96" rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
</head>
<body>
...
</body>
</html>

и здесь фрагмент кода ESP8266/Arduino для создания заголовка http в ответе и отправки данных значка, ранее сохраненных в виде файла, с использованием SPIFFS.

...
f = SPIFFS.open("/favicon.ico", "r");
if (!f) {
  Serial.println("file open failed");
} else {
  Serial.println("favicon.ico open succeeded...");
  client.println("HTTP/1.1 200 OK");
  client.print("Content-Length:");
  client.println(String(f.size()));
  client.println("Content-Type:image/x-icon");
  client.println("Cache-Control: public, max-age=14400");
  client.println();  // blank line indicates end of header
  while (f.available()) {  // send the binary for the icon
    byte b = f.read();
    client.write(b);
  }
f.close();
...

Ответ 10

Возможно, это проблема эха инкапсуляции. Я имею в виду, что href будет иметь "request- > baseUrl;" как значение

попробуйте

  <?php
      echo '<link rel="icon" href="'.Yii::$app->request->baseUrl.'/favicon.ico" type="image/x-icon" />';
  ?>

Ответ 11

Следуй этим шагам

Имя изображения должно быть favicon.ico, а формат должен быть ico
Поместите ico в папку "wwwroot"
Ссылка ico в index.html должна быть

"<link rel=" icon "type =" image/x-icon "href="/favicon.ico ">"
Edge не показывает favicon при запуске из локального. Разверните в веб-сервере и попробуйте

Это сработало для меня

Ответ 12

Попробуйте создать 512x512 в формате PNG. Работал для меня.