Ho alcune pagine statiche che sono solo puro HTML, che visualizziamo quando il server non funziona. Come posso mettere una favicon che ho creato (è 16x16px e si trova nella stessa directory del file HTML; si chiama favicon.ico) come l'icona "tab" per così dire? Ho letto su Wikipedia e preso in esame alcuni tutorial e ho implementato quanto segue:

<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

Ma non vuole ancora funzionare. Sto usando Chrome per testare i siti. Secondo Wikipedia .ico è il miglior formato di immagine che funziona su tutti i tipi di browser.

Aggiornare

Non sono riuscito a farlo funzionare localmente anche se il codice verifica che funzionerà correttamente solo una volta che il server ha iniziato a servire il sito. Prova a inviarlo al server e aggiorna la cache e dovrebbe funzionare correttamente.

html static favicon

— La leggenda
fonte

a chi non dici a nessuno dei tuoi amici di controllarlo su di te su un altro sistema, lo stesso problema è con uno dei miei clienti che il mio sistema si presenta bene e si lamenta che favicon non si presenta, io per lo più uso il primo del tuo esempio e è corretto. buona fortuna.

— mt

3

Possibile duplicato di Come aggiungere un'icona della scheda del browser (favicon) per un sito Web?

— Michał Perłakowski,

Il tuo esempio funziona ora su Chrome.

— Damjan Pavlica,

Interessante, il sito web dal vivo ha offerto la favicon bene, ma quando si visualizza il file localmente e non lo si serve attraverso un server locale (b / c è un semplice sito statico - sì!), La favicon non viene visualizzata. Con il senno di poi ha senso, i server lo servono automaticamente. L'aggiunta <link rel="icon" type="image/x-icon" href="favicon.ico">alla head(accanto alle varianti 32, 16 e 180 favicon link) ha risolto il problema a livello locale. Dato che avevo incluso links per le dimensioni più grandi dell'icona e il manifest, non ci ho pensato due volte sul perché favicon.iconon si presentasse! :-)

— SherylHohman,

934

Puoi creare un'immagine .png e quindi utilizzare uno dei seguenti frammenti tra i <head>tag dei tuoi documenti HTML statici:

<link rel="icon" type="image/png" href="/favicon.png"/>
<link rel="icon" type="image/png" href="https://example.com/favicon.png"/>

— Hazy McGee
fonte

3

hai provato a mettere "icona scorciatoia" in rel = per i tuoi collegamenti ico e hai inserito un / prima di favicon.ico su entrambi solo per affermare che si trova nella directory webroot?

— Hazy McGee,

1

ho provato anche quello .. man lol, ho intenzione di riavviare tutto e poi provare a fare il boot e vedere se forse il suo incasso è sbagliato o qualcosa del genere ..

— TheLegend

5

Lo giuro - ho avuto gli stessi problemi dopo aver aggiunto il codice - ci è voluto forse un giorno per visualizzare l'icona al posto della casella grigia che di solito ha - prova a scaricare la cronologia della cache del browser ecc. E se hai copiato il mio codice assicurati di cambia example.com in ur domain lol

— Hazy McGee

2

C'è un argomento href ridondante / nella riga superiore. Una volta rimosso, funziona come un fascino. Dovrebbe essere: <link rel = "icona scorciatoia" href = "favicon.png" type = "image / png">

— drpawelo

4

w3.org/2005/10/howto-favicon dice di includere un profileattributo nel headtag ... è necessario?

— Rakib,

228

La maggior parte dei browser raccoglierà favicon.icodalla directory principale del sito senza che sia necessario dirlo; ma non sempre lo aggiornano subito con uno nuovo.

Tuttavia, di solito vado per il secondo dei tuoi esempi:

<link rel='shortcut icon' type='image/x-icon' href='/favicon.ico' />

— Codecraft
fonte

deve essere prima dei metadati o dei tag di script ?? o no un problema

— TheLegend

2

Finché si trova nella sezione <head>, non dovrebbe importare, perché non dipende da qualcos'altro per funzionare.

— Codecraft

127

In realtà, per far funzionare la tua favicon in tutti i browser, devi avere più di 10 immagini nelle dimensioni e nei formati corretti.

Ho creato un'app ( faviconit.com ) in modo che le persone non debbano creare manualmente tutte queste immagini e i tag corretti.

Spero ti piaccia.

— Eduardo Russo
fonte

6

Mi è piaciuta molto l'app, no bs - direttamente ad essa, e l'immagine può essere modificata prima di creare tutte le favicon +1 per te per avermi risparmiato un sacco di tempo :)

— SidOfc

1

D'accordo, questa è un'ottima app. Anche se non credo che tutte quelle dimensioni dell'immagine siano del tutto necessarie, adoro che le generi e il markup richiesto, ecc. Grazie!

— andrhamm,

Scopri una fantastica app: +1 :. Aiutato molto o /

— Renato Gomes il

1

Ma è proprietario.

— ctrl-alt-Delor

Non funziona, dàWhoops, looks like something went wrong.

— daka il

68

Quanto segue funziona per me ...

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

— Jet Blue
fonte

40

Converti il tuo file di immagine in stringa Base64 con uno strumento come questo, quindi sostituisci il YourBase64StringHeresegnaposto nello snippet di seguito con la stringa e inserisci la riga nella sezione head HTML:

<link href="data:image/x-icon;base64,YourBase64StringHere" rel="icon" type="image/x-icon" />

Funzionerà al 100% nei browser.

— Farshid
fonte

3

Ho trovato un altro strumento che esegue la conversione in JavaScript senza trasferire dati sul server: jpillora.com/base64-encoder Inoltre, gestisce più file trascinandoli. Salva la pagina per usarla localmente.

— gestire il

1

imho, la migliore soluzione, perché onora la pagina "static html" ed è completamente autonoma all'interno del documento.

— Buffalo Rabor,

1

Soluzione migliore. Funziona anche con file png. <link href = "data: image / png; base64, YourBase64StringHere" rel = "icon" type = "image / png" />

— Rolf of Saxony

1

Ciò causerà l'aggiunta di una stringa lunga ad ogni pagina. Usa inline base64 per piccole immagini che raramente vengono inviate all'utente.

— frodeborli,

In questo modo la tua favicon non viene mai memorizzata nella cache, invii l'intera stringa al client ogni volta, IHMHO utilizza un url e quindi la cache del browser sembra "più pulita / migliore"

— Michiel

34

Uso Sintassi: _{^{.ico, .gif, .png,.svg}}

Questa tabella mostra come utilizzare i faviconprincipali browser. L'implementazione standard utilizza un elemento di collegamento con un attributo rel nella sezione del documento per specificare il formato e il nome e il percorso del file.

Si noti che la maggior parte dei browser darà la precedenza a un favicon.icofile che si trova nella radice del sito Web ( ignorando quindi qualsiasi tag di collegamento icona).

                                           Edge   Firefox   Chrome   I.E.   Opera   Safari  
 ---------------------------------------- ------ --------- -------- ------ ------- -------- 
  <link rel="shortcut icon"                Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/myicon.ico">                                                    

  <link rel="icon"                         Yes    Yes       Yes      9      Yes     Yes     
   type="image/vnd.microsoft.icon"                                                          
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/x-icon"     Yes    Yes       Yes      9      Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon"                         Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.ico">                                                     

  <link rel="icon" type="image/gif"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.gif">                                                     

  <link rel="icon" type="image/png"        Yes    Yes       Yes      11     Yes     Yes     
   href="http://example.com/image.png">                                                     

  <link rel="icon" type="image/svg+xml"    Yes    Yes       Yes      Yes    Yes     Yes     
   href="http://example.com/image.svg">

Supporto per il formato di file

La tabella seguente illustra il supporto del formato di file immagine per favicon:

                                         Animated                                
  Browser             ICO   PNG    GIF    GIF's   JPEG   APNG   SVG   
 ------------------- ----- ------ ------ ------- ------ ------ ------ 
  Edge                Yes   Yes    Yes    No      ?      ?      ?     
  Firefox             1.0   1.0    1.0    Yes     Yes    3.0    41.0  
  Google Chrome       Yes   Yes    4      No      4      No     No    
  Internet Explorer   5.0   11.0   11.0   No      No     No     No    
  Safari              Yes   4      4      No      4      No     No    
  Opera               7.0   7.0    7.0    7.0     7.0    9.5    44.0

Implementazione del browser

La tabella seguente illustra le diverse aree del browser in cui sono visualizzate le favicon:

                      Address     Address bar 'Links'                       Drag to  
  Browser             Bar         drop-down     bar       Bookmarks   Tabs   desktop  
 ------------------- ------------ ----------- --------- ----------- ------ --------- 
  Edge                No            Yes         Yes       Yes         Yes    Yes      
  Firefox             until v12     Yes         Yes       Yes         Yes    Yes      
  Google Chrome       No            No          Yes       Yes         1.0    No       
  Internet Explorer   7.0           No          5.0       5.0         7.0    5.0      
  Safari              Yes           Yes         No        Yes         12     No       
  Opera               v7–12: Yes    No          7.0       7.0         7.0    7.0      
                      > v14: No

I file delle icone possono avere dimensioni 16 × 16 , 32 × 32 , 48 × 48 o 64 × 64 pixel e profondità di colore di 8 bit , 24 bit o 32 bit .

Sebbene le informazioni sopra riportate siano generalmente corrette, ci sono alcune variazioni / eccezioni in determinate situazioni.

^{Vedi l'articolo completo alla fonte su Wikipedia.}

Aggiornamento: ("maggiori informazioni")

Consulta i "nuovi" criteri di Google (2019) per definire una favicon da mostrare nei risultati di ricerca .
Puoi recuperare (programmaticamente o manualmente) la favicon memorizzata nella cache di Google per qualsiasi dominio con un URL come:https://www.google.com/s2/favicons?domain=stackoverflow.com

L'utilizzo dell'URL sopra riportato direttamente in un <img>tag restituisce: " ".
Ho usato realfavicongenerator.net un paio di volte; è molto approfondito, generando / personalizzando ogni possibile variante favicon di cui potresti aver bisogno per la massima compatibilità. (Tuttavia, se siete alla ricerca di una singola immagine favicon, questo è potrebbe non essere lo strumento per voi!) Per la conversione di file semplice (ad es., PNGPer ICO, ecc) mi piace onlineconvertfree.com .

— ashleedawg
fonte

15

Se la favicon è un'immagine di tipo png, non funzionerà nelle versioni precedenti di Chrome. Tuttavia funzionerà perfettamente in FireFox. Inoltre, non dimenticare di svuotare la cache del browser mentre lavori su tali cose. Molte volte, il codice va bene, ma la cache è il vero colpevole.

— Tanveer Shaikh
fonte

1

Va bene; è molto difficile installare / mantenere comunque una vecchia versione di Chrome

— Ben Leggiero

14

Come raccomandato da W3.org , è possibile utilizzare l' relattributo per raggiungere questo obiettivo.

Esempio:

<head>
<link rel="icon" 
      type="image/png" 
      href="http://example.com/myicon.png">
...

— Rahul Desai
fonte

8

<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>
<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
<link rel="shortcut icon" type="image/png" href="http://example.com/favicon.png"/>

— shilovk
fonte

7

<link rel="shortcut icon" type="image/png" href="/favicon.png"/>
 <link rel="shortcut icon" type="image/ico" href="http://example.com/favicon.ico"/>

Questo ha funzionato per me

— Anand Dwivedi
fonte

4

Anche se potrebbe funzionare, non puoi usare image / png come Tipo MIME - perché non è corretto considerando che stai usando .ico

— zanderwar

5

Conosco i suoi post più vecchi ma sto ancora postando per qualcuno come me. Questo ha funzionato per me

<link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />

metti la tua icona favicon nella directory principale ..

— Cyclotron3x3
fonte

4

come nota aggiuntiva che potrebbe aiutare qualcuno un giorno.

Non è possibile eseguire l'eco di nulla nella pagina prima:

Hello
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>

non caricherà ico

<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
<link rel="shortcut icon" type="image/ico" href="/webico.ico"/>
Hello

funziona bene

— bart2puck
fonte

3

Questo perché dovrebbe trovarsi nella sezione head di un documento HTML e, se non lo è, viene ignorato dalla maggior parte dei browser.

— Eric Sebasta,

Sì, volevo solo metterlo qui nel caso qualcuno incontrasse un problema. Il mio problema era che "ciao" era un po 'di codice di debug e mi ha lasciato perplesso.

— bart2puck,

3

Ho usato convert -resize 16x16 img.png favicon.ico(su Linux Konsole) per convertire la mia immagine e aggiungere <link rel="icon" href="images/favicon.ico" type="image/png" sizes="16x16">alla mia intestazione e tutto funziona perfettamente.

— DMX
fonte

2

Nota che se il tuo sito funziona come subfolderie:

http://localhost/MySite/

Dovrai tenerne conto. Se lo stai facendo da ASP.NETun'app, tutto ciò che devi fare è aggiungere una ~nella parte anteriore dell'URL:

<link rel="shortcut icon" type="image/x-icon" href="~/favicon.ico" />

— Serj Sagan
fonte

2

Secondo l'aggiornamento dell'OP, non veniva mostrato localmente, ma come per l'aggiornamento dell'OP, una volta caricato sul server, andava bene.

Poiché si tratta di un sito Web HTML semplice e statico, ho il lusso di lavorarci su senza eseguire un server web locale.
Un server web generalmente servirà automaticamente la favicon, se ce n'è una, per impostazione predefinita.

Ma quando non si esegue un server web, il browser stesso non leggerà solo la directory alla ricerca di file aggiuntivi, ad esempio favicon.ico, a meno che non sia elencato nel documento HTML.

Quindi, mentre avevo i seguenti elementi nel headtag:

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">

Non ho incluso anche un riferimento per il semplice favicon.ico.
Anche se, il favicon.icofile è stato incluso, oltre alle immagini sopra elencate.

Una volta ho aggiunto la seguente riga:

    <link rel="icon" type="image/x-icon" href="favicon.ico">

È stato visualizzato anche nel mio browser, durante la visualizzazione del file locale , anche quando non è stato pubblicato tramite un server locale.

Quindi l'icona è apparsa bene quando è stata eseguita sul server live, ma non localmente.

Lo cito esplicitamente perché il generatore di favicon che ho usato, ha gentilmente fornito il codice, le icone, il manifest e le istruzioni. Tuttavia, sebbene includesse l' favicon.icoimmagine, non includeva <link>a quel file nel codice da aggiungere al htmldocumento.
Suppongo che i presupposti del servizio favicon.icoverranno automaticamente offerti e utilizzati da tutti i browser per impostazione predefinita, quindi è necessario aggiungere esplicitamente al tag head solo le versioni "alternative".
Evidentemente, non considerano che quando si visualizzano i file localmente (ovvero non li servono localmente), non siamo interessati a vedere la favicon?

— SherylHohman
fonte

1

Se aggiungi favicon nella cartella root / images con il nome favicon.ico, il browser capirà automaticamente e lo riceverà come favicon. Ho provato e funzionato. il tuo link deve essere www.website.com/images/favicon.ico

Per maggiori informazioni guarda questa risposta:

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

— Sarkhan
fonte

0

Si noti che FF non riesce a caricare un'icona con un ridondante //in URL come /img//favicon.png. Testato su FF 53. Chrome è OK.

— Étienne Bersac
fonte

Questa non è una risposta tanto quanto un commento . (Vedi " Come rispondere ".)

— ashleedawg,

0

Prova a usare il <link rel="icon" type="image/ico" href="images/favi.ico"/>

— subindas pm
fonte

-2

Ho appena usato un png. Assicurati di rimuovere qualsiasi sfondo bianco. rende un'icona migliore

— Tom
fonte

Aggiunta di una favicon a una pagina HTML statica