Una favicon è la piccola immagine che identifica un sito Web nelle schede del browser e nei segnalibri. Il nome deriva da "icona preferita". Offre ai lettori un modo visivo per trovare un sito tra le pagine aperte, anche quando una scheda è troppo stretta per mostrarne il titolo. I motori di ricerca possono anche visualizzare la favicon di un sito accanto a un risultato. Definizione favicon di MDN descrive questi usi comuni del browser.
Il cerchio arancione segmentato diSearchVector è un esempio. Il diagramma di copertina utilizza la sua vera risorsa di icone per spiegare la connessione tra un file immagine, l'HTML di una pagina e il browser. È un diagramma didattico, non uno screenshot di un risultato di ricerca.
Pronto per implementarne uno? Passa a impostazione HTML o risoluzione dei problemi relativi alle icone mancanti.
Favicon, logo e immagine social: quale è quale?
Un logo è l'identità visiva più ampia di un'azienda. Potrebbe includere un simbolo, un nome completo e uno slogan. Una favicon è una piccola applicazione di quell'identità, solitamente un simbolo semplificato che rimane riconoscibile anche a dimensioni ridotte. La riduzione delle dimensioni di un intero marchio denominativo spesso rende le sue lettere indistinguibili.
| Risorsa | Principale job |
|---|---|
| Favicon | Identificare la pagina in una scheda del browser o segnalibro |
| Logo intestazione | Identifica il brand all'interno del layout di pagina |
| Anteprima social immagine | Illustra un collegamento condiviso con un'immagine più grande |
| Icona della schermata iniziale | Rappresenta un sito Web salvato o un'app Web installata su un dispositivo |
La modifica del logo dell'intestazione non aggiorna necessariamente la favicon. Potrebbero essere file separati controllati da impostazioni diverse. Allo stesso modo, la sostituzione di un'immagine di anteprima social non ripara l'icona di una scheda mancante. Inizia identificando la superficie sbagliata, quindi trova l'impostazione che la fornisce.
Scegli un'icona che sopravviva alle piccole dimensioni
Inizia con una tela quadrata e una silhouette semplice. Esporta un'immagine sorgente di grandi dimensioni, quindi visualizzala in anteprima a 16×16 e 32×32 come pratico controllo di progettazione. Quelle anteprime provano la leggibilità; non affermano che ogni browser riproduca l'icona con una dimensione fissa. Cerca tratti che scompaiono, caratteri affollati e aree trasparenti che si fondono con lo sfondo della scheda.
Rivedere il marchio sia su sfondi chiari che su sfondi scuri. Un sottile contorno scuro può svanire su una scheda scura, mentre un simbolo chiaro può scomparire su una scheda chiara. Una forma solida con contrasto intenzionale è spesso più facile da riconoscere. Non fare affidamento solo sul colore: un contorno distintivo aiuta comunque quando le icone sono visivamente simili.
Conserva un file sorgente che il tuo team può modificare. L'esportazione di una copia più grande di una miniatura sfocata non ne ripristina i dettagli. Per un rebranding, approva la piccola icona accanto al logo principale in modo che il sito Web, i segnalibri e le scorciatoie salvate sembrino correlati.
Aggiungi una favicon con un esempio HTML reale
SearchVector fornisce un vero PNG 512×512 a l'URL dell'immagine favicon. Questa dichiarazione minima punta alla risorsa esistente sul sito SearchVector:
Inserisci la dichiarazione all'interno di del documento. Il percorso relativo alla radice si risolve dal nome host corrente: su SearchVector richiede /favicon.png da SearchVector; sul tuo dominio richiede quel file dal tuo dominio. Per il tuo sito, carica la risorsa del tuo marchio e utilizza il suo percorso effettivo. La copia del tag senza caricare l'immagine lascia un riferimento non funzionante.
L'attributo rel identifica la risorsa come un'icona. href lo individua, tipo ne descrive il formato e dimensioni descrive le dimensioni dell'immagine. Scrivere "512x512" non ridimensiona un file. Ispeziona l'immagine esportata e mantieni accurata la dichiarazione.
SearchVector dichiara anche le alternative SVG e ICO. I browser possono scegliere tra le dichiarazioni delle icone utilizzando attributi come tipo e dimensione, come spiegato in Riferimento al collegamento delle icone di MDN. Dichiarazioni multiple non rappresentano quindi automaticamente un problema, ma alternative obsolete possono spiegare aspetti incoerenti.
Se utilizzi un CMS, inizia con l'impostazione dell'icona del sito. Se utilizzi un framework, utilizza il suo meccanismo di metadati stabilito. Quindi esamina l'HTML risultante: un caricamento riuscito in una schermata di amministrazione è solo una parte del lavoro. Evitare di aggiungere una seconda impostazione concorrente prima di verificare cosa viene già restituito dal modello esistente.
Cosa serve Google per l'aspetto nella ricerca
La documentazione favicon di T23｠GoogleT25｠ richiede un'immagine quadrata di almeno 8×8 pixel e consiglia dimensioni maggiori di 48×48. I suoi formati elencati includono PNG e ICO. Non dare per scontato che un SVG funzionante in un browser stabilisca il supporto nella presentazione della ricerca di Google.La home page deve dichiarare l'icona. Googlebot deve accedere a quella home page e Googlebot-Image deve accedere al file dell'icona. Mantieni stabile l'URL dell'icona e utilizza un marchio rappresentativo del sito. Google supporta una favicon per nome host: un sottodominio può averne una propria, ma una sottodirectory non ottiene una favicon di ricerca separata.
L'idoneità non garantisce la visualizzazione. Dopo una modifica, Google deve ripetere la scansione ed elaborare la home page; la sua documentazione dice che ciò può richiedere giorni o settimane. I proprietari dei siti possono richiedere l'indicizzazione della home page tramite Controllo URL. Rinominare ripetutamente l'immagine non è un utile sostituto per controllare l'accesso e consentire il tempo di elaborazione.
Risolvere i problemi relativi a una favicon mancante o obsoleta
Separare tre osservazioni: cosa dichiara l'HTML, cosa restituisce l'URL dell'immagine e cosa visualizza il browser. Una mancata corrispondenza tra loro ti dice dove indagare. Tieni una breve registrazione dell'URL della pagina, dell'URL dell'icona e del risultato anziché modificare più impostazioni contemporaneamente.｟T34���
| Sintomo | Successivo check |
|---|---|
| Nessuna icona su nessuna pagina | Ispeziona la testa per una dichiarazione di icona; apri direttamente l'URL dell'immagine |
| La home page funziona, l'articolo no | Confronta modelli e relativo alla radice rispetto a quello relativo alla pagina percorsi |
| Vecchia icona in un browser | Confronta un nuovo profilo del browser e controlla tutte le alternative dichiarate |
| L'URL dell'immagine apre un pagina web | Verifica la presenza di un reindirizzamento, verifica di accesso o risposta HTML fallback |
| Il browser funziona, la ricerca no | Esaminare separatamente la dichiarazione della home page, l'accesso alla scansione e l'idoneità alla ricerca |
Una risposta etichettata 200 non è sufficiente se il server invia una pagina di accesso o un fallback HTML generico. Nel pannello Rete del browser, controlla l'URL finale della richiesta di icona, il tipo di contenuto della risposta e l'anteprima. Un PNG dovrebbe effettivamente essere decodificato come PNG. Controlla anche se un CDN sta ancora servendo un file più vecchio dopo l'aggiornamento dell'origine.
Per un'indagine sulla cache, aprire direttamente l'immagine e confrontarla con un nuovo profilo del browser. Svuotare la cache può aiutare a isolare la causa, ma gli utenti non dovrebbero aver bisogno di eseguire un ripristino speciale affinché il sito Web funzioni. Controllare la risorsa distribuita e la configurazione della cache prima di considerare un aggiornamento locale come una correzione permanente.
Esempio risolto: una pagina nidificata perde la sua icona
Considera un sito immaginario la cui home page mostra l'icona giusta, mentre un articolo in /blog/ no. Entrambi i modelli contengono href="favicon.png", senza la barra iniziale. Supponendo che non vi sia alcuna sostituzione dell'URL di base, il percorso relativo si risolve accanto alla pagina corrente. Potrebbe funzionare alla radice durante la richiesta di una posizione diversa per l'articolo.
Lo sviluppatore apre la richiesta dell'icona dell'articolo e scopre che restituisce il fallback HTML del sito invece di un'immagine. La soluzione consiste nel confermare che l'immagine esiste nella radice del sito e modificare la dichiarazione condivisa in href="/favicon.png". Quindi controllano nuovamente la home page e l'articolo. Entrambi ora richiedono la stessa risorsa.
Questo è un esempio diagnostico funzionante, non un incidente segnalato SearchVector. La sua lezione è controllare l'URL richiesto prima di sostituire la grafica. Un'immagine perfettamente valida non può essere d'aiuto se un modello nidificato richiede il file sbagliato.
Un controllo finale prima di chiudere l'attività
- Apre la home page e una pagina nidificata; confermare entrambi dichiarare l'icona desiderata.
- Apri ciascuna alternativa dichiarata e verifica che appartenga al marchio corrente.
- Conferma il caricamento dell'immagine prevista senza autenticazione o fallback HTML.
- Ispeziona la piccola icona nel browser chiaro e scuro aspetti.
- Esaminare l'idoneità Google separatamente, quindi registrare la modifica e consentire il tempo di elaborazione.
Per una revisione più ampia del sito Web, continuare con Verifica sito Web di SearchVector o con il relativo Web Page Crawler. Mantieni l'immagine diretta e i controlli HTML sopra come prova della tua favicon; una revisione generale della pagina non garantisce il modo in cui un motore di ricerca visualizzerà il tuo marchio.
Un'attività favicon completata ha un'immagine riconoscibile, una dichiarazione corretta e un URL di risorsa funzionante nei modelli di pagina. Verifica prima quei pezzi di cemento. Quindi monitora l'aspetto della ricerca senza confondere un aggiornamento ritardato con un'implementazione del browser non funzionante.
