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

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

— 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