Phục vụ favicon.ico trong ASP.NET MVC


255

Đề xuất cuối cùng / tốt nhất cho cách phục vụ favicon.ico trong ASP.NET MVC là gì?

Tôi hiện đang làm như sau:

  • Thêm một mục vào đầu của phương thức RegisterRoutes của tôi:

    routes.IgnoreRoute("favicon.ico");
  • Đặt favicon.ico vào thư mục gốc của ứng dụng của tôi (cũng sẽ là thư mục gốc của tên miền của tôi).

Tôi có hai câu hỏi:

  • Có cách nào để đặt favicon.ico ở đâu khác ngoài root ứng dụng của tôi không. Nó khá đẹp khi ở ngay cùng cấp độ ContentControllers.
  • IgnoreRoute("favicon.ico")Tuyên bố này đã đủ chưa - hay tôi cũng nên làm như sau như đã thảo luận trong một bài đăng trên blog từ Phil Haack . Tôi không biết đã từng thấy yêu cầu favicon.ico trong bất kỳ thư mục nào khác ngoài thư mục gốc - điều này sẽ khiến việc này không cần thiết (nhưng thật tốt khi biết cách thực hiện).

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

4
Biểu thức thông thường của bạn phải là '\.' cho dấu chấm trong favicon.ico, không chỉ '.'.
NathanAldenSr

1
Đây là những gì tôi sử dụng (cần có lời khuyên của @ NathanAldenSr, hỗ trợ cả dấu gạch chéo về phía trước và phía sau, đồng thời cho phép các tệp favicon.png):routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });
BrainSlugs83

@ BrainSlugs83 - Giải pháp của bạn đã thêm phần còn thiếu cho tôi đó là dấu gạch chéo ... Đây là phiên bản .NET vNext (beta-5). routes.MapRoute("IgnoreFavicon", "{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });
Rentering.com 6/12/2016

Sửa chữa, vNext Bỏ qua lộ trình routes.MapRoute("Ingore", "{*favicon}", new { }, new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" }); Thông báo new {},
Rentering.com 7/12/2016

Câu trả lời:


204

Đặt favicon.ico trong thư mục gốc của tên miền của bạn chỉ thực sự ảnh hưởng đến IE5, IIRC. Đối với các trình duyệt hiện đại hơn, bạn sẽ có thể bao gồm thẻ liên kết để trỏ đến thư mục khác:

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

Bạn cũng có thể sử dụng các tệp không phải ico cho các trình duyệt khác ngoài IE, mà tôi có thể sử dụng câu lệnh có điều kiện sau đây để phân phát PNG sang FF, v.v. và ICO sang 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
Bạn cần sử dụng @ Url.Content để tạo liên kết để nó hoạt động trong tất cả các môi trường. Xem phản hồi của AlexC
RickAndMSFT

5
Đúng, đối với ASP.NET. Câu trả lời của tôi minh họa phiên bản "chung" (HTML thuần túy), vì vậy bất kỳ ai cũng có thể sửa đổi cho phù hợp với lựa chọn khung / ngôn ngữ của họ :)
Chris

Điều quan trọng cần lưu ý là IE10 không hỗ trợ nhận xét có điều kiện, vì vậy điều này sẽ không hoạt động cho người dùng với trình duyệt đó. Một giải pháp sẽ là thêm favicon của bạn vào thư mục gốc của trang web, IE10 sẽ tự động nhận nếu nó không tìm thấy liên kết cho favicon ở bất cứ đâu.
Kevin Babcock

2
IE11 Hiểu favicon PNG và không cần tuyên bố điều kiện. Bạn nên xem bài viết hay này: jonathantneal.com/blog/understand-the-favicon
QMaster

Cảm ơn anh bạn! Phần dưới cùng thực sự giúp tôi làm việc với png, nó chỉ cần ở đầu trang, trang chủ hoặc bố cục.
Alper

226

Tôi đồng ý với câu trả lời từ Chris, nhưng thấy đây là một câu hỏi ASP.NET MVC cụ thể, tốt hơn nên sử dụng cú pháp Dao cạo:

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

Hoặc theo truyền thống

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

thay vì

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

3
Thật. Câu trả lời của tôi là minh họa phiên bản "chung" (HTML), vì vậy bất kỳ ai cũng có thể sửa đổi cho phù hợp với lựa chọn khung / ngôn ngữ của họ :)
Chris

2
@Diego - Có, rel = "SHORTCUT ICON" là triển khai không chuẩn được sử dụng bởi Internet Explorer. Không gian là một ký tự phân cách trong các tiêu chuẩn W3C (xem developer.mozilla.org/en-US/docs/Web/HTML/Euity/link ). Trong các trình duyệt khác ngoài Internet Explorer, cú pháp chính xác là <link rel = "icon" href = "path / to / favicon.ico"> - xem jonathantneal.com/blog/understand-the-favicon để biết thêm. Rõ ràng bạn có thể sử dụng cú pháp Dao cạo hoặc Biểu mẫu web cho đường dẫn đến biểu tượng như trên.
pwdst

3
Với MVC 4, bạn sẽ không cần Url.Content trong trường hợp này vì điều đó sẽ được xử lý tự động, bạn chỉ có thể sử dụng; <link rel = "icon" href = "~ / content / favicon.ico" />
Stuart Hallows

20

1) Bạn có thể đặt favicon của bạn vào nơi bạn muốn và thêm thẻ này vào đầu trang của bạn

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

mặc dù một số trình duyệt sẽ cố gắng lấy favicon từ /favicon.ico theo mặc định, vì vậy bạn nên sử dụng IgnoreRoute.

2) Nếu một trình duyệt đưa ra yêu cầu cho favicon trong một thư mục khác, nó sẽ gặp lỗi 404, và nếu bạn có thẻ liên kết trong câu trả lời 1 trong trang chính của bạn thì trình duyệt sẽ nhận được favicon bạn muốn.


2
các trình duyệt sẽ đi và tìm tệp .ico nếu bạn đánh dấu trang - vì vậy điều này không giúp được gì. Nhưng tôi tự hỏi nếu trình duyệt nhớ điều đó. tôi chỉ biết rằng trong Fiddler đôi khi tôi thấy một loạt các biểu tượng được lấy ra. có lẽ đó là thanh công cụ google?
Simon_Weaver

Tôi nghĩ rằng bạn đúng, các biểu tượng cho dấu trang đôi khi chỉ hoạt động, tôi chưa bao giờ hiểu tại sao, có lẽ đây là trường hợp
Eduardo Campañó

7

Tôi nghĩ rằng favicon.ico nên có trong thư mục gốc. Nó chỉ thuộc về nơi đó.

Nếu bạn muốn phục vụ các biểu tượng khác nhau - hãy đặt nó vào trình điều khiển. Bạn có thể làm điều đó. Nếu không - chỉ cần để nó trong thư mục gốc.


1
Tôi đồng ý. Nó nằm trong thư mục gốc và không nên ở bất cứ nơi nào khác ... Không cần Thẻ HTML cho favicon nếu nó nằm trong thư mục gốc. Hoạt động với tất cả các trình duyệt phổ biến ...
Vinz

Lúc đầu, điều này có vẻ như là con bò tuyệt đối với tôi, nhưng không có cách nào khác, việc ghi nhật ký của chúng tôi tiếp tục hiển thị lỗi 404 từ các tác nhân người dùng khác nhau.
Michiel Cornille

3

Không ai ở trên làm việc cho tôi. Cuối cùng tôi đã giải quyết vấn đề này bằng cách đổi tên favicon.ico thành myicon.ico và tham khảo nó trong đầu<link rel="icon" href="~/myicon.ico" type="image/x-icon" />


2

Cũng có thể tạo một bộ điều khiển trả về tệp ico và đăng ký tuyến /favicon.ico để trỏ đến bộ điều khiển đó.


2

Tất cả những gì bạn cần làm là thêm app.UseStaticFiles();vào startup.cs -> public void Configure(IApplicationBuilder app, IHostingEnvironment env).

Lõi ASP.net cung cấp một cách tuyệt vời để có được các tệp tĩnh. Đó là sử dụng thư mục wwwroot. Vui lòng đọc các tệp tĩnh trong ASP.NET Core .

Sử dụng <Link />không phải là một ý tưởng rất tốt. Tại sao ai đó sẽ thêm thẻ liên kết trên mỗi HTML hoặc cshtml cho favicon.ico?


0

Sử dụng cái này thay vì chỉ favicon.ico có xu hướng tìm kiếm tập tin biểu tượng fav

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

Sử dụng đường dẫn được yêu cầu và kết hợp với tệp biểu tượng fav để nó có được địa chỉ chính xác mà nó tìm kiếm

Sử dụng điều này đã giải quyết lỗi Fav.icon luôn xuất hiện trên Application_Error


0

Tìm thấy rằng trong .Net Core, việc đặt favicon.ico vào / lib thay vì wwwroot khắc phục sự cố

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.