it-swarm.dev

Favicon NON funziona su Edge

Ho un problema con questa favicon che ho generato per un progetto php server locale. Funziona bene sulla maggior parte dei browser (Google Chrome, Mozilla Firefox e Opera) ma su Microsoft Edge non funziona (mostra la favicon della scheda predefinita).

Ho provato molte soluzioni a questo problema come svuotare la cache, usando il formato immagine (.png) invece dell'icona (.ico), ma nulla sembrava funzionare.

Ecco le righe di codice che ho incluso nell'intestazione 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" />

Qualcuno ha avuto lo stesso problema e risolto?

42
Ragheb AlKilany

Per me il problema era che su localhost non funzionava mai in Edge. Non importa cosa ho fatto. Andava sempre bene in Chrome e Firefox. La soluzione era che funzionava in Edge solo dopo averlo distribuito sul server web.

54
Yster

Esistono 2 problemi in Edge. Entrambi vengono evitati durante la distribuzione su un server Web (ecco perché ha iniziato a funzionare con altre risposte dopo la distribuzione su un server Web). Tuttavia, puoi farlo funzionare anche su localhost.

1. Intestazioni incomplete restituite dal server

Sembra che per Edge il web server debba restituire l'intestazione Cache-Control per la favicon.

Per esempio. questo valore funziona:

Cache-Control: public, max-age=2592000

I server Web comuni probabilmente inviano automaticamente quell'intestazione. Tuttavia, se si dispone di una soluzione personalizzata, è necessario implementarla manualmente. Per esempio. in WCF:

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

2. Edge non può accedere a localhost a causa di alcune impostazioni di sicurezza di Windows

Per impostazione predefinita, le app di Windows Store non possono utilizzare l'interfaccia di loopback. Ciò sembra influire sul caricamento di favicon, che viene caricato utilizzando un altro significa che la sola pagina Web (quindi, anche se la pagina Web funziona, favicon non funziona).

Per abilitare il loopback per Edge, eseguirlo in PowerShell come amministratore:

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

Non è necessario riavviare Edge: dopo l'aggiornamento della pagina (F5), è necessario caricare la favicon.

Per disabilitare nuovamente il loopback:

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

La favicon verrà memorizzata nella cache in Edge, quindi sarà ancora visibile.

Altre informazioni

Se si utilizza HTTPS, sembra che il certificato debba essere valido (attendibile) per mostrare la favicon.

13
Milan Laslop

Ho avuto lo stesso problema con Edge. Ho provato molte soluzioni alternative, ma solo spostare l'icona dal server locale a quello www ha avuto successo. Se il tuo server è locale (su localhost), prova a spostare il file icona su un server globale.

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

per me ho aggiunto id = "favicon"

l'intera linea sembra

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

Dovresti cambiare il nome del tuo file favicon.ico. Come "myFavicon.ico".

Dovresti anche aggiungere ? alla fine del tuo link, in questo modo:

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

Inoltre, hai aggiornato la cache prima del test? In caso contrario, reimposta la cache o non vedrai le modifiche.

Infine, potrebbe anche essere la tua icona. Prova a usare un generatore favicon .

3
David G

È possibile che la tua favicon sia troppo grande. Secondo la risposta nel thread in questo link, una favicon dovrebbe essere 16 x 16 px: https://forum.yola.com/yola/topics/Edge-not-displaying-favicon

Nel mio sito web (loekbergman.nl) funziona e ho un'icona 16x16px.

2
Loek Bergman

Innanzitutto, prova il solito metodo di fissaggio: svuota cache, cronologia e cookie.

Se non funziona, prova:

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

Assicurati che favicon.ico sia nella stessa cartella del tuo file html.

Se continua a non funzionare, potrebbe essere un problema con MS Edge. Controlla il sito Web seguente: https://www.wix.com/support/html5/ugc/b4b4a8f2-217d-4e25-aa55-00c19f5d5fc4/1a8ee7cd-3092-42e8-9078-dc528f8bfc87

1
Yubin Lee

Aggiungendo Cache-Control: public, max-age = 144 all'intestazione http ha funzionato per me. Controllato con IE, Edge e Chrome su Windows 10 utilizzando un ESP8266-12E che esegue Arduino come server Web su una rete locale. (Non ho provato nessuno Apple o supporto specifico per Android ancora.) FWIW - Ecco parte dell'html dalla pagina principale del mio server:

<!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>

ed ecco uno snippet di codice ESP8266/Arduino per creare l'intestazione http nella risposta e inviare i dati dell'icona precedentemente memorizzati come file usando 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();
...
1
Tom S

Ho avuto lo stesso problema e come ho risolto come di seguito.

  • Il nome dell'icona deve essere favicon. Ho usato .ico. (Il nome diverso non funzionava per me)
  • Favicon deve trovarsi nella cartella principale in cui si trova HTML. (Sotto è la mia struttura di cartelle)

    -- src
       -- app
          -- images
          -- css
          -- favicon.ico
          -- index.html
    
  • include icona in HTML

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

Ho testato e risolto il mio problema nei browser seguenti

  • Chrome (Versione 76.0.3809.100)
  • Firefox (versione 68.0.1)
  • Safari (versione 11.1)
  • Internet Explorer (versione 11 e 10)
  • Edge (Versione 42.17134.1.0)
0
Hardik Shah

Forse è un problema di eco incapsulamento. Voglio dire che href avrebbe "request-> baseUrl;" come valore

provare

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

Segui questi passi

  1. Il nome dell'immagine dovrebbe essere favicon.ico e il formato dovrebbe essere ico
  2. Metti l'ico nella cartella "wwwroot"
  3. dovrebbe essere il riferimento ico in index.html

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

  4. Edge non mostra favicon durante l'esecuzione da locale. Distribuisci nel server web e prova

Questo ha funzionato per me

0