Serve favicon.ico in ASP.NET MVC

255

Qual è la migliore / migliore raccomandazione su come servire favicon.ico in ASP.NET MVC?

Attualmente sto facendo quanto segue:

Aggiunta di una voce all'inizio del mio metodo RegisterRoutes:
```
routes.IgnoreRoute("favicon.ico");
```
Posizionare favicon.ico nella radice della mia applicazione (che sarà anche la radice del mio dominio).

Ho due domande:

Non c'è modo di mettere favicon.ico in un posto diverso dalla radice della mia applicazione. È piuttosto icky essere proprio lì allo stesso livello di Contente Controllers.
Questa IgnoreRoute("favicon.ico")affermazione è sufficiente - o dovrei anche fare quanto segue come discusso in un post sul blog di Phil Haack . Non sono a conoscenza di aver mai visto una richiesta a favicon.ico in qualsiasi directory diversa dalla radice - il che renderebbe questo inutile (ma è bene sapere come farlo).
```
routes.IgnoreRoute("{*favicon}", new {favicon=@"(.*/)?favicon.ico(/.*)?"});
```

— Simon_Weaver
fonte

4

La tua espressione regolare dovrebbe essere '\.' per il punto in favicon.ico, non solo '.'.

— NathanAldenSr

1

Questo è quello che uso (prende in considerazione i consigli di @ NathanAldenSr, supporta sia le barre in avanti che quelle posteriori e consente anche i file favicon.png):routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });

— BrainSlugs83

@ BrainSlugs83 - La tua soluzione ha aggiunto per me il pezzo mancante che era le barre ... Ecco una versione di .NET vNext (beta-5). routes.MapRoute("IgnoreFavicon", "{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });

— Rentering.com,

Correzione, vSuccessivo Ignora route routes.MapRoute("Ingore", "{*favicon}", new { }, new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" }); Notate thew new {},

— Rentering.com

204

Posizionare favicon.ico nella radice del tuo dominio ha effetto solo su IE5, IIRC. Per i browser più moderni dovresti essere in grado di includere un tag di collegamento per puntare a un'altra directory:

<link rel="SHORTCUT ICON" href="http://www.mydomain.com/content/favicon.ico"/>

Puoi anche usare file non ico per browser diversi da IE, per i quali potrei forse usare la seguente dichiarazione condizionale per servire un PNG in FF, ecc. E un ICO in IE:

<link rel="icon" type="image/png" href="http://www.mydomain.com/content/favicon.png" />
<!--[if IE]>
<link rel="shortcut icon" href="http://www.mydomain.com/content/favicon.ico" type="image/vnd.microsoft.icon" />
<![endif]-->

— Chris
fonte

25

È necessario utilizzare @ Url.Content per generare il collegamento in modo che funzioni in tutti gli ambienti. Vedi la risposta di

— AlexC

5

Vero, per ASP.NET. La mia risposta illustra la versione "generica" (HTML semplice), quindi chiunque può modificare per adattarsi alla propria scelta di framework / linguaggio :)

— Chris

È importante notare che IE10 non supporta i commenti condizionali, quindi questo non funzionerà per gli utenti con quel browser. Una soluzione sarebbe quella di aggiungere la tua favicon alla directory principale del tuo sito, che IE10 raccoglierà automaticamente se non trova un collegamento per una favicon da nessuna parte.

— Kevin Babcock,

2

IE11 Comprendere la favicon PNG e non è necessario dichiarare le condizioni. Dovresti vedere questo buon articolo: jonathantneal.com/blog/understand-the-favicon

— QMaster

Grazie amico! La parte inferiore mi aiuta davvero a lavorare con png, deve solo essere nella parte superiore della pagina, della pagina principale o del layout.

— Alper

226

Concordo con la risposta di Chris, ma vedendo che questa è una domanda ASP.NET MVC specifica, sarebbe meglio usare la sintassi di Razor:

<link rel="icon" href="@Url.Content("~/content/favicon.ico")"/>

O tradizionalmente

<link rel="icon" href="<%= Url.Content("~/content/favicon.ico") %>"/>

piuttosto che

<link rel="icon" href="http://www.mydomain.com/content/favicon.ico"/>

— AlexC
fonte

3

Vero. La mia risposta è stata illustrare la versione "generica" (HTML), in modo che chiunque potesse modificare per adattarsi alla propria scelta di framework / linguaggio :)

— Chris

2

@Diego - Sì, rel = "SHORTCUT ICON" è un'implementazione non standard utilizzata da Internet Explorer. Lo spazio è un carattere separatore negli standard W3C (vedi developer.mozilla.org/en-US/docs/Web/HTML/Element/link ). Nei browser diversi da Internet Explorer la sintassi corretta è <link rel = "icon" href = "path / to / favicon.ico"> - vedi jonathantneal.com/blog/understand-the-favicon per ulteriori informazioni. Ovviamente puoi usare la sintassi Razor o Web Forms per il percorso dell'icona come sopra.

— 1313

3

Con MVC 4 non avrai bisogno di Url.Content in questo caso poiché verrà gestito automaticamente, puoi semplicemente usare; <link rel = "icon" href = "~ / content / favicon.ico" />

— Stuart Hallows

20

1) Puoi mettere la tua favicon dove vuoi e aggiungere questo tag alla testa della pagina

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

anche se alcuni browser proveranno a ottenere la favicon da /favicon.ico per impostazione predefinita, quindi dovresti usare IgnoreRoute.

2) Se un browser effettua una richiesta per la favicon in un'altra directory, verrà visualizzato un errore 404 che va bene e se nella pagina principale è presente il tag di collegamento nella risposta 1, il browser otterrà la favicon desiderata.

— Eduardo Campañó
fonte

2

i browser andranno a cercare il file .ico se aggiungi il sito ai segnalibri, quindi questo non aiuta. ma mi chiedo se il browser lo ricorda. so solo che in Fiddler a volte vedo un sacco di icone che vengono recuperate. forse questa è la barra degli strumenti di Google però?

— Simon_Weaver,

penso che tu abbia ragione, le icone per i segnalibri funzionano solo a volte, non ho mai capito perché, forse è così

— Eduardo Campañó,

7

Penso che favicon.ico dovrebbe essere nella cartella principale. Appartiene solo lì.

Se vuoi servire diverse icone, mettile in controler. Ce la puoi fare. In caso contrario, lascialo nella cartella principale.

— dmajkic
fonte

1

Sono d'accordo. Si trova nella cartella principale e non dovrebbe trovarsi altrove ... Non è necessario un tag HTML per la favicon se si trova nella cartella principale. Funziona con tutti i browser comuni ...

— Vinz,

All'inizio, questo mi sembrava un toro assoluto, ma apparentemente non c'è modo di aggirarlo, la nostra registrazione continua a mostrare 404 errori da diversi agenti utente.

— Michiel Cornille,

3

Nessuna delle precedenti ha funzionato per me. Alla fine ho risolto questo problema rinominando favicon.ico in myicon.ico e facendolo riferimento in testa<link rel="icon" href="~/myicon.ico" type="image/x-icon" />

— Tracy Zhou
fonte

2

Dovrebbe anche essere possibile creare un controller che restituisca il file ico e registrare il percorso /favicon.ico per puntare a quel controller.

— Azienda Carles
fonte

2

Tutto quello che devi fare è aggiungere il app.UseStaticFiles();tuo startup.cs -> public void Configure(IApplicationBuilder app, IHostingEnvironment env).

Il core ASP.net offre un modo eccellente per ottenere file statici. Quello sta usando la cartella wwwroot. Leggere i file statici in ASP.NET Core .

L'uso di <Link />non è una buona idea. Perché qualcuno dovrebbe aggiungere il tag di collegamento su ogni HTML o cshtml per favicon.ico?

— Barot Ripal
fonte

0

Usa questo invece del solo favicon.ico che tende a cercare il file icona fav

> <link rel="ICON" 
> href="@System.IO.Path.Combine(Request.PhysicalApplicationPath,
> "favicon.ico")" />

Utilizzare il percorso richiesto e combinare con il file icona fav in modo che ottenga l'indirizzo esatto che la sua ricerca

L'utilizzo di questo ha risolto l'errore Fav.icon che viene generato sempre su Application_Error

— Tribhuvan Patel
fonte

0

Abbiamo scoperto che in .Net Core, posizionando favicon.ico in / lib anziché wwwroot risolve il problema

— Dimitris Kouris
fonte