ให้บริการ favicon.ico ใน ASP.NET MVC

255

คำแนะนำสุดท้าย / ดีที่สุดสำหรับวิธีการให้บริการ favicon.ico ใน ASP.NET MVC คืออะไร?

ฉันกำลังทำสิ่งต่อไปนี้:

  • การเพิ่มรายการให้กับจุดเริ่มต้นของวิธี RegisterRoutes ของฉัน:

    routes.IgnoreRoute("favicon.ico");

  • วาง favicon.ico ในรูทของแอปพลิเคชันของฉัน (ซึ่งจะเป็นรูทของโดเมนของฉันด้วย)

ฉันมีสองคำถาม:

  • ไม่มีวิธีใดที่จะนำ favicon.ico ไปไว้ที่อื่นนอกเหนือจากรูทของใบสมัครของฉัน มันสวยเหนอะเป็นสิทธิที่มีอยู่ในระดับเดียวกับและContentControllers

  • นี่คือIgnoreRoute("favicon.ico")คำสั่งที่เพียงพอ - หรือฉันควรทำอย่างไรต่อไปตามที่กล่าวไว้ในบล็อกโพสต์จากฟิล Haack ฉันไม่ทราบว่าเคยเห็นคำขอ favicon.ico ในไดเรกทอรีใด ๆ นอกเหนือจากรูทซึ่งจะทำให้สิ่งนี้ไม่จำเป็น (แต่เป็นการดีที่จะรู้ว่าต้องทำอย่างไร)

    routes.IgnoreRoute("{*favicon}", new {favicon=@"(.*/)?favicon.ico(/.*)?"});
asp.net  asp.net-mvc  razor  favicon 
— Simon_Weaver
แหล่งที่มา
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
— RickAndMSFT
5
จริงสำหรับ ASP.NET คำตอบของฉันแสดงให้เห็นถึง "ทั่วไป" รุ่น (HTML ธรรมดา) เพื่อให้ทุกคนสามารถปรับเปลี่ยนให้เหมาะสมกับทางเลือกของกรอบ / ภาษา :)
— คริส
เป็นสิ่งสำคัญที่จะต้องทราบว่า IE10 ไม่สนับสนุนการแสดงความคิดเห็นแบบมีเงื่อนไขดังนั้นจะไม่สามารถใช้ได้กับผู้ใช้ที่มีเบราว์เซอร์ ทางออกคือการเพิ่ม favicon ของคุณไปยังไดเรกทอรีรากของเว็บไซต์ของคุณซึ่ง IE10 จะรับโดยอัตโนมัติหากไม่พบลิงค์สำหรับ favicon ที่ใดก็ได้
— Kevin Babcock
2
IE11 เข้าใจ PNG favicon และไม่จำเป็นต้องมีเงื่อนไข คุณควรเห็นบทความที่ดีนี้: jonathantneal.com/blog/understand-the-favicon
— QMaster
ขอบใจเพื่อน! ส่วนล่างช่วยให้ฉันทำงานกับ png ได้จริง ๆ เพียงแค่ต้องอยู่ที่ด้านบนสุดของเพจหน้าหลักหรือเค้าโครง
— Alper
226

ฉันเห็นด้วยกับคำตอบจาก Chris แต่การเห็นว่านี่เป็นคำถาม ASP.NET MVC เฉพาะควรใช้ไวยากรณ์ของมีดโกน:

<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"/>
— AlexC
แหล่งที่มา
3
จริง คำตอบของฉันคือการแสดงให้เห็นว่า "ทั่วไป" รุ่น (HTML) เพื่อให้ทุกคนสามารถปรับเปลี่ยนให้เหมาะสมกับทางเลือกของกรอบ / ภาษา :)
— คริส
2
@Diego - ใช่ rel = "SHORTCUT ICON" เป็นการใช้งานที่ไม่ได้มาตรฐานที่ใช้โดย Internet Explorer พื้นที่เป็นอักขระตัวแยกในมาตรฐาน W3C (ดูdeveloper.mozilla.org/en-US/docs/Web/HTML/Element/link ) ในเบราว์เซอร์อื่นที่ไม่ใช่ Internet Explorer ไวยากรณ์ที่ถูกต้องคือ <rel ลิงค์ = "ไอคอน" href = "เส้นทาง / เพื่อ / favicon.ico"> - ดูjonathantneal.com/blog/understand-the-faviconมาก เห็นได้ชัดว่าคุณสามารถใช้รูปแบบมีดโกนหรือเว็บฟอร์มสำหรับเส้นทางไปยังไอคอนดังกล่าวข้างต้น
— pwdst
3
ด้วย MVC 4 คุณไม่จำเป็นต้องมี Url เนื้อหาในกรณีนี้เนื่องจากจะถูกจัดการโดยอัตโนมัติคุณสามารถใช้ <link rel = "ไอคอน" href = "~ / content / favicon.ico" />
— Stuart Hallows
20

1) คุณสามารถใส่ favicon ของคุณในตำแหน่งที่คุณต้องการและเพิ่มแท็กนี้ลงในส่วนหัวของหน้า

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

แม้ว่าเบราว์เซอร์บางตัวจะพยายามรับ favicon จาก /favicon.ico ตามค่าเริ่มต้นดังนั้นคุณควรใช้ IgnoreRoute

2) หากเบราว์เซอร์ทำการร้องขอสำหรับ favicon ในไดเรกทอรีอื่นมันจะได้รับข้อผิดพลาด 404 ซึ่งใช้ได้และถ้าคุณมีแท็กลิงค์ในคำตอบ 1 ในหน้าต้นแบบของคุณเบราว์เซอร์จะได้รับ favicon ที่คุณต้องการ

— Eduardo Campañó
แหล่งที่มา
2
เบราว์เซอร์จะไปและค้นหาไฟล์. ico หากคุณบุ๊กมาร์กไซต์ - ดังนั้นสิ่งนี้จึงไม่ช่วย แต่ฉันสงสัยว่าเบราว์เซอร์จะจำได้ไหม ฉันเพิ่งรู้ว่าใน Fiddler บางครั้งฉันก็เห็นไอคอนทั้งหมดถูกดึงออกมา บางทีนั่นอาจเป็นแถบเครื่องมือ google หรือ
— Simon_Weaver
ฉันคิดว่าคุณกำลังขวาไอคอนสำหรับบุ๊กเท่านั้นทำงานบางครั้งผมไม่เคยคิดว่าทำไมอาจจะเป็นกรณีนี้
— Eduardo Campano
7

ฉันคิดว่าfavicon.icoควรอยู่ในโฟลเดอร์ราก มันเป็นของที่นั่น

หากคุณต้องการไอคอนเซิร์ฟเวอร์ที่แตกต่าง - ใส่ไว้ใน controler คุณสามารถทำได้ ถ้าไม่ - เพียงฝากไว้ในโฟลเดอร์รูท

— dmajkic
แหล่งที่มา
1
ฉันเห็นด้วย. มันอยู่ในโฟลเดอร์รูทและไม่ควรอยู่ที่อื่น ... ไม่จำเป็นต้องใช้แท็ก HTML สำหรับ favicon หากอยู่ในโฟลเดอร์รูท ทำงานร่วมกับเบราว์เซอร์ทั่วไปทั้งหมด ...
— Vinz
ในตอนแรกนี่ดูเหมือนจะเป็นสิ่งที่ดีสำหรับฉัน แต่แน่นอนไม่มีทางอยู่รอบตัวการบันทึกของเราแสดงข้อผิดพลาด 404 จากตัวแทนผู้ใช้ที่แตกต่างกัน
— Michiel Cornille
3

ไม่มีข้อใดถูกเลยสำหรับฉัน ในที่สุดฉันก็แก้ปัญหานี้ได้โดยเปลี่ยนชื่อ favicon.ico เป็น myicon.ico และอ้างอิงในหัว<link rel="icon" href="~/myicon.ico" type="image/x-icon" />

— เทรซี่โจว
แหล่งที่มา
2

ทั้งหมดที่คุณต้องทำคือการเพิ่มapp.UseStaticFiles();ใน startup.cs ของคุณ public void Configure(IApplicationBuilder app, IHostingEnvironment env)->

แกน ASP.net มอบวิธีที่ยอดเยี่ยมในการรับไฟล์คงที่ นั่นคือการใช้โฟลเดอร์ wwwroot โปรดอ่านไฟล์แบบคงที่ใน ASP.NET หลัก

การใช้งาน<Link />ไม่ใช่ความคิดที่ดีมาก ทำไมบางคนถึงเพิ่มแท็กลิงค์ใน HTML หรือ cshtml สำหรับ favicon.ico

— Ripal Barot
แหล่งที่มา
0

ใช้สิ่งนี้แทนเพียงแค่ favicon.ico ซึ่งมีแนวโน้มที่จะค้นหาไฟล์ไอคอน fav 

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

ใช้เส้นทางที่ร้องขอและรวมกับไฟล์ไอคอน fav เพื่อให้ได้รับที่อยู่ที่ถูกต้องซึ่งค้นหา

การใช้สิ่งนี้จะแก้ไขข้อผิดพลาด Fav.icon ซึ่งจะเพิ่มขึ้นเสมอใน Application_Error

— Tribhuvan Patel
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.