Diperlukan untuk menambahkan tag tautan untuk favicon.ico?

153

Apakah ada browser modern yang tidak akan mendeteksi favicon.ico secara otomatis? Apakah ada alasan untuk menambahkan tag tautan untuk favicon.ico?

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

Dugaan saya adalah bahwa hanya perlu memasukkannya ke dalam dokumen HTML jika Anda memutuskan untuk menggunakan GIF atau PNG ...

html favicon html-head pengguna1087110
sumber
Saya belum pernah melihat bahwa browser apa pun membutuhkannya. Apakah Anda punya contoh?
shark555
Saya dapat memberi nama beberapa peramban yang memiliki pengaturan preferensi apakah mau atau tidak mencari favicon.icosecara otomatis. Jadi, jika Anda ingin memastikan bahwa ikon Anda muncul, lebih baik sertakan tautan dalam HTML Anda. Omong-omong, file .png biasanya lebih kecil daripada file .ico yang sebanding.
Tn. Lister
Tolong beri nama Tuan Lister :) Tidak shark555, saya tidak bisa menyebutkan nama ...
user1087110
5
Firefox (dan browser berbasis Gecko lainnya seperti SeaMonkey) memiliki beberapa pengaturan untuk menyempurnakan perilakunya. browser.chrome.faviconsatur true akan mencari favicon.ico di root; jika salah, itu hanya akan memuat ikon jika ditentukan di halaman HTML. Lihat kb.mozillazine.org/Browser.chrome.favicons dan halaman terkait.
Tn. Lister
Kemungkinan duplikat dari Apakah Anda harus menyertakan <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?
Dan Dascalescu

Jawaban:

253

Untuk memilih lokasi atau tipe file yang berbeda (misalnya PNG atau SVG ) untuk favicon:
Salah satu alasannya adalah Anda ingin memiliki ikon di lokasi tertentu, mungkin di folder gambar atau yang serupa. Sebagai contoh:

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

Lokasi yang berbeda ini bahkan dapat berupa CDN, seperti halnya SO <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.

Untuk mempelajari lebih lanjut tentang penggunaan jenis file lain seperti PNG, periksa pertanyaan ini .

Untuk tujuan penghilang cache :
Tambahkan string kueri ke jalur untuk tujuan penghilang cache:

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

Favicons sangat di-cache dan ini cara yang bagus untuk memastikan penyegaran.

Catatan kaki tentang lokasi default:
Sejauh pertanyaan pertama: semua browser modern akan mendeteksi favicon di lokasi default, jadi itu bukan alasan untuk menggunakan a linkuntuk itu.

Catatan kaki tentang rel="icon":
Sebagaimana ditunjukkan oleh jawaban @ Semanino , menggunakan rel="shortcut icon"adalah teknik lama yang diperlukan oleh versi Internet Explorer yang lebih lama, tetapi dalam kebanyakan kasus dapat diganti dengan rel="icon"instruksi yang lebih benar . Artikel @Semanino mendasarkan ini pada tautan yang benar ke spek yang sesuai yang menunjukkan relnilai shortcutbukan opsi yang valid.

Jeroen
sumber
Haruskah ini masuk dalam <head>tag?
Max Williams
1
@ MaxWilliams Ya. (Lihat "Elemen induk yang diizinkan" dalam dokumen MDN atau "Konteks" dalam spesifikasi W3 ).
Jeroen
1
Ini tahun 2016 - dan Chrome masih (atau lagi?) Tidak mengenali favicon.ico default di root jika Anda menentukan juga ikon lainnya ...
Sebastian G. Marinescu
52

Harap dicatat bahwa spesifikasi HTML5 dari W3C dan standar WhatWG

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

Perhatikan nilai atribut "rel"!

Nilai shortcut iconuntuk relatribut adalah ekstensi spesifik Internet Explorer yang sangat lama dan tidak digunakan lagi .

Jadi tolong pertimbangkan untuk tidak menggunakannya lagi dan memperbarui file Anda sehingga memenuhi standar dan ditampilkan dengan benar di semua browser.

Anda mungkin juga ingin melihat posting hebat ini: rel = "ikon pintasan" yang dianggap berbahaya

Semanino
sumber
1
Tidak cukup "usang" (itu tidak pernah benar-benar bagian dari spesifikasi apa pun). Namun, spesifikasi HTML5 menyatakan, "Karena alasan historis, kata kunci ikon dapat didahului dengan kata kunci" pintasan ". Jika ada kata kunci" pintasan ", kata kunci harus segera hadir sebelum kata kunci ikon dan dua kata kunci harus dipisahkan hanya dengan satu karakter U + 0020 SPACE. " Perhatikan juga bahwa, "Tidak ada jenis default untuk sumber daya yang diberikan oleh kata kunci ikon."
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" />

Itu semua tergantung pada format gambar mana yang ingin Anda gunakan!
jika Anda memiliki ikon situs web Anda, itu akan jauh lebih baik untuk UX!

demo

tampilkan logo di tab browser

masukkan deskripsi gambar di sini

xgqfrms
sumber
iconhandbook.co.uk/reference/examples/favicons tautan: mathiasbynens.be/notes/rel-shortcut-icon#comments tautan: html.spec.whatwg.org/multipage/semantics.html#rel-icon tautan:
xgqfrms
UX tidak ada hubungannya dengan ini.
paddotk
@addotk yang saya maksud adalah bahwa pengguna dapat dengan mudah mengetahui mana tab milik situs web target ketika membuka multi-tab di browser jika ada ikon favicon yang ditampilkan di tab.
xgqfrms
1

Kami dapat menambahkan untuk semua perangkat dengan ukuran khusus platform

<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
sumber
0

Intinya adalah tidak semua browser akan mencari file favicon.ico Anda . Beberapa browser memungkinkan pengguna untuk memilih apakah akan terlihat secara otomatis atau tidak. Oleh karena itu, untuk memastikan bahwa itu akan selalu muncul dan dilihat, Anda harus mendefinisikannya.

animuson
sumber
6
Terima kasih atas animuson komentar Anda. Bisakah Anda memberi nama beberapa browser yang tidak akan terlihat secara otomatis?
user1087110
11
@ user1087110: Saya tidak tahu apa-apa dari atas kepala saya, dan jujur ​​siapa yang peduli. Intinya adalah Anda tidak bisa berasumsi itu akan dan Anda harus memperhitungkan yang tidak.
animuson
Karena tidak relevan lagi, Anda dapat menghapus jawaban Anda untuk membersihkan halaman.
ayam