103

Domanda

Qual è la migliore pratica per creare una favicon su un sito web?
ed è un file .ico con immagini sia 16x16 che 32x32 meglio di un file .png con solo 16x16?
Il metodo giusto preferito oggi potrebbe non funzionare in browser ragionevolmente vecchi?

Metodo 1

Posizionare un file denominato favicon.iconella directory principale è un modo. Il browser richiede sempre quel file. Puoi vederlo nei file di registro di Apache.

Metodo 2

Tag HTML nella <head>sezione:

<link rel="shortcut icon" href="/images/favicon.png (or ico?)" type="image/x-icon" />

html favicon

— bytecode77
fonte

154

Esistono diversi modi per creare una favicon. Il modo migliore per te dipende da vari fattori:

Il tempo che puoi dedicare a questo compito. Per molte persone, questo è "il più veloce possibile".
Gli sforzi che sei disposto a fare. Ad esempio, disegnare a mano un'icona 16x16 per ottenere risultati migliori.
Vincoli specifici, come supportare un browser specifico con specifiche dispari.

Primo metodo: usa un generatore di favicon

Se vuoi portare a termine il lavoro bene e velocemente, puoi usare un generatore di favicon . Questo crea le immagini e il codice HTML per tutti i principali browser desktop e mobili. Informativa completa: sono l'autore di questo sito.

Vantaggi di tale soluzione: è veloce e tutte le considerazioni sulla compatibilità sono state già affrontate per te.

Secondo metodo: crea un favicon.ico (solo browser desktop)

Come suggerisci, puoi creare un favicon.icofile che contiene immagini 16x16 e 32x32 (nota che Microsoft consiglia 16x16, 32x32 e 48x48 ).

Quindi, dichiaralo nel tuo codice HTML:

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

Questo metodo funziona con tutti i browser desktop, vecchi e nuovi. Ma la maggior parte dei browser mobili ignorerà la favicon.

Circa il tuo suggerimento di posizionare il favicon.icofile nella root e non dichiararlo: attenzione, sebbene questa tecnica funzioni sulla maggior parte dei browser, non è affidabile al 100%. Ad esempio, Windows Safari non riesce a trovarlo (garantito: questo browser è in qualche modo deprecato su Windows, ma hai capito). Questa tecnica è utile se combinata con le icone PNG (per i browser moderni).

Terzo metodo: crea un favicon.ico, un'icona PNG e un'icona Apple Touch (tutti i browser)

Nella tua domanda, non menzioni i browser mobili. La maggior parte di loro ignorerà il favicon.icofile. Sebbene il tuo sito possa essere dedicato ai browser desktop, è probabile che tu non voglia ignorare del tutto i browser mobili.

Puoi ottenere una buona compatibilità con:

favicon.ico, vedi sopra.
Un'icona PNG 192x192 per Android Chrome
Un'icona Apple Touch 180x180 (per iPhone 6 Plus; un altro dispositivo la ridimensionerà in base alle necessità).

Dichiarali con

<link rel="shortcut icon" href="/path/to/icons/favicon.ico">
<link rel="icon" type="image/png" href="/path/to/icons/favicon-192x192.png" sizes="192x192">
<link rel="apple-touch-icon" sizes="180x180" href="/path/to/icons/apple-touch-icon-180x180.png">

Questa non è la storia completa, ma nella maggior parte dei casi è abbastanza buona.

— philippe_b
fonte

In realtà, <link rel = "shortcut icon" href = "/ path / to / icons / favicon.ico"> ancora spesso utilizzato non è un'opzione valida. Non è nemmeno standard e solo IE lo supporta. E a partire da IE 9, IE supporta il metodo predefinito "guarda root". Quindi non è un modo per supportare tutti i browser, ma solo un modo per supportare IE <9. Affidati al metodo (ora standard) 'place in root' o, se insisti, aggiungi: <link rel = "icon" href = "/ favicon.ico"> (Anche se neanche questo è standard)

— HappyMe

Il meccanismo della favicon si è decisamente evoluto nel corso degli anni. Ho notato oggi la specifica di MDN ora dice: Il tipo di collegamento di collegamento è spesso visto prima dell'icona, ma questo tipo di collegamento non è conforme, ignorato e gli autori web non devono più usarlo. Significato uso <link ref="icon" ...>piuttosto che <link ref="shortcut icon" ...> developer.mozilla.org/en-US/docs/Web/HTML/Link_types

— broc.seib

Grazie @ broc.seib per il feedback. Nel momento in cui scrivo questo commento, ho perso traccia del motivo per cui era "icona di collegamento" e non "icona". Certo, Mozilla ha la sua voce in questa storia. Ma non dobbiamo dimenticare perché questa dichiarazione è qui in primo luogo: per supportare i browser legacy, come IE 8. I browser più recenti utilizzano icone PNG, che sono più pulite e più leggere di ICO. Il mio piano per RealFavicon è di rimuovere completamente questa dichiarazione. Prima di questo, devo eseguire test su IE 7, 8 e 9.

— philippe_b

Per non parlare del fatto che se "vedi l'origine" in questa pagina, su Stack Overflow, ref="shortcut icon"è esattamente quello che usano.

— Steven Ventimiglia

@laggingreflex /favicon.icoè il metodo preferito. Questo è ciò che ottieni quando visiti www.google.com. Tuttavia, potresti non voler inquinare la tua directory principale con un'icona. In tal caso, il markup funziona perfettamente.

— philippe_b

puoi lavorare con questo sito web per generare favin.ico
Consiglio di utilizzare il formato .ico perché il png non funziona con il metodo 1 e ico potrebbe avere più dettagli!
entrambi i metodi funzionano con tutti i browser ma quando funziona automaticamente cosa vuoi digitare un codice per esso? quindi penso che il metodo 1 sia migliore.

— a828h
fonte

Ho usato https://iconifier.net ho caricato la mia immagine, scaricato il file zip delle immagini, aggiunto immagini al mio server, seguito le indicazioni sul sito inclusa l'aggiunta dei link al mio index.html e ha funzionato. La mia favicon ora viene visualizzata sul mio iPhone in Safari quando "Aggiungi alla schermata iniziale"

— Hblegg
fonte

Qual è la migliore pratica per creare una favicon su un sito web?

Primo metodo: usa un generatore di favicon

Secondo metodo: crea un favicon.ico (solo browser desktop)

Terzo metodo: crea un favicon.ico, un'icona PNG e un'icona Apple Touch (tutti i browser)