Sono impegnato in un sito WordPress e sono salito sul palco per aggiungere il tocco finale, essendo la favicon. Sono principalmente uno sviluppatore, quindi la grafica e le icone non sono il mio punto di forza.

Quali sono le migliori pratiche durante la creazione di una favicon (in termini di dimensioni ecc., Ho già il design)? Vorrei adattarmi a tutti i dispositivi possibili, che si tratti di dispositivi mobili, tablet, display retina, ecc. Inoltre, non voglio che finisca sfocato, quindi devo sapere quale densità di pixel utilizzare e tutto.

Se ci sono alcune app per Mac o strumenti online che lo faranno (e lo faranno correttamente), sarebbe fantastico. Altrimenti so come orientarmi tra Illustrator e Photoshop.

Le basi di Favicons - Best practice per il 2013 :

ICO favicon.ico (32x32)

PNG favicon.png (96x96)

Tile Icon tileicon.png (144x144)

Apple Touch Icon apple-touch-icon-precomposed.png (152x152)

E un cheat sheet "dolorosamente ossessivo" per privilegiare dimensioni / tipi su GitHub.

Vale sempre la pena leggere: http://www.jonathantneal.com/blog/understand-the-favicon/

Cosa includere?

Il minimo

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs) -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers (196x196 should cover all modern browsers) -->
<link rel="icon" type="image/png" href="/favicon.png">

<!-- iOS & other mobile devices (ideally 180x180, at least 120x120) -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">

Per l'ossessivo

<!-- Desktop browsers (including 16x6, 32x32 & 48x48 PNGs)  -->
<link rel="shortcut icon" href="/favicon.ico">

<!-- Modern browsers & Devices -->
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-48x48.png" sizes="48x48">
<link rel="icon" type="image/png" href="/favicon-64x64.png" sizes="64x64">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-128x128.png" sizes="128x128">
<link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">

<!-- iOS & other mobile devices -->
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

<!-- Windows Tiles (optionally omitted and replaced with browserconfig.xml in root directory) -->
<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />
<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

favicon.ico

favicon.ico è il più antico dei favicon, ha funzionato da prima che molte persone leggessero questo nato e funziona ancora perfettamente oggi.

Microsoft consiglia di includere immagini di dimensioni 16x16, 32x32 e 48x48.

Il modo standard per definire la tua favicon:

<link rel="shortcut icon" href="/favicon.ico" />

I browser cercheranno nella directory principale del tuo sito Web in favicon.icomodo da poter omettere il collegamento. Alcuni browser meno recenti passeranno automaticamente a quelli dichiarati favicon.icoanche se viene dichiarato un PNG di dimensioni più appropriate, quindi lasciare l'ICO non dichiarato nella radice e dichiarare PNG di dimensioni diverse può essere una buona idea.

favicon.png

HTML5 ha introdotto l' sizesattributo per aiutare a dichiarare icone di dimensioni multiple. L'uso di PNG specifici ti dà un maggiore controllo sulle dimensioni utilizzate e significa che viene caricata solo l'immagine corretta.

<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">

• www.w3.org - HTML5 - Tipo di collegamento "icona"

Le dimensioni dichiarate dipendono dai dispositivi che si desidera supportare. Alcune dimensioni comuni e non così comuni:

• 32x32
• 48x48
• 64x64
• 96x96
• 128x128 Icona Chrome Web Store
• 160x160 Chrome per Android
• 192x192 Chrome per Android
• 195x195 Icona di composizione rapida Opera
• 196x196 Chrome per Android
• 228x228 Icona della Costa dell'Opera

Icona Touch Apple

Le icone dei clip web iOS sono disponibili in diverse dimensioni per diversi dispositivi e risoluzioni. È possibile specificare una o più icone di dimensioni, se non viene trovata alcuna icona della dimensione pertinente, verrà utilizzata l'icona generica senza dimensione dichiarata.

Se non viene specificata alcuna icona utilizzando un elemento di collegamento, iOS cercherà nella directory principale le icone con il apple-touch-iconprefisso. I dispositivi iOS non sono (abbastanza stranamente) gli unici dispositivi per utilizzare queste icone (Android Chrome, ad esempio), quindi dichiararle è l'opzione più sicura.

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
<link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">
<link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-6plus.png">

• Linee guida per l'interfaccia umana iOS - Dimensioni dell'icona

• Libreria per sviluppatori iOS: specifica dell'icona di una pagina Web per Web Clip

Piastrelle Windows

Le tessere vengono utilizzate quando si aggiunge un sito Web alla schermata iniziale su Windows o Windows Phone e sono disponibili in diverse dimensioni.

<meta name="msapplication-square70x70logo" content="tile-small.png" />
<meta name="msapplication-square150x150logo" content="tile-medium.png" />
<meta name="msapplication-wide310x150logo" content="tile-wide.png" />
<meta name="msapplication-square310x310logo" content="tile-large.png" />

Le dimensioni dell'immagine consigliate sono maggiori di quelle suggerite dai nomi di tali immagini. Queste sono le dimensioni consigliate da microsoft.com

                   | Minimum   | Recommended
Small  | 70 x 70   | 56 x 56   | 128 x 128
Medium | 150 x 150 | 120 x 120 | 270 x 270
Wide   | 310 x 150 | 248 x 120 | 558 x 270
Large  | 310 x 310 | 248 x 248 | 558 x 558

Colore e titolo delle piastrelle

Il comportamento predefinito delle tessere è quello di prendere il titolo della tessera dal <title>tag e rispettare l'eventuale trasparenza delle immagini delle tessere, mostrando il colore di sfondo. Puoi personalizzare il colore e il titolo usando questi meta tag:

<meta name="msapplication-TileColor" content="#582686" />
<meta name="application-name" content="Your Website" />

browserconfig.xml

Tutti i msapplicationmeta tag possono essere rimossi e sostituiti con un file XML nella cartella principale chiamata browserconfig.xml. Il file XML dovrebbe apparire così:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
  <msapplication>
    <tile>
      <square70x70logo src="images/tile-small.png"/>
      <square150x150logo src="images/tile-medium.png"/>
      <wide310x150logo src="images/tile-wide.png"/>
      <square310x310logo src="images/tile-large.png"/>
      <TileColor>#582686</TileColor>
    </tile>
  </msapplication>
</browserconfig>

Ulteriori letture e risorse

• Favicon cheat sheet

• Favicon, icone touch, icone tile, ecc. Di che cosa hai bisogno? - Scritto come un quiz ma contiene molte informazioni utili (e puoi semplicemente leggerlo come articolo, dimentica che è un quiz)

• Il manuale delle icone

• ImageMagick - Utile strumento da riga di comando per la conversione di immagini.

• RealFaviconGenerator.net - Generatore favicon completo.

• FAVIC-O-MATIC - Generatore favicon completo con formati di output facilmente personalizzabili.

Questo strumento consente di risparmiare molto tempo. Provalo! Si prende cura di tutto per te.

Carica la tua immagine a circa 800px x 800px in modo che sia piacevole e nitida.

http://realfavicongenerator.net/

Aggiungi anche questo meta tag in modo da poter nominare la tua icona se alcuni salvano sul dispositivo iOS.

<meta name="apple-mobile-web-app-title" content="Website Name">

Spero che sia d'aiuto!

Utilizzare questa attività GRUNT per generare tutte le possibili varianti:

https://github.com/gleero/grunt-favicons

Genera tutte le icone di tipi e dimensioni note dall'immagine PNG. Usa ImageMagick.

Ingresso: logo quadrato in png. Puoi anche rimanere vicino ai file di origine con il prefisso di risoluzione, ad esempio source.16x16.png.

Produzione:

favicon.ico (16x16, 32x32, 48x48) — desktop browsers, address bar, tabs, safari reading list, non-retina iPhone, windows 7+ taskbar, windows desktop;
favicon.png (64x64) — modern browsers;
apple-touch-icon.png (57x57) — iPhone non-retina, Android 2.1+;
apple-touch-icon-60x60.png (60x60) — iPhone iOS7+;
apple-touch-icon-72x72.png (72x72) — iPad non-retina;
apple-touch-icon-76x76.png (76x76) — iPad non-retina iOS 7;
apple-touch-icon-114x114.png (114x114) — iPhone retina, iOS 6 and lower;
apple-touch-icon-120x120.png (120x120) — iPhone retina, iOS 7 and higher;
apple-touch-icon-144x144.png (144x144) — iPad retina;
apple-touch-icon-152x152.png (152x152) — iPad retina iOS 7;
windows-tile-144x144.png (144x144) — Windows 8 tile;
coast-icon-228x228.png (228x228) - Coast browser;
firefox-icon-16x16.png (16x16) - Firefox on Android / Windows;
firefox-icon-30x30.png (30x30) - Firefox OS;
firefox-icon-32x32.png (32x32) - Firefox on Android / Windows;
firefox-icon-48x48.png (48x48) - Firefox on Android / Windows;
firefox-icon-60x60.png (60x60) - Firefox OS;
firefox-icon-64x64.png (64x64) - Firefox on Android / Windows;
firefox-icon-90x90.png (90x90) - Firefox OS;
firefox-icon-120x120.png (120x120) - Firefox OS;
firefox-icon-128x128.png (128x128) - Firefox on Android / Windows;
firefox-icon-256x256.png (256x256) - Firefox on Android / Windows;
homescreen-196x196.png (196x196) - Android Homescreen.

Aggiunge modifiche al file html.

http://faviconit.com

creerà circa 15 dimensioni di icone diverse per tutti i dispositivi da un PNG ad alta risoluzione.

Anch'io cercavo una soluzione favicon e non volevo fare affidamento su servizi web di terze parti. Non sono riuscito a trovare soluzioni generiche che funzionassero come un semplice passaggio di creazione, quindi ho creato faviconbuild . Si basa su ImageMagick in modo da poter scaricare l'ultima versione di quella per il proprio sistema o utilizzare alcuni che ho fornito nelle mie versioni .

L'ho rilasciato con la licenza del MIT, quindi chiunque è libero di usarlo per uso commerciale o personale, o semplicemente trarne ispirazione. Se trovi qualche bug o vuoi estenderlo, sentiti libero di essere coinvolto .

Aggiornerò la pagina del progetto con informazioni più dettagliate, ma ha già un menu di aiuto davvero pratico e standard e funziona su Unix, Mac e Windows.

Devi semplicemente eseguire lo script .bat o .sh nel tuo terminale.

ex per Windows:

faviconbuild.bat -h

o per Unix / Mac (o Windows se si utilizza Cygwin):

faviconbuild.sh -h

Questo ti darà le informazioni sulla versione insieme alle opzioni disponibili. Lo script è progettato per acquisire un'immagine di input e produrre tutte le varie immagini richieste insieme al markup html richiesto da includere nel tuo sito Web.

Questo è un esempio di come lo sto usando in uno dei miei progetti attualmente:

./faviconbuild/faviconbuild.sh -i ./source.png

Ho semplicemente inserito la cartella faviconbuild in una cartella specifica del progetto in modo da non dover toccare i file di progetto effettivi e lungo il lato che ho inserito il mio source.png. Il comportamento predefinito dello script è quello di mettere tutto in una cartella di build nidificata che è gitignored in modo che non si scontri con il progetto se si sta usando git.

Se mi manca qualcosa, si prega di inviare una richiesta di funzionalità.

Ho anche un post sul blog con maggiori informazioni.

Spero che lo trovi utile

Ci sono molte informazioni utili qui riguardanti dimensioni e generatori di favicon.

Posso aggiungere alla discussione spiegando le esigenze di progettazione delle diverse dimensioni.

Sì, le dimensioni di favicon, icona, simbolo e logo possono essere basate sulla stessa arte, ma ognuna deve essere renderizzata in modo specifico per quella dimensione per apparire più accurata (sto dicendo che i generatori automatici non gestiranno bene l'aliasing e le sfumature al Le dimensioni di 16 pixel e l'immagine generata automaticamente non saranno ottimizzate per le dimensioni di 128 px se si è avviati più piccoli.

Disegna la tua arte a 128 pixel o qualsiasi formato quadrato di grandi dimensioni, usando tutti i trucchi 3d che desideri. Esporta le diverse dimensioni delle icone una alla volta, esaminando il risultato e regolando il master in modo che funzioni meglio a quella dimensione.

Per il 16 x 16 realizzerò una griglia 16x16 di quadrati e li colorerò singolarmente per avere il massimo controllo dell'output.