Favicon.ico için bağlantı etiketi eklemek gerekiyor mu?

153

Favicon.ico'yu otomatik olarak algılamayacak modern tarayıcılar var mı? Favicon.ico için bağlantı etiketi eklemek için herhangi bir neden var mı?

<link rel="shortcut icon" href="/favicon.ico">

Tahminimce, HTML veya PNG ile gitmeye karar verirseniz, HTML belgesine eklemeniz yeterlidir ...

html favicon html-head

— user1087110
kaynak

Herhangi bir tarayıcının buna ihtiyaç duyduğunu hiç görmedim. Hiç örneğin var mı?

— shark555

favicon.icoOtomatik olarak aramaya bakıp bakmayacağınız tercih ayarlarına sahip bazı tarayıcıları adlandırabilirim . Dolayısıyla, simgenizin gösterildiğinden emin olmak istiyorsanız, HTML'nize bir bağlantı eklemeniz daha iyi olur. Bu arada, .png dosyaları genellikle karşılaştırılabilir .ico dosyalarından daha küçüktür.

— Bay Lister

Lütfen bazı Bay Lister adını verin :) Hayır shark555, ben hiçbir isim ...

— user1087110

5

Firefox (ve SeaMonkey gibi diğer Gecko tabanlı tarayıcılar) davranışında ince ayar yapmak için çeşitli ayarlara sahiptir. browser.chrome.faviconstrue olarak ayarlandığında kökte favicon.ico aranır; false olursa, yalnızca HTML sayfasında belirtilirse simgeler yüklenir. Bkz. Kb.mozillazine.org/Browser.chrome.favicons ve ilgili sayfalar.

— Bay Lister

Olası kopyası <link rel = "icon" href = "favicon.ico" type = "image / x-icon" /> eklemeniz gerekiyor mu?

— Dan Dascalescu

253

Favicon için farklı bir konum veya dosya türü (örn. PNG veya SVG ) seçmek için:
Bunun nedeni, simgenin belirli bir konumda, belki de resimler klasöründe veya benzer bir şeyde olmasını istemeniz olabilir. Örneğin:

<link rel="icon" href="_/img/favicon.png">

Bu farklı konum, SO'nun yaptığı gibi CDN de olabilir <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.

PNG gibi diğer dosya türlerini kullanma hakkında daha fazla bilgi edinmek için bu soruya göz atın .

İçin önbellek bozma amaçlı:
önbellek bozma amaçlı yoluna bir sorgu dizesi ekleyin:

<link rel="icon" href="/favicon.ico?v=1.1">

Favicons çok önbelleğe alınır ve bu bir yenileme sağlamak için harika bir yoldur.

Varsayılan konum hakkında dipnot:
Sorunun ilk bitine kadar: tüm modern tarayıcılar varsayılan konumda bir favicon algılar, bu nedenle bunun için a kullanmanın bir nedeni değildirlink .

Dipnot rel="icon": @ Semanino'nun cevabında
belirtildiği gibi , kullanmak , Internet Explorer'ın eski sürümleri için gerekli olan eski bir tekniktir, ancak çoğu durumda daha doğru talimatla değiştirilebilir. @Semanino makalesi , değerinin geçerli bir seçenek olmadığını gösteren uygun spesifikasyona düzgün şekilde bağlandığını temel almaktadır .rel="shortcut icon"rel="icon"relshortcut

— Jeroen
kaynak

Bu <head>etikete girmeli mi?

— Max Williams

1

@MaxWilliams Evet. (Bkz . MDN belgelerinde "İzin verilen üst öğeler" veya W3 özelliklerinde "Bağlamlar" ).

— Jeroen

1

Bu 2016 - ve aynı zamanda diğer simgeleri belirttiğiniz Chrome hala (? Ya tekrar) kök varsayılan favicon.ico tanımıyor ...

— Sebastian G. Marinescu

52

W3C'nin HTML5 spesifikasyonunun ve WhatWG'nin standartlaştırıldığını lütfen unutmayın

<link rel="icon" href="/favicon.ico">

"Rel" özelliğinin değerini not edin!

Özniteliğin değeri shortcut icon, relInternet Explorer'a özgü çok eski bir uzantıdır ve kullanımdan kaldırılmıştır .

Bu yüzden lütfen artık kullanmamayı ve dosyalarınızı standartlara uygun olmalarını ve tüm tarayıcılarda doğru şekilde görüntülenmelerini sağlamayı düşünün.

Bu harika gönderiye de bakmak isteyebilirsiniz: rel = "shortcut icon" zararlı olarak kabul edildi

— Semanino
kaynak

1

Oldukça "kullanımdan kaldırıldı" (aslında hiçbir spesifikasyonun bir parçası değildi). Ancak, HTML5 spesifikasyonu , "Tarihsel nedenlerden dolayı, icon anahtar kelimesinden önce" kısayol "anahtar kelimesi gelebilir." Shortcut "anahtar kelimesi varsa, icon anahtar sözcüğünden hemen önce gelmelidir ve iki anahtar kelimenin ayrılması gerekir sadece tek bir U + 0020 SPACE karakteriyle. " Ayrıca, "icon anahtar sözcüğü tarafından verilen kaynaklar için varsayılan bir tür yoktur."

— DocRoot

12

<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
<link rel="icon" type="image/png" href="http://example.com/favicon.png" />
<link rel="icon" type="image/gif" href="http://example.com/favicon.gif" />
<link rel="icon" type="image/jpeg" href="http://example.com/favicon.jpeg" />
<link rel="icon" type="image/webp" href="http://example.com/favicon.webp" />

Her şey hangi görüntü biçimini kullanmak istediğinize bağlıdır!
web sitenizin bir simgesi varsa, UX için çok daha iyi olacak!

gösteri

tarayıcı sekmesinde logo göster

— xgqfrms
kaynak

iconhandbook.co.uk/reference/examples/favicons bağlantılar: mathiasbynens.be/notes/rel-shortcut-icon#comments bağlantılar: html.spec.whatwg.org/multipage/semantics.html#rel-icon bağlantılar:

— xgqfrms

UX'in bununla hiçbir ilgisi yok.

— paddotk

@paddotk Ne demek istediğim kullanıcı sekmesinde bir favicon simgesi varsa tarayıcıda çoklu sekmeleri açtığınızda hangi sekmenin hedef web sitesine ait olduğunu kolayca söyleyebilir.

— xgqfrms

1

Platforma özel boyuta sahip tüm cihazlar için ekleyebiliriz

<link rel="apple-touch-icon" sizes="57x57" href="fav_icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="fav_icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="fav_icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="fav_icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="fav_icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="fav_icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="fav_icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="fav_icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="fav_icons/apple-icon-180x180.png">

<link rel="icon" type="image/png" sizes="192x192"  href="fav_icons/android-icon-192x192.pn">
<link rel="icon" type="image/png" sizes="32x32" href="fav_icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="fav_icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="fav_icons/favicon-16x16.png">

— Abhilash
kaynak

0

Sonuçta tüm tarayıcılar olduğunu edecektir gerçekte arayın favicon.ico dosyasına. Bazı tarayıcılar, kullanıcıların otomatik olarak görünüp görünmeyeceğini seçmelerine izin verir. Bu nedenle, her zaman görünmesini ve bakılmasını sağlamak için onu tanımlamanız gerekir.

— animuson
kaynak

6

Yorumunuz için teşekkürler animuson. Otomatik olarak görünmeyecek bazı tarayıcıları adlandırabilir misiniz?

— user1087110

11

@ user1087110: Kafamın üstünden hiç bir şey bilmiyorum ve dürüstçe kimin umurunda. Mesele şu ki, bunu kabul edemezsiniz ve olmayacak olanları da hesaba katmanız gerekir.

— animuson

Artık alakalı olmadığı için, sayfayı temizlemek için cevabınızı silebilirsiniz.

— tavuklar