Servindo favicon.ico no ASP.NET MVC

255

Qual é a recomendação final / melhor para servir o favicon.ico no ASP.NET MVC?

Atualmente, estou fazendo o seguinte:

Adicionando uma entrada ao início do meu método RegisterRoutes:
```
routes.IgnoreRoute("favicon.ico");
```
Colocar o favicon.ico na raiz do meu aplicativo (que também será a raiz do meu domínio).

Eu tenho duas perguntas:

Não há como colocar o favicon.ico em outro lugar que não seja a raiz do meu aplicativo. É muito nojento estar ali no mesmo nível que Contente Controllers.
Esta IgnoreRoute("favicon.ico")afirmação é suficiente - ou devo também fazer o seguinte, conforme discutido em um post de Phil Haack . Não estou ciente de ter visto uma solicitação para o favicon.ico em qualquer diretório que não seja o root - o que tornaria isso desnecessário (mas é bom saber como fazê-lo).
```
routes.IgnoreRoute("{*favicon}", new {favicon=@"(.*/)?favicon.ico(/.*)?"});
```

— Simon_Weaver
fonte

4

Sua expressão regular deve ser '\.' para o ponto no favicon.ico, não apenas '.'.

— NathanAldenSr

1

Isto é o que eu uso (leva @ conselho de NathanAldenSr em conta, suporta os golpes frente e para trás, e também permite a favicon.png arquivos):routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });

— BrainSlugs83

@ BrainSlugs83 - Sua solução adicionou a peça que faltava para mim, que era as barras ... Aqui está uma versão do .NET vNext (beta-5). routes.MapRoute("IgnoreFavicon", "{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });

— Rentering.com

Correção, vNext Ignorar routes.MapRoute("Ingore", "{*favicon}", new { }, new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" }); aviso de rota new {}

— thew

204

A colocação de favicon.ico na raiz do seu domínio afeta realmente apenas o IE5, IIRC. Para navegadores mais modernos, você deve poder incluir uma tag de link para apontar para outro diretório:

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

Você também pode usar arquivos não ico para navegadores que não sejam o IE, para os quais eu talvez usaria a seguinte declaração condicional para servir um PNG para FF, etc, e um ICO para o 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

Você precisa usar @ Url.Content para gerar o link para que ele funcione em todos os ambientes. Veja a resposta de

— AlexC

5

Verdadeiro, para ASP.NET. Minha resposta ilustra a versão "genérica" (HTML simples), assim qualquer um poderia modificar de acordo com sua escolha de enquadramento / idioma :)

— Chris

É importante observar que o IE10 não suporta comentários condicionais; portanto, isso não funcionará para usuários com esse navegador. Uma solução seria adicionar seu favicon ao diretório raiz do site, que o IE10 selecionará automaticamente se não encontrar um link para um favicon em qualquer lugar.

— Kevin Babcock

2

IE11 Entenda o favicon PNG e não precisa de uma declaração condicional. Você deve ver este bom artigo: jonathantneal.com/blog/understand-the-favicon

— QMaster

Valeu, cara! A parte inferior realmente me ajuda a trabalhar com png, ele só precisa estar no topo da página, na página principal ou no layout.

— Alper

226

Concordo com a resposta de Chris, mas, como essa é uma pergunta específica do ASP.NET MVC, seria melhor usar a sintaxe do Razor:

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

Ou tradicionalmente

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

ao invés de

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

— AlexC
fonte

3

Verdade. Minha resposta foi ilustrando a versão "genérica" (HTML), assim qualquer um poderia modificar de acordo com sua escolha de enquadramento / idioma :)

— Chris

2

@ Diego - Sim, rel = "ÍCONE DE ATALHO" é uma implementação não padrão usada pelo Internet Explorer. O espaço é um caractere separador nos padrões W3C (consulte developer.mozilla.org/en-US/docs/Web/HTML/Element/link ). Em navegadores que não sejam o Internet Explorer, a sintaxe correta é <link rel = "icon" href = "caminho / para / favicon.ico"> - consulte jonathantneal.com/blog/understand-the-favicon para obter mais informações. Obviamente, você pode usar a sintaxe Razor ou Web Forms para o caminho para o ícone, como acima.

— pwdst

3

Com o MVC 4, você não precisará do Url.Content nesse caso, pois ele será tratado automaticamente, basta usar; <link rel = "icon" href = "~ / content / favicon.ico" />

— Stuart Hallows

20

1) Você pode colocar seu favicon onde quiser e adicionar essa tag ao cabeçalho da página

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

embora alguns navegadores tentem obter o favicon de /favicon.ico por padrão, você deve usar o IgnoreRoute.

2) Se um navegador solicitar o favicon em outro diretório, ele receberá um erro 404, o que é bom e se você tiver a tag do link na resposta 1 da sua página principal, o navegador obterá o favicon desejado.

— Eduardo Campañó
fonte

2

os navegadores irão procurar o arquivo .ico se você marcar o site como favorito - então isso não ajuda nisso. mas eu estou querendo saber se o navegador se lembra disso. só sei que no Fiddler às vezes vejo uma série de ícones sendo recuperados. talvez essa seja a barra de ferramentas do google?

— Simon_Weaver

Acho que você está certo, ícones para bookmarks só funcionam às vezes, eu nunca entendi por que, talvez este é o caso

— Eduardo Campañó

7

Eu acho que o favicon.ico deve estar na pasta raiz. Apenas pertence a isso.

Se você deseja servidor de ícones diferentes - coloque-o no controlador. Você pode fazer isso. Caso contrário, deixe-o na pasta raiz.

— dmajkic
fonte

1

Concordo. Está na pasta raiz e não deve estar em nenhum outro lugar ... Não há necessidade de uma tag HTML para o favicon, se estiver na pasta raiz. Funciona com todos os navegadores comuns ...

— Vinz

No começo, isso me pareceu um touro absoluto, mas aparentemente não há maneira de contornar isso, nosso registro continua mostrando 404 erros de diferentes agentes de usuários.

— precisa saber é o seguinte

3

Nenhuma das opções acima funcionou para mim. Finalmente resolvi esse problema renomeando favicon.ico para myicon.ico e referenciá-lo na cabeça<link rel="icon" href="~/myicon.ico" type="image/x-icon" />

— Tracy Zhou
fonte

2

Também deve ser possível criar um controlador que retorne o arquivo ico e registrar a rota /favicon.ico para apontar para esse controlador.

— Carles Company
fonte

2

Tudo que você precisa fazer é adicionar o app.UseStaticFiles();seu startup.cs -> public void Configure(IApplicationBuilder app, IHostingEnvironment env).

O núcleo do ASP.net fornece uma excelente maneira de obter arquivos estáticos. Isso está usando a pasta wwwroot. Leia os arquivos estáticos no ASP.NET Core .

Usar o <Link />não é uma ideia muito boa. Por que alguém adicionaria a tag de link em cada HTML ou cshtml para o favicon.ico?

— Ripal Barot
fonte

0

Use isso em vez de apenas o favicon.ico, que tende a procurar o arquivo de ícone fav

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

Use o caminho solicitado e combine com o arquivo de ícone fav para que ele obtenha o endereço exato que sua pesquisa

Usar isso resolveu o erro Fav.icon, que é gerado sempre no Application_Error

— Tribhuvan Patel
fonte

0

Constatou que no .Net Core, colocar o favicon.ico em / lib em vez de wwwroot corrige o problema

— Dimitris Kouris
fonte