Favicon - Migliori pratiche

Sto cercando di capire tutte queste diverse dimensioni e formati necessari per le Favicon, le icone Touch e ora anche le icone Tile.

Ho letto questo post: http://www.jonathantneal.com/blog/understand-the-favicon ma sono ancora un po 'confuso su cosa usare che sembrerà ragionevolmente buono su tutti i dispositivi e browser> = IE8 .

Penso che dovrei creare quanto segue:

ICO
favicon.ico (32x32)

PNG
favicon.png (96x96)

Tile Icon
tileicon.png (144x144)

Apple Touch Icon
apple-touch-icon-precomposed.png (152x152)
basato su questo https://github.com/h5bp/html5-boilerplate/issues/1367

... e poi usi questo codice per servirli?

<link rel="apple-touch-icon" href="path/to/touchicon.png">
<link rel="icon" href="path/to/favicon.png">
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<!-- or, set /favicon.ico for IE10 win -->
<meta name="msapplication-TileColor" content="#D83434">
<meta name="msapplication-TileImage" content="path/to/tileicon.png">

Mi manca qualcosa?

Non sono chiaro se questo coprirà IE 10?

Favicon è molto più complesso di quello che sembra. 10 anni fa, favicon.icoera l'unico elemento necessario. Poi, c'era l'icona del tocco, poi più icone del tocco dovute alle varie risoluzioni dello schermo dei dispositivi iOS, poi c'era l'icona della tessera per Windows ...

Alcune risposte qui sono molto complete e travolgenti (tutto questo, solo per una favicon?). Tuttavia, non riescono a indicare che l'icona del riquadro 310x310 per Windows è consigliata come 558x558 . E poiché sono stati scritti alcuni mesi fa, non menzionano il recente manifest per Android Chrome M39 o l' icona SVG della scheda appuntata per Safari su OS X El Capitan .

Il design per piattaforma è un altro argomento difficile, ma trascurato. Ad esempio, le favicon sono spesso trasparenti. Ma iOS non supporta la trasparenza (per un esempio, confronta l' icona SO touch e ciò che ottieni quando aggiungi SO alla schermata principale del tuo iPhone).

Per questi motivi, quello che considero una best practice per la favicon è di non crearla manualmente. Utilizza invece uno strumento per automatizzare l'intero processo e applicare le linee guida della piattaforma.

Ti consiglio di usare RealFaviconGenerator . Genera tutte le immagini e il codice HTML di cui hai bisogno per portare a termine il lavoro:

• favicon.ico e icone PNG per browser desktop
• Icona touch Apple per dispositivi iOS e Android
• Piastrelle di Windows 8
• Icona della scheda bloccata per Safari su OS X El Capitan

Ad esempio, non solo genera l' msapplication-TileImageimmagine e il markup, ma anche il browserconfig.xmlfile più recente supportato da IE11. Inoltre è stato aggiornato alcuni mesi fa per supportare il manifest di Android Chrome e Safari OS X El Capitan.

Informativa completa: sono l'autore di questo sito.

Ecco l'esempio completo (come so) di favicon per cellulari e tablet:

<!-- non-retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon57.png" sizes="57x57">
<!-- non-retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon72.png" sizes="72x72">
<!-- non-retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon76.png" sizes="76x76">
<!-- retina iPhone pre iOS 7 -->
<link rel="apple-touch-icon" href="icon114.png" sizes="114x114">
<!-- retina iPhone iOS 7 -->
<link rel="apple-touch-icon" href="icon120.png" sizes="120x120">
<!-- retina iPad pre iOS 7 -->
<link rel="apple-touch-icon" href="icon144.png" sizes="144x144">
<!-- retina iPad iOS 7 -->
<link rel="apple-touch-icon" href="icon152.png" sizes="152x152">
<!-- Win8 tile -->
<meta name="msapplication-TileImage" content="favicon-144.png">
<meta name="msapplication-TileColor" content="#B20099"/>
<meta name="application-name" content="name" />

<!-- IE11 tiles -->
<meta name="msapplication-square70x70logo" content="tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="tile-large.png"/>

Per IE11, ecco una FAQ

Sono disponibili numerose icone e persino schermate iniziali che è possibile impostare per vari dispositivi. Questa risposta spiega come supportarli tutti.

Di seguito sono riportati alcuni frammenti che ho utilizzato 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 integrato immediatamente (inclusi i file di immagine di esempio).

Aggiungi il seguente mark-up alla tua intestazione html. Le sezioni commentate sono del tutto facoltative. Mentre le sezioni non commentate sono consigliate per coprire tutti gli usi delle icone. Non aver paura, soprattutto se sono i commenti ad 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="https://stackoverflow.com/content/images/favicon-96x96.png" sizes="96x96">
<!-- favicon-16x16.png - The classic favicon, displayed in the tabs. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/content/images/favicon-16x16.png" sizes="16x16">
<!-- favicon-32x32.png - For Safari on Mac OS. -->
<link rel="icon" type="image/png" href="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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="https://stackoverflow.com/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

Spese generali totali

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

Nota a margine sulla situazione attuale icona Web / schermata iniziale / impostazioni

Questa situazione con icone specifiche del fornitore, schermate iniziali e tag speciali per controllare il browser Web o icone bloccate è ridicola. In un mondo perfetto, useremmo tutti un file favicon.svg che potrebbe avere un bell'aspetto in qualsiasi dimensione e potrebbe essere posizionato alla radice della pagina. Solo FireFox lo supporta al momento della scrittura (vedere 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 + favicon / opzioni di temi. È interessante notare che hanno adottato un approccio simile a Microsoft ma utilizzano un file JSON invece di XML.

La soluzione più semplice è utilizzare una (!) Immagine PNG (nel 2020).

Aggiungilo semplicemente in testa al tuo documento:

<link rel="shortcut icon" type="image/png" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="shortcut icon" sizes="192x192" href="https://stackoverflow.com/img/icon-192x192.png">
<link rel="apple-touch-icon" href="https://stackoverflow.com/img/icon-192x192.png">

L'ultimo collegamento è per Apple (schermata iniziale), il secondo per Android (schermata iniziale) e il primo per il resto.

Nota che questa soluzione NON supporta i "riquadri" in Windows 8/10. Supporta le immagini in scorciatoie, segnalibri e schede del browser.

La dimensione è esattamente la dimensione utilizzata dalla schermata iniziale di Android. La dimensione dell'icona della schermata iniziale di Apple è 60px (3x), quindi 180px e verrà ridotta. Altre piattaforme utilizzano l'icona di collegamento predefinita, anch'essa ridimensionata.

In realtà mi stavo ponendo la stessa domanda e ho cercato di cercare qualsiasi progetto semplice là fuori che potesse essere integrato in una fase di costruzione o semplicemente semplificare la creazione delle risorse e del markup richiesto.

Non ho trovato nulla che soddisfi i miei requisiti, quindi ho creato faviconbuild e l' ho rilasciato con la licenza MIT .

Lo scopo di questo progetto è creare un'utilità multipiattaforma centrale, gestibile e gestibile localmente per la creazione di favicon e il markup di supporto. Sfrutta la potenza di Imagemagick, quindi dovresti scaricarlo per la tua piattaforma o utilizzare quelli che fornisco nelle mie versioni . Sentiti libero di usarlo in progetti commerciali o personali, contribuire, inviare richieste di funzionalità o semplicemente usarlo come fonte di ispirazione per le tue utilità.

Il progetto consiste in un file batch per Windows e uno script bash per Unix / Mac (o Windows tramite Cygwin). È possibile ottenere un elenco completo delle opzioni supportate dall'opzione di aiuto interno -h o --help.

ex:

./faviconbuild.sh -h

Entrambi gli script analizzano un semplice file di testo che puoi anche sovrascrivere con l'opzione -p o --parsed. Il file è fondamentalmente solo un modello di comandi da eseguire in modo da poter personalizzare più facilmente l'output se necessario.

Ho anche pubblicato un post sul blog sullo sviluppo e come mini tutorial sullo scripting bash / batch.