2015-10-12 66 views
25

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

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

Qui ci sono le righe di codice che ho incluso nella testa 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" /> 

Chiunque ha avuto lo stesso problema e risolto?

+0

Hai controllato il codice HTML effettivo con "Visualizza sorgente" su Edge? Sebbene dichiarare 'favicon.ico' due volte possa sembrare" più sicuro ", forse questa è la causa del problema. –

+0

L'ho controllato ma non ho visto niente di strano. E ho provato a utilizzare solo l'icona di collegamento, non ha funzionato neanche. –

+0

Qual è lo aspect ratio della tua icona? – Mibit

risposta

1

Per prima cosa, prova il solito metodo di fissaggio: cancella cache, cronologia e cookie.

Se questo non funziona, provare:

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

Assicurarsi favicon.ico è nella stessa cartella come file html.

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

0

Forse è un'eco incapsulamento problema. 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

Grazie per la tua partecipazione. Ho provato tutto quello che hai scritto, ma non ha risolto il mio problema. Ho bisogno di una fonte più credibile, una risposta più completa. – ahPo

41

Per me il problema era che su localhost non ha mai funzionato a bordo. Non importa cosa ho fatto. Andava sempre bene in Chrome e Firefox. La soluzione era che funzionava solo su Edge dopo che mi ero schierato sul webserver.

-1

Provare a creare un 512x512 in formato PNG. Ha funzionato per me

3

È necessario modificare il nome del file favicon.ico. Come "myFavicon.ico".

Si dovrebbe 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 aggiornare la cache prima del test? In caso contrario, reimposta la cache o non vedrai le tue modifiche.

Infine, potrebbe anche essere la tua icona. Prova a utilizzare favicon generator.

+2

Cambiare il nome del file favicon ha funzionato per me. Strano. – TranslucentCloud

3

per me ho aggiunto id = "favicon"

tutta la linea si presenta come

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

+0

Ho paura che anche questo non funzioni. Sembrava dopo aver caricato (e memorizzato nella cache) l'icona da una fonte esterna, quindi modificato il tag link per includere l'ID. Quando ho provato la stessa correzione su un altro sistema su cui girava Edge, semplicemente non funzionava. –

6

ho avuto lo stesso problema con Edge. Ho provato un sacco di soluzioni alternative, ma il trasferimento dell'icona dal server locale a www ha avuto esito positivo. Se il server è locale (su localhost), provare a spostare il file dell'icona su un server globale.

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

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

1. intestazioni incompleti restituite dai server

Sembra che per Edge il web server deve restituire intestazione Cache-Control per la favicon.

E.g. 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 localhost a causa di alcune impostazioni di protezione di Windows

Per impostazione predefinita, Apps Store di Windows non può usare l'interfaccia di loopback. Questo sembra influenzare il caricamento di favicon, che viene caricato usando un altro mezzo solo per la pagina Web (quindi, anche se la pagina web funziona, favicon non funziona). Per abilitare loopback per Edge, eseguire questo in PowerShell come amministratore: non è necessario

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

riavvio Edge - dopo il refresh della pagina (F5), la favicon deve essere caricato.

Per disabilitare loopback ancora:

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

Ma la favicon verrà memorizzata nella cache a bordo, quindi sarà ancora visibile.

Altre informazioni

Se si utilizza HTTPS, sembra che il certificato deve essere valido (di fiducia) per la favicon da mostrare.

0

Aggiunta Cache-Control: public, max-age = 14400 per l'intestazione http ha funzionato per me. Controllato con IE, Edge e Chrome su Windows 10 utilizzando ESP8266-12E che esegue Arduino come server Web su una rete locale. (Non ho ancora provato alcun supporto specifico per Apple o Android).FWIW - Ecco parte del codice 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 un frammento di codice ESP8266/Arduino per creare l'intestazione http nella risposta e l'invio dei dati icona precedentemente memorizzati come file utilizzando 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(); 
... 
0

soluzione EDGE

Se non si dispone già di una favicon, è possibile generare li here o here.

ho caricato il mio 32x32 png a imgur.com Funziona durante i test locale solo se l'immagine favicon/png è ospitato ! Esternamente!, come imgur.com.

Nel head della pagina ho impostato la favicon in questo modo:

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

Non c'è convenzione di denominazione, è possibile denominare la favicon quello che vuoi xyz.png ma credo che deve essere 32x32!

devo anche impostare una voce di host che punta al mio web app in IIS come:

127.0.0.1 www.your-app.com 

Passi:chiudere il browser, attendere 30 secondi e riaprirlo. Inserisci il tuo url o www.your-app.com o localhost/yourApp o localhost:xxxx/yourApp. Prova entrambi!

Assicurarsi di svuotare la cache. Premi F5. Probabilmente hai bisogno di ripetere questa procedura, due o tre volte.

Ci vorrà un po 'di tempo per Edge per afferrarlo.

Questo funziona in IIS. Dopo di che l'ho testato con IIS Express e funziona anche lì. Non importa. Ciò che conta è, , è necessario ospitare la favicon esternamente.

enter image description here Ad esempio, IE11 non mostra affatto le favicon, non importa quale sito visito. Quindi, dimentica di IE11 ;-)