risposta-alla-domanda-sullo-sviluppo-web-bd.com

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

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

Come posso fare questo in HTML e dove nel codice avrei bisogno di metterlo (ad esempio, l'intestazione)? Ho un file logo .png che vorrei convertire in un'icona.

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

500
knookie

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

<link rel="icon">

Basta aggiungere il seguente codice all'elemento <head>:

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

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

Nota che tu non devi precedere icon nell'attributo rel con shortcut. Da Tipi di collegamento MDN :

Il tipo di collegamento shortcut è spesso visto prima di icon, ma questo tipo di collegamento è non conforme, ignorato e gli autori web non devono più utilizzarlo .

favicon.ico nella directory principale

Da altro SO answer (da @ mercator ):

Tutti i browser moderni (testati con Chrome 4, Firefox 3.5, IE8, Opera 10 e Safari 4) richiedono sempre un favicon.ico se non hai specificato un'icona di collegamento tramite <link>.

Quindi tutto ciò che devi fare è fare in modo che la richiesta /favicon.ico 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?

325
  1. Usa uno strumento per convertire il tuo png in un file ico. Puoi cercare "favicon generator" e puoi trovare molti strumenti online.
  2. Inserisci l'indirizzo ico in head con un link-tag:

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

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

Inoltre generano 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.

62
Jared Menard

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

Ecco alcuni frammenti che ho utilizzato con link pertinenti a dove ho raccolto le informazioni. Vedi il mio blog per maggiori informazioni e maggiori informazioni su ASP.NET MVC Boilerplate modello di progetto con tutto questo subito pronto all'uso (inclusi i file di immagine di esempio).

Aggiungi il seguente mark-up alla tua testa html. Le sezioni commentate sono del tutto facoltative. Mentre le sezioni non commentate sono raccomandate per coprire tutti gli usi delle icone. Non avere paura, la maggior parte 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 nella 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

Overhead totale

Se togli dai commenti 3KB di HTML in più, se non supporti gli splash screen di 1.5KB. Se stai usando la compressione GZIP sul tuo contenuto HTML, cosa che tutti dovrebbero fare in questi giorni, ti lascerà circa 634 Byte di overhead per richiesta per supportare tutte le piattaforme o 446 byte senza schermate iniziali. Personalmente ritengo che valga la pena di supportare i dispositivi IOS, Android e Windows ma è una tua scelta, sto solo dando le opzioni!

Nota a margine relativa all'icona Web corrente/Schermata iniziale/Impostazioni Situazione

Questa situazione con icone specifiche del fornitore, schermate iniziali e tag speciali per controllare il browser Web o le icone bloccate è ridicola. In un mondo perfetto useremmo tutti un file favicon.svg che potrebbe sembrare buono a qualsiasi dimensione e potrebbe essere posizionato alla radice della pagina. Solo FireFox supporta questo 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 venditore (mostrate sopra) ma un file favicon.svg coprirebbe la maggior parte dei casi d'uso.

Update

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

12

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

L'unica eccezione è che il browser SeaMonkey richiede il codice HTML inserito nel <head>; mentre, gli altri browser visualizzeranno ancora il 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.

10

Ho creato un Favicon Generator online con il quale puoi creare favicon da Font Awesome Icons . Puoi vedere in anteprima la favicon creata dal vivo nel browser.

enter image description here

Se desideri funzionalità aggiuntive, ti preghiamo di inviare un problema o una richiesta di pull qui :).

7
eclipse

Ci sono un sacco di soluzioni complicate sopra. Per me? Ho usato GIMP per salvare una copia del file PNG originale dopo aver cambiato la dimensione dell'immagine a 32 x 32 pixel.

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

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

elencati sopra

4
beep_check

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

È possibile creare sia 16x16 che 32x32 (per la nuova retina display) in un file .ICO.

Nessun problema con IE e Firefox

4
Dmitri A

Affinché Chrome visualizzi l'icona della pagina (favicon), devi controllare il tuo sito web da un server di hosting oppure puoi utilizzare Host locale mentre sviluppi e collaudi il tuo sito web sul tuo PC.

2
Miloud Eloumri
<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 una maggiore trasparenza rispetto a .png, motivo per cui consiglio di convertire la tua immagine qui come sopra indicato: http://www.favicomatic.com/done Inoltre, all'interno di href è solo la posizione dell'immagine, può essere qualsiasi posizione del server, ricorda di aggiungere l'http: // davanti, altrimenti non funzionerà.

1
DIZAD