È necessario aggiungere un tag di collegamento per favicon.ico?

153

Esistono browser moderni che non rilevano automaticamente favicon.ico? C'è qualche motivo per aggiungere il tag di collegamento per favicon.ico?

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

La mia ipotesi è che è necessario includerlo nel documento HTML solo se si decide di utilizzare GIF o PNG ...

html favicon html-head

— user1087110
fonte

Non ho mai visto che nessun browser ne avesse avuto bisogno. Hai qualche esempio?

— Shark555,

Posso nominare alcuni browser che hanno impostazioni di preferenza se andare o no a cercare favicon.icoautomaticamente. Quindi, se vuoi essere sicuro che venga visualizzata la tua icona, includi meglio un link nel tuo HTML. A proposito, i file .png sono generalmente più piccoli dei file .ico comparabili.

— Lister,

Per favore, chiami un po 'Mr Lister :) No shark555, non posso nominare nessuno ...

— user1087110

5

Firefox (e altri browser basati su Gecko come SeaMonkey) ha diverse impostazioni per perfezionare il suo comportamento. browser.chrome.faviconsimpostato su true cercherà favicon.ico nella radice; se falso, caricherà un'icona solo se specificato nella pagina HTML. Vedi kb.mozillazine.org/Browser.chrome.favicons e pagine correlate.

— Lister,

Possibile duplicato di Devi includere <link rel = "icon" href = "favicon.ico" type = "image / x-icon" />?

— Dan Dascalescu,

253

Per scegliere una posizione o un tipo di file diversi (ad es. PNG o SVG ) per la favicon:
uno dei motivi può essere che si desidera avere l'icona in una posizione specifica, magari nella cartella delle immagini o qualcosa di simile. Per esempio:

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

Questa diversa posizione potrebbe persino essere una CDN, proprio come SO sembra avere a che fare <link rel="shortcut icon" href="http://cdn.sstatic.net/stackoverflow/img/favicon.ico">.

Per ulteriori informazioni sull'uso di altri tipi di file come PNG, consulta questa domanda .

A scopo di busting della cache :
aggiungere una stringa di query al percorso per scopi di busting della cache:

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

I favicon sono pesantemente memorizzati nella cache e questo è un ottimo modo per garantire un aggiornamento.

Nota a piè di pagina sulla posizione predefinita: per
quanto riguarda la prima parte della domanda: tutti i browser moderni rileverebbero una favicon nella posizione predefinita, quindi non è un motivo per usarne uno link.

Nota a piè di pagina rel="icon":
come indicato dalla risposta di @ Semanino , l'utilizzo rel="shortcut icon"è una vecchia tecnica richiesta dalle versioni precedenti di Internet Explorer, ma nella maggior parte dei casi può essere sostituita rel="icon"dall'istruzione più corretta . L'articolo @Semanino basato su questo si collega correttamente alle specifiche appropriate che mostrano che il relvalore di shortcutnon è un'opzione valida.

— Jeroen
fonte

Questo dovrebbe andare nel <head>tag?

— Max Williams,

1

@MaxWilliams Sì. (Vedi "Elementi padre consentiti" nei documenti MDN o "Contesti" nelle specifiche W3 ).

— Jeroen,

1

È il 2016 - e Chrome continua (o ancora?) A non riconoscere il favicon.ico predefinito nella radice se specifichi anche altre icone ...

— Sebastian G. Marinescu,

52

Si noti che entrambe le specifiche HTML5 di W3C e WhatWG standardizzano

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

Nota il valore dell'attributo "rel"!

Il valore shortcut iconper l' relattributo è un vecchio interno specifico di Internet Explorer e deprecato .

Quindi considera di non usarlo più e di aggiornare i tuoi file in modo che siano conformi agli standard e vengano visualizzati correttamente in tutti i browser.

Potresti anche dare un'occhiata a questo fantastico post: rel = "icona scorciatoia" considerata dannosa

— Semanino
fonte

1

Non del tutto "deprecato" (non è mai stato effettivamente parte di alcuna specifica). Tuttavia, la specifica HTML5 afferma: "Per motivi storici, la parola chiave icona può essere preceduta dalla parola chiave" collegamento ". Se la parola chiave" collegamento "è presente, deve essere presente immediatamente prima della parola chiave icona e le due parole chiave devono essere separate solo per un singolo carattere U + 0020 SPACE. " Si noti inoltre che "Non esiste un tipo predefinito per le risorse fornite dalla parola chiave icona".

— 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" />

Tutto dipende da quale formato di immagine ti piace usare!
se hai un'icona del tuo sito Web, sarà molto meglio per UX!

dimostrazione

mostra il logo nella scheda del browser

— xgqfrms
fonte

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

— xgqfrms

UX non ha nulla a che fare con questo.

— Paddotk,

@paddotk ciò che intendo è che l'utente può facilmente dire quale scheda appartiene al sito Web di destinazione quando si aprono più schede nel browser se è presente un'icona favicon nella scheda.

— xgqfrms,

1

Possiamo aggiungere per tutti i dispositivi con dimensioni specifiche della piattaforma

<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
fonte

0

La linea di fondo non è che tutti i browser cercheranno effettivamente il tuo file favicon.ico . Alcuni browser consentono agli utenti di scegliere se deve apparire automaticamente. Pertanto, al fine di garantire che venga sempre visualizzato e visualizzato, è necessario definirlo.

— animuson
fonte

6

Grazie per il tuo commento animuson. Puoi nominare alcuni browser che non appariranno automaticamente?

— user1087110

11

@ user1087110: Non ne conosco nulla in testa e onestamente chi se ne frega. Il punto è che non puoi supporre che lo farà e devi tenere conto di quelli che non lo faranno.

— animuson

Dal momento che non è più pertinente, è possibile eliminare la risposta per ripulire la pagina.

— polli