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


578

Ho lavorato su un sito Web e vorrei aggiungere una piccola icona alla scheda del browser.

Come posso farlo in HTML e dove nel codice dovrei posizionarlo (es. Intestazione)? Ho un .pngfile logo che vorrei convertire in un'icona.

Correlati: imposta l'immagine HTML nella scheda del browser .


1
controlla il link per maggiori informazioni. Sei sulla strada giusta.
Reggie,

Carica l'immagine (favicon.ico) con FTP (leggi il nostro tutorial FTP) nella sezione principale del tuo sito web. La sezione principale è l'area del file principale, in cui è possibile memorizzare il file index.html (index.asp, index.php, ecc.) Per la pagina principale. davesite.com sarebbe la radice davesite.com/webstation non sarebbe la radice davesite.com/webstation/html non è neanche root Questo file, posizionato correttamente, verrà caricato come predefinito per l'intero dominio.
Knookie

premi prematuramente il tasto Invio lì - comunque grazie per la risposta. Stavo per dire che la prima parte (che ho incollato sopra) nel link che hai dato non sembra funzionare? Tuttavia, la seconda parte ha funzionato perfettamente - grazie
knookie il

Risposte:


416

Esistono due modi per aggiungere una favicon a un sito Web.

<link rel="icon">

Aggiungi semplicemente il seguente codice <head>all'elemento:

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

Le favicon PNG sono supportate dalla maggior parte dei browser, tranne IE <= 10 . Per compatibilità con le versioni precedenti, è possibile utilizzare le favicon ICO.

Si noti che non c'è bisogno di far precedere iconin relattributo conshortcut più. Dai tipi di collegamento MDN :

Il shortcuttipo di collegamento viene spesso visualizzato in precedenza icon, ma questo tipo di collegamento non è conforme, ignorato e gli autori Web non devono più utilizzarlo .

favicon.ico nella directory principale

Da un'altra risposta SO (di @mercator ):

Tutti i browser moderni (testati con Chrome 4, Firefox 3.5, IE8, Opera 10 e Safari 4) richiederanno sempre un a favicon.icomeno che non sia stata specificata un'icona di collegamento tramite <link>.

Quindi tutto ciò che devi fare è fare in modo che la /favicon.icorichiesta al tuo sito web restituisca la tua favicon. Questa opzione purtroppo non ti consente di usare un'icona PNG.

Vedi anche favicon.png vs favicon.ico - perché dovrei usare PNG invece di ICO?


1
Se desideri TUTTE le icone automaticamente (compresi i dispositivi mobili, le icone "aggiungi alla schermata iniziale", i segnalibri mobili, iOS / Droid, la scheda del desktop, ecc.), La generazione di file ICO, ecc., Nonché il codice HTML copiabile per tali meta file, tutto con un clic, puoi usare questo utile strumento (non sono affiliato) realfavicongenerator.net
Albert Renshaw,

2
Vuoi aggiungere: la tua icona dovrebbe essere di dimensione quadrata, significa che la larghezza è uguale all'altezza.
Nguyen Tan Dat,

3
Non dimenticare di premere Ctrl + F5 durante il test. A volte viene memorizzato nella cache.
Hairi,

Ho Non trovo che semplicemente mettendo un file ICO chiamato favicon.ico nella directory principale del mio sito causato sia Firefox o Chrome per caricarlo. Quindi ho seguito il <link relpercorso. MA, l'indirizzo del mio sito non è elencato in modo affidabile nel DNS, quindi non posso contare su href="http://example.com"per recuperarlo. Così sono arrivato a questa soluzione nel mio index.htmfile:<link rel="icon" href="favicon.ico">
CODE-REaD

426
  1. Usa uno strumento per convertire il tuo png in un file ico. Puoi cercare "generatore favicon" e trovare molti strumenti online.
  2. Posizionare l'indirizzo ico in headun link-tag:

    <link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

3
Grazie! Ho seguito correttamente i passaggi e funziona davvero bene su IE e Firefox, ma per qualche ragione non funziona su Google Chrome, devo cancellare la cache? o cosa devo fare da lì?
PatrickGamboa,


2
La parte "collegamento" può essere rimossa in molte circostanze: stackoverflow.com/questions/13211206/… , mathiasbynens.be/notes/rel-shortcut-icon
bbc

72

Il migliore che ho trovato è http://www.favicomatic.com/ Dico meglio perché mi ha dato la favicon più nitida e non ha richiesto modifiche dopo la loro trasformazione. Genererà favicon a 16x16 e 32x32 e citandole "Ogni maledetta dimensione, signore!" Inoltre, il loro sito sembra interessante ed è facile da usare.

Generano anche l'html che è necessario utilizzare per i file che generano.

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Ho guardato i primi 20 risultati di Google, e questo è stato di gran lunga il migliore.


4
Dovrei mettere tutti questi nel mio tag head per ogni pagina?
Noumenon,

1
Non lo metterei tutto nel tuo tag di testa. Vorrei solo inserire i tag necessari per supportare i dispositivi che è necessario supportare. Sinceramente puoi cavartela con un singolo <link rel = "icon" type = "image / ico" href = "/ images / favicon.ico">
Jared Menard

5
Questa pagina git spiega a cosa servono la maggior parte di queste icone: github.com/audreyr/favicon-cheat-sheet
Jared Menard

14

Esistono diverse icone e persino schermate iniziali che è possibile impostare per vari dispositivi. Questa risposta spiega come supportarli tutti.

Ecco alcuni frammenti che ho usato con collegamenti pertinenti a dove ho raccolto le informazioni. Vedere il mio blog per ulteriori informazioni e ulteriori informazioni sul modello di progetto ASP.NET MVC Boilerplate con tutto questo già pronto per l'uso (compresi i file di immagine di esempio).

Aggiungi il seguente mark-up alla tua testa HTML. Le sezioni commentate sono completamente opzionali. Mentre le sezioni non commentate sono consigliate per coprire tutti gli usi delle icone. Non aver paura, soprattutto se si tratta di commenti per aiutarti.

<!-- Icons & Platform Specific Settings - Favicon generator used to generate the icons below http://realfavicongenerator.net/ -->
<!-- shortcut icon - It is best to add this icon to the root of your site and only use this link element if you move it somewhere else. This file contains the following sizes 16x16, 32x32 and 48x48. -->
<!--<link rel="shortcut icon" href="favicon.ico">-->
<!-- favicon-96x96.png - For Google TV. -->
<link rel="icon" type="image/png" href="/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="/content/images/favicon-32x32.png" sizes="32x32">

<!-- Android/Chrome -->
<!-- manifest-json - The location of the browser configuration file. It contains locations of icon files, name of the application and default device screen orientation. Note that the name field is mandatory.
    https://developer.chrome.com/multidevice/android/installtohomescreen. -->
<link rel="manifest" href="/content/icons/manifest.json">
<!-- theme-color - The colour of the toolbar in Chrome M39+
    http://updates.html5rocks.com/2014/11/Support-for-theme-color-in-Chrome-39-for-Android -->
<meta name="theme-color" content="#1E1E1E">
<!-- favicon-192x192.png - For Android Chrome M36 to M38 this HTML is used. M39+ uses the manifest.json file. -->
<link rel="icon" type="image/png" href="/content/icons/favicon-192x192.png" sizes="192x192">
<!-- mobile-web-app-capable - Run Android/Chrome version M31 to M38 in standalone mode, hiding the browser chrome. -->
<!-- <meta name="mobile-web-app-capable" content="yes"> -->

<!-- Apple Icons - You can move all these icons to the root of the site and remove these link elements, if you don't mind the clutter.
    https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Introduction.html#//apple_ref/doc/uid/30001261-SW1 -->
<!-- apple-mobile-web-app-title - The name of the application if pinned to the IOS start screen. -->
<!--<meta name="apple-mobile-web-app-title" content="">-->
<!-- apple-mobile-web-app-capable - Hide the browsers user interface on IOS, when the app is run in 'standalone' mode. Any links to other pages that are clicked whilst your app is in standalone mode will launch the full Safari browser. -->
<!--<meta name="apple-mobile-web-app-capable" content="yes">-->
<!-- apple-mobile-web-app-status-bar-style - default/black/black-translucent Styles the IOS status bar. Using black-translucent makes it transparent and overlays it on top of your site, so make sure you have enough margin. -->
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black">-->
<!-- apple-touch-icon-57x57.png - Android Stock Browser and non-Retina iPhone and iPod Touch -->
<link rel="apple-touch-icon" sizes="57x57" href="/content/images/apple-touch-icon-57x57.png">
<!-- apple-touch-icon-114x114.png - iPhone (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="114x114" href="/content/images/apple-touch-icon-114x114.png">
<!-- apple-touch-icon-72x72.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 6 -->
<link rel="apple-touch-icon" sizes="72x72" href="/content/images/apple-touch-icon-72x72.png">
<!-- apple-touch-icon-144x144.png - iPad (with 2× display) iOS = 6 -->
<link rel="apple-touch-icon" sizes="144x144" href="/content/images/apple-touch-icon-144x144.png">
<!-- apple-touch-icon-60x60.png - Same as apple-touch-icon-57x57.png, for non-retina iPhone with iOS7. -->
<link rel="apple-touch-icon" sizes="60x60" href="/content/images/apple-touch-icon-60x60.png">
<!-- apple-touch-icon-120x120.png - iPhone (with 2× and 3 display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="120x120" href="/content/images/apple-touch-icon-120x120.png">
<!-- apple-touch-icon-76x76.png - iPad mini and the first- and second-generation iPad (1× display) on iOS = 7 -->
<link rel="apple-touch-icon" sizes="76x76" href="/content/images/apple-touch-icon-76x76.png">
<!-- apple-touch-icon-152x152.png - iPad 3+ (with 2× display) iOS = 7 -->
<link rel="apple-touch-icon" sizes="152x152" href="/content/images/apple-touch-icon-152x152.png">
<!-- apple-touch-icon-180x180.png - iPad and iPad mini (with 2× display) iOS = 8 -->
<link rel="apple-touch-icon" sizes="180x180" href="/content/images/apple-touch-icon-180x180.png">

<!-- Apple Startup Images - These are shown when the page is loading if the site is pinned https://gist.github.com/tfausak/2222823 -->
<!-- apple-touch-startup-image-1536x2008.png - iOS 6 & 7 iPad (retina, portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-1496x2048.png - iOS 6 & 7 iPad (retina, landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-768x1004.png - iOS 6 iPad (portrait) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-748x1024.png - iOS 6 iPad (landscape) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)">
<!-- apple-touch-startup-image-640x1096.png - iOS 6 & 7 iPhone 5 -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-640x920.png - iOS 6 & 7 iPhone (retina) -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<!-- apple-touch-startup-image-320x460.png - iOS 6 iPhone -->
<link rel="apple-touch-startup-image"
      href="/content/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)">

<!-- Windows 8 Icons - If you add an RSS feed, revisit this page and regenerate the browserconfig.xml file. You will then have a cool live tile!
     browserconfig.xml - Windows 8.1 - Has been added to the root of the site. This points to the tile images and tile background colour. It contains the following images:
     mstile-70x70.png - For Windows 8.1 / IE11.
     mstile-144x144.png - For Windows 8 / IE10.
     mstile-150x150.png - For Windows 8.1 / IE11.
     mstile-310x310.png - For Windows 8.1 / IE11.
     mstile-310x150.png - For Windows 8.1 / IE11.
     See http://www.buildmypinnedsite.com/en and http://msdn.microsoft.com/en-gb/library/ie/dn255024%28v=vs.85%29.aspx. -->
<!-- application-name - Windows 8+ - The name of the application if pinned to the start screen. -->
<!--<meta name="application-name" content="">-->
<!-- msapplication-TileColor - Windows 8 - The tile colour which shows around your tile image (msapplication-TileImage). -->
<meta name="msapplication-TileColor" content="#5cb95c">
<!-- msapplication-TileImage - Windows 8 - The tile image. -->
<meta name="msapplication-TileImage" content="/content/images/mstile-144x144.png">

Il mio file browserconfig.xml. Spiegazione completa sopra.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="/Content/Images/mstile-70x70.png"/>
      <square150x150logo src="/Content/Images/mstile-150x150.png"/>
      <square310x310logo src="/Content/Images/mstile-310x310.png"/>
      <wide310x150logo src="/Content/Images/mstile-310x150.png"/>
      <TileColor>#5cb95c</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Il mio file manifest.json. Spiegazione completa sopra.

{
    "name": "ASP.NET MVC Boilerplate (Required! Update This)",
    "icons": [
        {
            "src": "\/Content\/icons\/android-chrome-36x36.png",
            "sizes": "36x36",
            "type": "image\/png",
            "density": "0.75"
        },
        {
            "src": "\/Content\/icons\/android-chrome-48x48.png",
            "sizes": "48x48",
            "type": "image\/png",
            "density": "1.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-72x72.png",
            "sizes": "72x72",
            "type": "image\/png",
            "density": "1.5"
        },
        {
            "src": "\/Content\/icons\/android-chrome-96x96.png",
            "sizes": "96x96",
            "type": "image\/png",
            "density": "2.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-144x144.png",
            "sizes": "144x144",
            "type": "image\/png",
            "density": "3.0"
        },
        {
            "src": "\/Content\/icons\/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image\/png",
            "density": "4.0"
        }
    ]
}

Un elenco dei file nel progetto (Nota che i nomi di questi file sono importanti se decidi di metterne alcuni alla radice del tuo progetto per evitare di usare i meta tag sopra):

favicon.ico
browserconfig.xml
Content/Images/
    android-chrome-144x144.png
    android-chrome-192x192.png
    android-chrome-36x36.png
    android-chrome-48x48.png
    android-chrome-72x72.png
    android-chrome-96x96.png
    apple-touch-icon.png
    apple-touch-icon-57x57.png
    apple-touch-icon-60x60.png
    apple-touch-icon-72x72.png
    apple-touch-icon-76x76.png
    apple-touch-icon-114x114.png
    apple-touch-icon-120x120.png
    apple-touch-icon-144x144.png
    apple-touch-icon-152x152.png
    apple-touch-icon-180x180.png
    apple-touch-icon-precomposed.png (180x180)
    favicon-16x16.png
    favicon-32x32.png
    favicon-96x96.png
    favicon-192x192.png
    manifest.json
    mstile-70x70.png
    mstile-144x144.png
    mstile-150x150.png
    mstile-310x150.png
    mstile-310x310.png
    apple-touch-startup-image-1536x2008.png
    apple-touch-startup-image-1496x2048.png
    apple-touch-startup-image-768x1004.png
    apple-touch-startup-image-748x1024.png
    apple-touch-startup-image-640x1096.png
    apple-touch-startup-image-640x920.png
    apple-touch-startup-image-320x460.png

Totale spese generali

Se estrai i commenti che sono 3 KB di HTML aggiuntivo, se non supporti le schermate iniziali di 1,5 KB. Se stai utilizzando la compressione GZIP sul tuo contenuto HTML, cosa che tutti dovrebbero fare in questi giorni, ciò ti lascia con circa 634 byte di sovraccarico per richiesta per supportare tutte le piattaforme o 446 byte senza schermate iniziali. Personalmente penso che ne valga la pena supportare dispositivi IOS, Android e Windows, ma è una tua scelta, sto solo dando le opzioni!

Nota a margine dell'icona Web corrente / Schermata iniziale / Situazione delle impostazioni

Questa situazione con icone specifiche del fornitore, schermate iniziali e tag speciali per controllare il browser Web o le icone appuntate è ridicola. In un mondo perfetto, useremmo tutti un file favicon.svg che potrebbe avere un bell'aspetto a qualsiasi dimensione e potrebbe essere posizionato nella radice della pagina. Solo FireFox lo supporta al momento della scrittura (vedi CanIUse.com ).

Tuttavia, le icone non sono l'unica impostazione in questi giorni, ci sono molte altre impostazioni specifiche del fornitore (mostrate sopra) ma un file favicon.svg coprirebbe la maggior parte dei casi d'uso.

Aggiornare

Aggiornato per includere la nuova versione di Android / Chrome M39 + opzioni favicon / a tema. È interessante notare che hanno adottato un approccio simile a Microsoft ma stanno utilizzando un file JSON anziché XML.



10

L'ho fatto con successo per il mio sito Web.

L'unica eccezione è che il browser SeaMonkey richiede il codice HTML inserito nel tuo <head>; mentre gli altri browser visualizzeranno comunque favicon.ico senza alcun inserimento HTML. Inoltre, qualsiasi browser diverso da IE può utilizzare altri tipi di immagini, non solo il formato .ico. Spero che questo possa essere d'aiuto.


5

Ci sono molte soluzioni complicate sopra. Per me? Ho usato GIMP per salvare una copia del file PNG originale dopo aver modificato le dimensioni dell'immagine a 32 x 32 pixel.

Assicurati di salvarlo come file * .ico e usa il file

<link rel="shortcut icon" href="http://sstatic.net/stackoverflow/img/favicon.ico">

elencati sopra


4

Ti consiglierei di provare http://faviconer.com per convertire il tuo .PNG o .GIF in un file .ICO.

Puoi creare sia 16x16e 32x32(per la nuova visualizzazione della retina) in un file .ICO.

Nessun problema con IE e Firefox


3

Affinché Chrome visualizzi l'icona della pagina (favicon), è necessario controllare il sito Web da un server di hosting oppure è possibile utilizzare l'host locale durante lo sviluppo e il test del sito Web sul PC.


2
<link rel="shortcut icon" 
href="http://someWebsiteLocation/images/imageName.ico">

Se posso aggiungere più chiarezza per quelli di voi che sono ancora confusi. Il file .ico tende a fornire maggiore trasparenza rispetto al .png, motivo per cui consiglio di convertire qui l'immagine come indicato sopra: http://www.favicomatic.com/done , all'interno dell'href c'è solo la posizione dell'immagine , può essere in qualsiasi posizione del server, ricorda di aggiungere http: // in primo piano, altrimenti non funzionerà.


1

Non ne ho usati altri, ma https://realfavicongenerator.net/ sembra essere la scelta migliore, e non è ancora stato menzionato qui.

Supporta SVG come immagini di origine per la generazione di favicon e offre utili opzioni per sovrascrivere immagini per piattaforme diverse. Inoltre, per impostazione predefinita non genera un sacco di immagini per essere retrocompatibili con ogni piattaforma obsoleta. Invece, ti dà le opzioni per verificare se li vuoi.

Da un'e-mail che lo sviluppatore mi ha inviato, hanno anche in programma di aggiungere supporto per la generazione di favicon SVG, così come la sensibilità del tema SVG , penso, che è una caratteristica assolutamente fantastica.


0

Si prega di utilizzare sotto il codice nella sezione di intestazione il file di indice.

<link rel="icon" href="yourfevicon.ico" />
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.