Melayani favicon.ico di ASP.NET MVC

255

Apa rekomendasi terakhir / terbaik untuk cara melayani favicon.ico di ASP.NET MVC?

Saat ini saya melakukan hal berikut:

  • Menambahkan entri ke bagian paling awal metode RegisterRoutes saya:

    routes.IgnoreRoute("favicon.ico");

  • Menempatkan favicon.ico di root aplikasi saya (yang juga akan menjadi root dari domain saya).

Saya punya dua pertanyaan:

  • Apakah tidak ada cara untuk meletakkan favicon.ico di tempat lain selain dari akar aplikasi saya. Cukup menjengkelkan karena berada di sana pada tingkat yang sama dengan Contentdan Controllers.

  • Apakah IgnoreRoute("favicon.ico")pernyataan ini cukup - atau haruskah saya juga melakukan hal berikut seperti yang dibahas dalam posting blog dari Phil Haack . Saya tidak sadar pernah melihat permintaan ke favicon.ico di direktori apa pun selain root - yang akan membuat ini tidak perlu (tapi ada baiknya mengetahui cara melakukannya).

    routes.IgnoreRoute("{*favicon}", new {favicon=@"(.*/)?favicon.ico(/.*)?"});
asp.net asp.net-mvc razor favicon Simon_Weaver
sumber
4
Ekspresi reguler Anda harus '\.' untuk titik di favicon.ico, bukan hanya '.'
NathanAldenSr
1
Ini adalah apa yang saya gunakan (itu mengambil saran @ NathanAldenSr ke akun, mendukung garis miring ke depan dan belakang, dan juga memungkinkan untuk file favicon.png):routes.IgnoreRoute("{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });
BrainSlugs83
@ BrainSlugs83 - Solusi Anda menambahkan bagian yang hilang untuk saya yang merupakan garis miring ... Berikut adalah versi .NET vNext (beta-5). routes.MapRoute("IgnoreFavicon", "{*favicon}", new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" });
Rentering.com
Koreksi, vNext Abaikan routes.MapRoute("Ingore", "{*favicon}", new { }, new { favicon = @"(.*[/\\])?favicon\.((ico)|(png))(/.*)?" }); Pemberitahuan Rute new {},
Rentering.com

Jawaban:

204

Menempatkan favicon.ico di root domain Anda hanya benar-benar memengaruhi IE5, IIRC. Untuk browser yang lebih modern, Anda harus dapat menyertakan tag tautan untuk mengarahkan ke direktori lain:

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

Anda juga dapat menggunakan file non-ico untuk browser selain IE, yang mungkin saya gunakan pernyataan kondisional berikut untuk melayani PNG ke FF, dll, dan ICO ke 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
sumber
25
Anda perlu menggunakan @ Url.Content untuk menghasilkan tautan sehingga berfungsi di semua lingkungan. Lihat respons
AlexC
5
Benar, untuk ASP.NET. Jawaban saya menggambarkan versi "generik" (HTML biasa), sehingga siapa pun dapat memodifikasi agar sesuai dengan pilihan kerangka / bahasa mereka :)
Chris
Hal ini penting untuk dicatat bahwa IE10 tidak mendukung komentar bersyarat, jadi ini tidak akan bekerja untuk pengguna dengan browser. Sebuah solusi adalah menambahkan favicon Anda ke direktori root situs Anda, yang akan diambil IE10 secara otomatis jika tidak menemukan tautan untuk favicon di mana saja.
Kevin Babcock
2
IE11 Memahami favicon PNG dan tidak perlu pernyataan bersyarat. Anda harus melihat artikel yang bagus ini: jonathantneal.com/blog/understand-the-favicon
QMaster
Bung terima kasih! Bagian bawah benar-benar membantu saya bekerja dengan png, itu hanya perlu di bagian atas halaman, masterpage, atau tata letak.
Alper
226

Saya setuju dengan jawaban dari Chris, tetapi melihat ini adalah pertanyaan ASP.NET MVC tertentu akan lebih baik untuk menggunakan sintaks Razor:

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

Atau secara tradisional

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

daripada 

<link rel="icon" href="http://www.mydomain.com/content/favicon.ico"/>
AlexC
sumber
3
Benar. Jawaban saya adalah menggambarkan versi "generik" (HTML), sehingga siapa pun dapat memodifikasi agar sesuai dengan pilihan kerangka / bahasa mereka :)
Chris
2
@Diego - Ya, rel = "SHORTCUT ICON" adalah implementasi non-standar yang digunakan oleh Internet Explorer. Spasi adalah karakter pemisah dalam standar W3C (lihat developer.mozilla.org/en-US/docs/Web/HTML/Element/link ). Di browser selain Internet Explorer, sintaks yang benar adalah <link rel = "icon" href = "path / to / favicon.ico"> - lihat jonathantneal.com/blog/understand-the-favicon untuk informasi lebih lanjut. Jelas Anda dapat menggunakan sintaks Razor atau Formulir Web untuk path ke ikon seperti di atas.
pwdst
3
Dengan MVC 4 Anda tidak memerlukan Url. Isi dalam hal ini karena akan ditangani secara otomatis, Anda dapat menggunakan; <link rel = "icon" href = "~ / content / favicon.ico" />
Stuart Hallows
20

1) Anda dapat meletakkan favicon di tempat yang Anda inginkan dan menambahkan tag ini ke kepala halaman Anda

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

walaupun beberapa browser akan mencoba untuk mendapatkan favicon dari /favicon.ico secara default, jadi Anda harus menggunakan IgnoreRoute.

2) Jika browser membuat permintaan untuk favicon di direktori lain, ia akan mendapatkan kesalahan 404 yang baik-baik saja dan jika Anda memiliki tag tautan pada jawaban 1 di halaman master Anda, browser akan mendapatkan favicon yang Anda inginkan.

Eduardo Campañó
sumber
2
browser akan pergi dan mencari file .ico jika Anda menandai situs - jadi ini tidak membantu. tapi saya ingin tahu apakah browser mengingatnya. Saya hanya tahu bahwa di Fiddler kadang-kadang saya melihat banyak ikon yang diambil. mungkin itu adalah google toolbar?
Simon_Weaver
saya pikir Anda benar, ikon untuk bookmark hanya berfungsi kadang-kadang, saya tidak pernah tahu mengapa, mungkin ini masalahnya
Eduardo Campañó
7

Saya pikir favicon.ico harus di folder root. Itu hanya milik di sana.

Jika Anda ingin servere ikon yang berbeda - masukkan ke dalam pengontrol. Kamu bisa melakukannya. Jika tidak - tinggalkan saja di folder root.

dmajkic
sumber
1
Saya setuju. Itu ada di folder root dan tidak boleh di tempat lain ... Tidak perlu Tag HTML untuk favicon jika ada di folder root. Bekerja dengan semua browser umum ...
Vinz
Pada awalnya, ini tampak seperti omong kosong mutlak bagi saya, tetapi tampaknya tidak ada jalan lain, pencatatan kami terus menunjukkan 404 kesalahan dari agen pengguna yang berbeda.
Michiel Cornille
3

Tak satu pun dari yang di atas bekerja untuk saya. Saya akhirnya memecahkan masalah ini dengan mengganti nama favicon.ico ke myicon.ico, dan merujuknya di kepala<link rel="icon" href="~/myicon.ico" type="image/x-icon" />

Tracy Zhou
sumber
2

Seharusnya juga dimungkinkan untuk membuat controller yang mengembalikan file ico dan mendaftarkan rute /favicon.ico untuk menunjuk ke controller itu.

Perusahaan Carles
sumber
2

Yang perlu Anda lakukan adalah menambahkan app.UseStaticFiles();startup.cs Anda -> public void Configure(IApplicationBuilder app, IHostingEnvironment env).

Inti ASP.net menyediakan cara terbaik untuk mendapatkan file statis. Itu menggunakan folder wwwroot. Silakan baca file-file statis di ASP.NET Core .

Menggunakan <Link />itu bukan ide yang sangat bagus. Mengapa seseorang menambahkan tag tautan pada setiap HTML atau cshtml untuk favicon.ico?

Ripal Barot
sumber
0

Gunakan ini alih-alih hanya favicon.ico yang cenderung mencari file ikon fav 

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

Gunakan jalur yang diminta dan kombinasikan dengan file ikon fav sehingga mendapatkan alamat akurat yang dicari

Menggunakan ini memecahkan kesalahan Fav.icon yang dimunculkan selalu pada Application_Error

Tribhuvan Patel
sumber
0

Menemukannya di .Net Core, menempatkan favicon.ico di / lib daripada wwwroot memperbaiki masalah

Dimitris Kouris
sumber