Serving favicon.ico in ASP.NET MVC

255

Was ist die endgültige / beste Empfehlung für die Bereitstellung von favicon.ico in ASP.NET MVC?

Ich mache gerade Folgendes:

  • Hinzufügen eines Eintrags ganz am Anfang meiner RegisterRoutes-Methode:

    routes.IgnoreRoute("favicon.ico");

  • Platzieren von favicon.ico im Stammverzeichnis meiner Anwendung (das auch das Stammverzeichnis meiner Domain sein wird).

Ich habe zwei Fragen:

  • Gibt es keine Möglichkeit, die Datei favicon.ico an einer anderen Stelle als im Stammverzeichnis meiner Anwendung zu platzieren? Es ist ziemlich schwierig, genau dort zu sein, wo Contentund Controllers.

  • Ist diese IgnoreRoute("favicon.ico")Aussage ausreichend - oder soll ich tun , auch die folgende , wie in besprochen einer Blog - Post von Phil Haack . Mir ist nicht bekannt, dass ich jemals eine Anfrage an favicon.ico in einem anderen Verzeichnis als dem Stammverzeichnis gesehen habe - was dies unnötig machen würde (aber es ist gut zu wissen, wie es geht).

    routes.IgnoreRoute("{*favicon}", new {favicon=@"(.*/)?favicon.ico(/.*)?"});
asp.net asp.net-mvc razor favicon Simon_Weaver
quelle
4
Ihr regulärer Ausdruck sollte '\' sein. für den Punkt in favicon.ico, nicht nur '.'.
NathanAldenSr
1
Dies ist, was ich benutze (es berücksichtigt die Ratschläge von @ NathanAldenSr, unterstützt sowohl Schrägstriche vorwärts als auch rückwärts und erlaubt auch favicon.png-Dateien):routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });
BrainSlugs83
@ BrainSlugs83 - Ihre Lösung hat das fehlende Teil für mich hinzugefügt, nämlich die Schrägstriche ... Hier ist eine .NET vNext-Version (Beta-5). routes.MapRoute("IgnoreFavicon", "{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });
Rentering.com
Korrektur, vNext Route ignorieren routes.MapRoute("Ingore", "{*favicon}", new { }, new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" }); Beachten Sie thew new {},
Rentering.com

Antworten:

204

Das Platzieren von favicon.ico im Stammverzeichnis Ihrer Domain wirkt sich nur wirklich auf IE5, IIRC aus. Für modernere Browser sollten Sie ein Link-Tag einfügen können, um auf ein anderes Verzeichnis zu verweisen:

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

Sie können auch Nicht-ICO-Dateien für andere Browser als IE verwenden, für die ich möglicherweise die folgende bedingte Anweisung verwenden würde, um ein PNG an FF usw. und ein ICO an IE zu senden:

<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
quelle
25
Sie müssen @ Url.Content verwenden, um den Link zu generieren, damit er in allen Umgebungen funktioniert. Siehe AlexCs Antwort
RickAndMSFT
5
Richtig, für ASP.NET. Meine Antwort zeigt die "generische" Version (einfaches HTML), so dass jeder sie an seine Wahl des Frameworks / der Sprache anpassen kann :)
Chris
Es ist wichtig zu beachten, dass IE10 keine bedingten Kommentare unterstützt, sodass dies für Benutzer mit diesem Browser nicht funktioniert. Eine Lösung wäre, Ihr Favicon zum Stammverzeichnis Ihrer Site hinzuzufügen, das IE10 automatisch aufnimmt, wenn es nirgendwo einen Link für ein Favicon findet.
Kevin Babcock
2
IE11 PNG-Favicon verstehen und keine bedingte Anweisung benötigen. Sie sollten diesen guten Artikel sehen: jonathantneal.com/blog/understand-the-favicon
QMaster
Danke Kumpel! Der untere Teil hilft mir wirklich bei der Arbeit mit PNG. Er muss sich nur oben auf der Seite, der Masterseite oder dem Layout befinden.
Alper
226

Ich stimme der Antwort von Chris zu, aber da dies eine spezifische ASP.NET MVC-Frage ist, ist es besser, eine der beiden Razor-Syntax zu verwenden:

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

Oder traditionell

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

eher, als 

<link rel="icon" href="http://www.mydomain.com/content/favicon.ico"/>
AlexC
quelle
3
Wahr. Meine Antwort war die Illustration der "generischen" Version (HTML), so dass jeder sie an seine Wahl des Frameworks / der Sprache anpassen kann :)
Chris
2
@Diego - Ja, rel = "SHORTCUT ICON" ist eine nicht standardmäßige Implementierung, die von Internet Explorer verwendet wird. Das Leerzeichen ist ein Trennzeichen in W3C-Standards (siehe developer.mozilla.org/en-US/docs/Web/HTML/Element/link ). In anderen Browsern als Internet Explorer lautet die korrekte Syntax <link rel = "icon" href = "path / to / favicon.ico">. Weitere Informationen finden Sie unter jonathantneal.com/blog/understand-the-favicon . Natürlich können Sie die Razor- oder Web Forms-Syntax für den Pfad zum Symbol wie oben verwenden.
pwdst
3
Mit MVC 4 benötigen Sie in diesem Fall den URL-Inhalt nicht, da dies automatisch erledigt wird. Sie können ihn einfach verwenden. <link rel = "icon" href = "~ / content / favicon.ico" />
Stuart Hallows
20

1) Sie können Ihr Favicon an der gewünschten Stelle platzieren und dieses Tag Ihrem Seitenkopf hinzufügen

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

Obwohl einige Browser standardmäßig versuchen, das Favicon von /favicon.ico abzurufen, sollten Sie IgnoreRoute verwenden.

2) Wenn ein Browser eine Anfrage für das Favicon in einem anderen Verzeichnis stellt, wird ein 404-Fehler angezeigt, der in Ordnung ist. Wenn Sie das Link-Tag in Antwort 1 auf Ihrer Masterseite haben, erhält der Browser das gewünschte Favicon.

Eduardo Campañó
quelle
2
Browser suchen nach der .ico-Datei, wenn Sie die Site mit einem Lesezeichen versehen. Dies hilft also nicht weiter. aber ich frage mich, ob sich der Browser daran erinnert. Ich weiß nur, dass ich in Fiddler manchmal eine ganze Reihe von Symbolen sehe, die abgerufen werden. Vielleicht ist das aber Google Toolbar?
Simon_Weaver
Ich denke, Sie haben Recht, Symbole für Lesezeichen funktionieren nur manchmal. Ich habe nie herausgefunden, warum, vielleicht ist dies der Fall
Eduardo Campañó
7

Ich denke, dass favicon.ico im Stammordner sein sollte. Es gehört einfach da hin.

Wenn Sie verschiedene Symbole bedienen möchten, legen Sie sie in der Steuerung ab. Du kannst das tun. Wenn nicht, lassen Sie es einfach im Stammordner.

dmajkic
quelle
1
Genau. Es befindet sich im Stammordner und sollte sich nirgendwo anders befinden ... Es ist kein HTML-Tag für das Favicon erforderlich, wenn es sich im Stammordner befindet. Funktioniert mit allen gängigen Browsern ...
Vinz
Anfangs schien mir das ein absoluter Stier zu sein, aber anscheinend führt kein Weg daran vorbei. Unsere Protokollierung zeigt immer wieder 404 Fehler von verschiedenen Benutzeragenten an.
Michiel Cornille
3

Keines der oben genannten hat bei mir funktioniert. Ich habe dieses Problem endlich gelöst, indem ich favicon.ico in myicon.ico umbenannt und im Kopf darauf verwiesen habe<link rel="icon" href="~/myicon.ico" type="image/x-icon" />

Tracy Zhou
quelle
2

Es sollte auch möglich sein, einen Controller zu erstellen, der die ico-Datei zurückgibt, und die Route /favicon.ico zu registrieren, um auf diesen Controller zu verweisen.

Carles Company
quelle
2

Alles was Sie tun müssen, ist app.UseStaticFiles();in Ihrem Startup.cs -> hinzuzufügen public void Configure(IApplicationBuilder app, IHostingEnvironment env).

Der ASP.net-Kern bietet eine hervorragende Möglichkeit, statische Dateien abzurufen. Das ist der wwwroot Ordner. Bitte lesen Sie statische Dateien in ASP.NET Core .

Die Verwendung von <Link />ist keine sehr gute Idee. Warum sollte jemand das Link-Tag in jedem HTML- oder HTML-Code für die Datei favicon.ico hinzufügen?

Ripal Barot
quelle
0

Verwenden Sie dies anstelle von favicon.ico, das dazu neigt, nach der fav-Symboldatei zu suchen 

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

Verwenden Sie den angeforderten Pfad und kombinieren Sie ihn mit der bevorzugten Symboldatei, damit die genaue Adresse angezeigt wird, nach der gesucht wird

Damit wurde der Fav.icon-Fehler behoben, der immer bei Application_Error ausgelöst wird

Tribhuvan Patel
quelle
0

Es wurde festgestellt, dass in .Net Core das Problem durch Platzieren von favicon.ico in / lib anstelle von wwwroot behoben wird

Dimitris Kouris
quelle