Обслуговування favicon.ico в ASP.NET MVC


255

Яка кінцева / найкраща рекомендація щодо обслуговування favicon.ico в ASP.NET MVC?

Зараз я роблю наступне:

  • Додавання запису до самого початку мого методу RegisterRoutes:

    routes.IgnoreRoute("favicon.ico");
  • Розміщення favicon.ico в корені моєї програми (що також буде коренем мого домену).

У мене є два питання:

  • Чи немає способу помістити favicon.ico кудись, крім кореня моєї програми. Дуже приємно бути там, на тому самому рівні, як Contentі Controllers.
  • Чи IgnoreRoute("favicon.ico")достатньо цього твердження - чи я також повинен робити наступне, як обговорювалося в публікації в блозі від Філа Хака . Мені невідомо, що я ніколи не бачив запиту до favicon.ico в будь-якому каталозі, окрім кореня, який би зробив це непотрібним (але добре знати, як це зробити).

    routes.IgnoreRoute("{*favicon}", new {favicon=@"(.*/)?favicon.ico(/.*)?"});

4
Ваш регулярний вираз має бути "\". для крапки в favicon.ico, а не лише '.'
NathanAldenSr

1
Це те, що я використовую (він враховує поради @ NathanAldenSr, підтримує нахили вперед і назад, а також дозволяє використовувати файли favicon.png):routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });
BrainSlugs83,

@ BrainSlugs83 - Ви вирішили додати пропущений фрагмент для мене, який був косою рисою ... Ось версія .NET vNext (бета-5). routes.MapRoute("IgnoreFavicon", "{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });
Rentering.com

Виправлення, vNext Ігноруйте маршрут routes.MapRoute("Ingore", "{*favicon}", new { }, new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" }); Повідомлення thew new {},
Rentering.com

Відповіді:


204

Розміщення favicon.ico у корені вашого домену по-справжньому впливає на IE5, IIRC. Для більш сучасних браузерів ви повинні мати можливість включити тег посилань, щоб вказати на інший каталог:

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

Ви також можете використовувати не-ico-файли для інших браузерів, ніж IE, для яких я, можливо, використовую наступний умовний вислів для подачі PNG до FF тощо, а також ICO до 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]-->

25
Вам потрібно використовувати @ Url.Content для створення посилання, щоб воно працювало у будь-яких середовищах. Дивіться відповідь
AlexC

5
Правда, для ASP.NET. Моя відповідь ілюструє "загальну" версію (звичайний HTML), тому кожен бажаючий міг змінити відповідно до свого вибору рамки / мови :)
Кріс

Це важливо відзначити , що IE10 не підтримує умовні коментарі, так що це не буде працювати для користувачів з цим браузером. Рішенням може бути додавання вашого favicon до кореневого каталогу вашого веб-сайту, який IE10 підбиратиме автоматично, якщо він ніде не знайде посилання на фавікон.
Кевін Бабкок

2
IE11 Розуміння PNG-фавікону та не потребує умовного твердження. Ви повинні побачити цю хорошу статтю: jonathantneal.com/blog/understand-the-favicon
QMaster

Спасибі чувак! Нижня частина дійсно допомагає мені працювати з png, вона просто повинна знаходитися вгорі сторінки, головній сторінці чи макеті.
Альпер

226

Я погоджуюся з відповіддю від Кріса, але, бачачи це специфічне запитання ASP.NET MVC, було б краще використовувати або синтаксис Razor:

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

Або традиційно

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

а не

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

3
Правда. Моя відповідь ілюструвала "загальну" версію (HTML), тому кожен бажаючий міг змінити відповідно до свого вибору рамки / мови :)
Кріс

2
@Diego - Так, rel = "SHORTCUT ICON" - це нестандартна реалізація, що використовується Internet Explorer. Простір є роздільним символом у стандартах W3C (див. Developer.mozilla.org/en-US/docs/Web/HTML/Element/link ). У веб-переглядачах, окрім Internet Explorer, правильним синтаксисом є <link rel = "icon" href = "path / to / favicon.ico"> - див. Jonathantneal.com/blog/understand-the-favicon для отримання додаткової інформації. Очевидно, ви можете використовувати синтаксис Razor або Web Forms для шляху до значка, як зазначено вище.
pwdst

3
З MVC 4 вам не знадобиться Url.Content в цьому випадку, оскільки це буде оброблятися автоматично, ви можете просто використовувати; <link rel = "icon" href = "~ / content / favicon.ico" />
Стюарт Хеллоуз

20

1) Ви можете розмістити свій фавікон там, де ви хочете, і додати цей тег до голови сторінки

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

хоча деякі веб-переглядачі намагаються отримати фавікон з /favicon.ico за замовчуванням, тому вам слід скористатися IgnoreRoute.

2) Якщо браузер зробить запит на favicon в іншому каталозі, він отримає помилку 404, що добре, і якщо у вас є тег посилання у відповіді 1 на своїй головній сторінці, браузер отримає потрібний фавікон.


2
браузери перейдуть і шукатимуть файл .ico, якщо ви додаєте закладки на сайт - тому це не допоможе. але мені цікаво, чи пам’ятає браузер це. я просто знаю, що іноді в Фіддлері я бачу цілий ряд знайдених ікон. можливо, це панель інструментів Google?
Simon_Weaver

я думаю, ти маєш рацію, іконки для закладок працюють лише іноді, я ніколи не з'ясовував, чому, можливо, саме так
Едуардо Кампаньо

7

Я думаю, що favicon.ico має бути в кореневій папці. Просто воно там належить.

Якщо ви хочете подавати різні значки - поставте їх у контролер. Ви можете це зробити. Якщо ні - просто залиште його в кореневій папці.


1
Я згоден. Він знаходиться в кореневій папці і не повинен бути більше ніде ... Немає необхідності в HTML тезі для фавікону, якщо він знаходиться в кореневій папці. Працює з усіма звичайними браузерами ...
Вінц

Спочатку це здавалося мені абсолютним биком, але, очевидно, немає способу його обійтися, наш журнал постійно показує 404 помилки від різних агентів користувача.
Міхель Корніль

3

Ніщо з перерахованого вище не працювало для мене. Нарешті я вирішив цю проблему, перейменувавши favicon.ico на myicon.ico і посилаючись на це в голові<link rel="icon" href="~/myicon.ico" type="image/x-icon" />


2

Слід також мати можливість створити контролер, який повертає файл ico та зареєструвати маршрут /favicon.ico, щоб вказати на цей контролер.


2

Все, що вам потрібно зробити, - це додати app.UseStaticFiles();у свій startup.cs -> public void Configure(IApplicationBuilder app, IHostingEnvironment env).

Ядро ASP.net - це відмінний спосіб отримати статичні файли. Це за допомогою папки wwwroot. Будь ласка, прочитайте статичні файли в ASP.NET Core .

Використання <Link />не дуже гарна ідея. Чому хтось додасть тег посилання на кожен HTML чи cshtml для favicon.ico?


0

Використовуйте це замість просто favicon.ico, який прагне шукати файл значка fav

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

Використовуйте потрібний шлях та комбінуйте з файлом піктограми fav, щоб він отримав точну адресу, за яким його шукали

Використовуючи це, вирішено помилку Fav.icon, яка завжди виникає в Application_Error


Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.