Sirviendo favicon.ico en ASP.NET MVC

255

¿Cuál es la mejor / última recomendación sobre cómo servir favicon.ico en ASP.NET MVC?

Actualmente estoy haciendo lo siguiente:

  • Agregar una entrada al comienzo de mi método RegisterRoutes:

    routes.IgnoreRoute("favicon.ico");

  • Colocar favicon.ico en la raíz de mi aplicación (que también será la raíz de mi dominio).

Tengo dos preguntas:

  • ¿No hay forma de poner el favicon.ico en otro lugar que no sea la raíz de mi aplicación? Es bastante asqueroso estar allí al mismo nivel que Contenty Controllers.

  • ¿Es IgnoreRoute("favicon.ico")suficiente esta afirmación? ¿O debería hacer lo siguiente como se discutió en una publicación de blog de Phil Haack ? No estoy al tanto de haber visto alguna vez una solicitud para favicon.ico en cualquier directorio que no sea la raíz, lo que haría que esto sea innecesario (pero es bueno saber cómo hacerlo).

    routes.IgnoreRoute("{*favicon}", new {favicon=@"(.*/)?favicon.ico(/.*)?"});
asp.net asp.net-mvc razor favicon Simon_Weaver
fuente
44
Su expresión regular debería ser '\.' para el punto en favicon.ico, no solo '.'.
NathanAldenSr
1
Esto es lo que uso (toma en cuenta los consejos de @ NathanAldenSr, admite barras diagonales hacia adelante y hacia atrás, y también permite archivos favicon.png):routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });
BrainSlugs83
@ BrainSlugs83 - Su solución agregó la pieza que faltaba para mí, que eran las barras ... Aquí hay una versión .NET vNext (beta-5). routes.MapRoute("IgnoreFavicon", "{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });
Rentering.com
Corrección, vSiguiente Ignorar routes.MapRoute("Ingore", "{*favicon}", new { }, new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" }); aviso de ruta thew new {},
Rentering.com

Respuestas:

204

Colocar favicon.ico en la raíz de su dominio solo afecta realmente a IE5, IIRC. Para navegadores más modernos, debería poder incluir una etiqueta de enlace para apuntar a otro directorio:

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

También puede usar archivos que no sean ico para navegadores que no sean IE, para lo cual quizás use la siguiente declaración condicional para servir un PNG a FF, etc., y un ICO a 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
fuente
25
Debe usar @ Url.Content para generar el enlace para que funcione en todos los entornos. Ver la respuesta de
AlexC
55
Es cierto, para ASP.NET. Mi respuesta ilustra la versión "genérica" ​​(HTML simple), por lo que cualquiera podría modificarla para adaptarla a su elección de marco / idioma :)
Chris
Es importante tener en cuenta que IE10 no admite comentarios condicionales, por lo que esto no funcionará para los usuarios con ese navegador. Una solución sería agregar su favicon al directorio raíz de su sitio, que IE10 recogerá automáticamente si no encuentra un enlace para un favicon en ninguna parte.
Kevin Babcock
2
IE11 Comprenda el favicon PNG y no necesita una declaración condicional. Deberías ver este buen artículo: jonathantneal.com/blog/understand-the-favicon
QMaster
¡Gracias, amigo! La parte inferior realmente me ayuda a trabajar con png, solo necesita estar en la parte superior de la página, la página maestra o el diseño.
Alper,
226

Estoy de acuerdo con la respuesta de Chris, pero al ver que esta es una pregunta específica de ASP.NET MVC, sería mejor usar la sintaxis Razor:

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

O tradicionalmente

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

más bien que 

<link rel="icon" href="http://www.mydomain.com/content/favicon.ico"/>
AlexC
fuente
3
Cierto. Mi respuesta fue ilustrar la versión "genérica" ​​(HTML), por lo que cualquiera podría modificar para adaptarse a su elección de marco / idioma :)
Chris
2
@Diego - Sí, rel = "SHORTCUT ICON" es una implementación no estándar utilizada por Internet Explorer. El espacio es un carácter separador en los estándares W3C (ver developer.mozilla.org/en-US/docs/Web/HTML/Element/link ). En los navegadores que no sean Internet Explorer, la sintaxis correcta es <link rel = "icon" href = "path / to / favicon.ico"> - consulte jonathantneal.com/blog/understand-the-favicon para obtener más información. Obviamente, puede usar la sintaxis de Razor o Web Forms para la ruta al icono como se muestra arriba.
pwdst
3
Con MVC 4 no necesitará el contenido de la URL en este caso, ya que se manejará automáticamente, solo puede usarlo; <link rel = "icon" href = "~ / content / favicon.ico" />
Stuart Hallows
20

1) Puedes poner tu favicon donde quieras y agregar esta etiqueta al encabezado de tu página

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

aunque algunos navegadores intentarán obtener el favicon de /favicon.ico de forma predeterminada, por lo que debe usar IgnoreRoute.

2) Si un navegador solicita el favicon en otro directorio, obtendrá un error 404 que está bien y si tiene la etiqueta de enlace en la respuesta 1 en su página maestra, el navegador obtendrá el favicon que desea.

Eduardo Campañó
fuente
2
los navegadores buscarán el archivo .ico si marca el sitio, por lo que esto no ayuda. pero me pregunto si el navegador recuerda eso. Solo sé que en Fiddler a veces veo una gran cantidad de iconos que se recuperan. ¿Quizás esa es la barra de herramientas de Google?
Simon_Weaver
Creo que tienes razón, los íconos para marcadores solo funcionan a veces, nunca he descubierto por qué, tal vez este sea el caso
Eduardo Campañó
7

Creo que favicon.ico debería estar en la carpeta raíz. Simplemente pertenece allí.

Si desea servir diferentes iconos, póngalo en control. Usted puede hacer eso. Si no, simplemente déjelo en la carpeta raíz.

dmajkic
fuente
1
Estoy de acuerdo. Está en la carpeta raíz y no debería estar en ningún otro lugar ... No hay necesidad de una etiqueta HTML para el favicon si está en la carpeta raíz. Funciona con todos los navegadores comunes ...
Vinz
Al principio, esto me pareció un toro absoluto, pero aparentemente no hay forma de evitarlo, nuestro registro sigue mostrando errores 404 de diferentes agentes de usuario.
Michiel Cornille
3

Nada de lo anterior funcionó para mí. Finalmente resolví este problema cambiando el nombre de favicon.ico a myicon.ico, y lo mencioné en la cabeza<link rel="icon" href="~/myicon.ico" type="image/x-icon" />

Tracy Zhou
fuente
2

También debería ser posible crear un controlador que devuelva el archivo ico y registrar la ruta /favicon.ico para que apunte a ese controlador.

Carles Company
fuente
2

Todo lo que necesita hacer es agregar app.UseStaticFiles();su startup.cs -> public void Configure(IApplicationBuilder app, IHostingEnvironment env).

ASP.net core proporciona una excelente manera de obtener archivos estáticos. Eso está usando la carpeta wwwroot. Lea los archivos estáticos en ASP.NET Core .

Usar el <Link />no es una muy buena idea. ¿Por qué alguien agregaría la etiqueta de enlace en cada HTML o cshtml para favicon.ico?

Barota Ripal
fuente
0

Use esto en lugar de solo el favicon.ico que tiende a buscar el archivo de icono fav 

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

Use la ruta solicitada y combínela con el archivo de icono de favoritos para obtener la dirección precisa que busca

El uso de esto resolvió el error Fav.icon que se genera siempre en Application_Error

Tribhuvan Patel
fuente
0

Encontró que en .Net Core, colocar el favicon.ico en / lib en lugar de wwwroot soluciona el problema

Dimitris Kouris
fuente