web-dev-qa-db-ja.com

ファビコンがEdgeで機能しない

ローカルサーバーphpプロジェクト用に生成したこのファビコンに問題があります。ほとんどのブラウザ（Google Chrome、Mozilla Firefox、Opera）では正常に動作しますが、Microsoft Edgeでは動作しません（デフォルトのタブファビコンを表示します）。

アイコン（.ico）の代わりに画像形式（.png）を使用して、キャッシュをクリアするなど、この問題に対する多くの解決策を試しましたが、何も機能していないようです。

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" />

誰もが同じ問題を抱えて解決しましたか？

htmliconsmicrosoft-edgefavicon
42
Ragheb AlKilany

私にとって問題は、ローカルホストではEdgeで機能しなかったことです。何をしても。 ChromeおよびFirefoxでは常に問題ありませんでした。解決策は、Webサーバーに展開した後のみEdgeで機能することでした。

54
Yster

Edgeには2つの問題があります。 Webサーバーにデプロイする場合、両方とも回避されます（そのため、Webサーバーにデプロイした後、別の回答で機能し始めました）。ただし、ローカルホストでも動作させることができます。

1。サーバーから返された不完全なヘッダー

Edgeの場合、WebサーバーはfaviconのCache-Controlヘッダーを返す必要があります。

例えば。この値は機能します：

Cache-Control: public, max-age=2592000

一般的なWebサーバーは、おそらくそのヘッダーを自動的に送信します。ただし、カスタムソリューションがある場合は、手動で実装する必要があります。例えば。 WCFで：

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

2。Windowsのセキュリティ設定により、Edgeはlocalhostにアクセスできません

既定では、Windowsストアアプリはループバックインターフェイスを使用できません。これはファビコンのロードに影響するようです。ファビコンは別の手段を使用してロードされるため、Webページのみが使用されます（したがって、Webページが機能してもファビコンは機能しません）。

Edgeのループバックを有効にするには、管理者としてPowerShellでこれを実行します。

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

エッジの再起動は必要ありません-ページの更新（F5）後、ファビコンをロードする必要があります。

ループバックを再び無効にするには：

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

ファビコンはEdgeにキャッシュされるため、引き続き表示されます。

その他の情報

HTTPSを使用する場合、ファビコンを表示するには証明書が有効（信頼済み）である必要があります。

13
Milan Laslop

Edgeでも同じ問題がありました。多くの回避策を試してみましたが、ローカルサーバーからwwwサーバーへのアイコンの移動のみが成功しました。サーバーがローカル（localhost）の場合、アイコンファイルをグローバルサーバーに移動してみてください。

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

私はid = "favicon"を追加しました

行全体が次のようになります

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

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" />

また、テストする前にキャッシュを更新しましたか？そうでない場合は、キャッシュをリセットします。そうしないと、変更が表示されません。

最後に、あなたのアイコンでもあります。 favicon generator を使用してみてください。

3
David G

ファビコンが大きすぎる可能性があります。このリンクのスレッドの回答によると、ファビコンは16 x 16 pxである必要があります。 https://forum.yola.com/yola/topics/Edge-not-displaying-favicon

私のウェブサイト（loekbergman.nl）では動作しており、実際には16x16pxのアイコンがあります。

2
Loek Bergman

最初に、キャッシュ、履歴、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ファイルと同じsameフォルダーにあることを確認します。

それでも動作しない場合は、MS Edgeの問題である可能性があります。以下のWebサイトを確認してください： https://www.wix.com/support/html5/ugc/b4b4a8f2-217d-4e25-aa55-00c19f5d5fc4/1a8ee7cd-3092-42e8-9078-dc528f8bfc87

1
Yubin Lee

Cache-Control：public、max-age = 144をhttpヘッダーに追加するとうまくいきました。ローカルネットワーク上のWebサーバーとしてArduinoを実行しているESP8266-12Eを使用して、Windows 10上のIE、Edge、およびChromeで確認しました。 （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>

また、応答にhttpヘッダーを作成し、SPIFFSを使用してファイルとして以前に保存されたアイコンデータを送信するためのESP8266/Arduinoコードスニペットがあります。

...
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();
...
1
Tom S

私は同じ問題を抱えていましたが、以下のように解決しました。

  • アイコン名はfaviconでなければなりません。 .icoを使用しました。 （別の名前が機能していませんでした）

  • ファビコンは、HTMLが存在するルートフォルダーになければなりません。 （以下は私のフォルダ構造です）

    -- src
   -- app
      -- images
      -- css
      -- favicon.ico
      -- index.html

  • hTMLにアイコンを含める

    <link rel="icon" href="./favicon.ico" type="image/x-icon">

以下のブラウザで問題をテストして修正しました

  • Chrome（バージョン76.0.3809.100）
  • Firefox（バージョン68.0.1）
  • Safari（バージョン11.1）
  • Internet Explorer（バージョン11＆10）
  • Edge（バージョン42.17134.1.0）
0
Hardik Shah

多分それはエコーカプセル化の問題です。 hrefには「request-> baseUrl;」が含まれることになります。値として

試してみる

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

次の手順を実行します

  1. 画像名はfavicon.icoで、形式はicoである必要があります
  2. Icoを「wwwroot」フォルダーに配置します

  3. index.htmlのico参照は

    "<link rel =" icon "type =" image/x-icon "href ="/favicon.ico ">"

  4. Edgeは、ローカルから実行中にファビコンを表示しません。ウェブサーバーにデプロイして試してください

これは私のために働いた

0
Ganesh Arasapaharan