Favicon design è più importante di quanto si possa pensare,. Dimensioni davvero importa qui come un logo ben progettato deve essere riconoscibile a qualsiasi dimensione è visto a. Ha bisogno di scalare da schermi massicci fino a un’icona che può essere piccolo come 16 x 16 pixel, noto come una favicon. Un grande esempio di design favicon è il logo di Google. Funziona perfettamente per schermi più grandi con la sua grande ‘ G ‘ e il caratteristico testo a quattro colori., Ed è ancora riconoscibile quando ridotto alla minuscola ” G ” a quattro colori vista in una barra degli indirizzi dei browser Web.
La favicon può anche essere visto come un’icona di scelta rapida, un’icona scheda o un’icona segnalibro, quindi ha bisogno di guardare la parte. Per vedere favicon disegni che funzionano, vedere la nostra carrellata di logo design ispirazione e controllare questa splendida collezione di icone delle applicazioni iOS che farlo giusto.
In questo articolo, ci accingiamo a correre attraverso il processo di come progettare la favicon perfetta., Includeremo suggerimenti specifici per la creazione di una favicon per i dispositivi Apple, Android, Chrome, Opera e Safari. Più una guida pratica per le diverse dimensioni favicon e formati che dovete sapere. Utilizzare i collegamenti rapidi (a destra) per saltare direttamente alla sezione desiderata.
- Alla ricerca di un diverso tipo di icona? Vedi la nostra guida ai migliori set di icone gratuiti
Nei primi giorni del web, una favicon era semplicemente un file di icone 16x16px, ma al giorno d’oggi è un po ‘ più complicato., Esistono diverse dimensioni e processi di favicon per diversi contesti. Creare una favicon corretta è una scienza.
Quindi, ci accingiamo a dare il via con alcuni suggerimenti per ciò che la vostra favicon dovrebbe essere simile, e poi passare a consigli specifici su come creare una favicon per diversi contesti. Useremo il modello disponibile su Applica pixel per generare facilmente le diverse dimensioni delle favicon richieste e la favicon di Applica pixel come esempio.,
Favicon design rules
Make it recognisable
La prima cosa da considerare quando si progetta una favicon è ciò che deve essere rappresentato nella tela. Ricorda che la tua favicon viene visualizzata solo all’utente quando è già sul tuo sito web o l’ha segnalibro. Quindi non c’è bisogno di cercare di attirare l’utente con la tua favicon.
Usa il tuo logo
Considera le favicon come segnali sobri che aiutano gli utenti a riconoscere il tuo sito web durante la navigazione nei loro elenchi di segnalibri e homescreens., Pertanto, si desidera utilizzare il logo, o qualsiasi simbolo più facilmente consente all’utente di riconoscere il tuo sito web. Se non hai un logomark che si adatta alla tela quadratica, usa la parte più riconoscibile del tuo logo.
Mantienilo chiaro
Ci sono anche alcune cose che dovresti evitare. Non utilizzare la favicon come strumento di marketing, il che significa che non ci sono cartellini dei prezzi, banner “nuovi” o “aggiornati” e così via. In realtà, non si vuole mettere il testo all’interno della favicon a tutti. Il testo non scala bene, e le probabilità sono che sarà comunque illeggibile., Infine, non usare una foto: sarà fangosa e irriconoscibile alle dimensioni in cui apparirà.
Creare due versioni
Quando le favicon sono stati introdotti in Internet Explorer 5, sono apparsi nella barra dell’URL e nella lista di preferiti. Oggi, favicon vengono visualizzati in un sacco di altri contesti, tra cui elenchi di segnalibri, menu di scelta rapida e persino homescreens mobili e TV., Ciò rende difficile prevedere come verrà visualizzata la tua favicon all’utente finale.
Per garantire che la tua favicon appaia bene nei molti contesti diversi in cui apparirà, idealmente dovresti fornire due stili di favicon:
Logo su sfondo trasparente
Questa versione è mostrata nella barra degli URL, nelle liste dei segnalibri e in altri luoghi in cui la favicon appare accanto all’URL o al nome del tuo sito web.,
Logo su riempimento solido
Questa versione viene utilizzata nei segnalibri e nei menu di scelta rapida simili a griglia in cui il browser o il dispositivo maschera lo sfondo, per ottenere un aspetto uniforme nel contesto.
Favicon size cheatsheet
Come accennato in precedenza, diversi contesti richiedono favicon di dimensioni diverse. Di seguito puoi vedere una guida rapida ai diversi formati e dimensioni che dovrai fornire per coprire tutti i principali casi d’uso.
In precedenza le favicon dovevano essere fornite nel formato ICO., Oggi va bene fornire i file in formato PNG (ad eccezione dell’icona della scheda appuntata di Safari che dovrebbe essere fornita come SVG).
Se vuoi un modo semplice per progettare ed esportare tutte le dimensioni delle favicon, dai un’occhiata al modello favicon su Applica pixel.
Ora diamo un’occhiata più da vicino ai requisiti specifici dei diversi casi d’uso.,
Favicon del browser desktop
Come creare una favicon del browser desktop
Iniziamo con la favicon più semplice che dovrai creare: una favicon classica per i browser desktop classici. Questo tipo di favicon funziona meglio su sfondi trasparenti, come spesso appare nella barra degli URL e nelle liste dei segnalibri.,
avrete bisogno di fornire questo tipo di favicon in tre dimensioni, tutte in formato PNG con sfondo trasparente.,
- 16×16
- 32×32
- 48×48
Apple
Come creare favicon Apple Touch
iOS di Apple utilizza le icone Apple Touch per rappresentare i siti web che sono stati salvati nella schermata iniziale di iOS come segnalibri. Ciò significa che l’icona Apple Touch verrà arrotondata alla maschera squircle delle icone delle app iOS.
Sarà anche visualizzato contro qualsiasi sfondo l’utente ha scelto per la loro homescreen. Con questo in mente, l’icona Apple Touch dovrebbe avere uno stile di sfondo di riempimento solido.,
Le favicon Apple devono essere fornite in formato PNG. Puoi farla franca fornendo un’icona Apple Touch 180×180 che si ridimensionerà automaticamente per le varie dimensioni di iPhone e iPad. Questo funzionerà bene nella maggior parte dei casi.,
Se non è possibile fornire ulteriori misure per i vari dispositivi Apple:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
Android, Chrome e Opera
Come creare una favicon per Android, Chrome e Opera
Android, Chrome e Opera utilizzare android-chrome-192×192.png e Android-chrome-512×512.png che Google consiglia.,
Dall’introduzione delle icone adattive in Android, i siti Web aggiunti alla homescreen Android maschereranno il design 192×192, quindi l’icona prende forma dopo lo stile di mascheramento preferito dall’utente. Questo potrebbe essere uno squircle, ellissi, rettangolo, rettangolo arrotondato o forma a goccia.
È necessario creare una favicon PNG con sfondo solido, a 192×192 e 512×512.,
Implementa queste favicon aggiungendo un manifest.file json al tuo sito e collegamento ad esso all’interno dei tag:
<link rel="manifest" href="/manifest.json">Ecco il codice per il manifest.file json:
Safari
Come creare una favicon per la scheda bloccata di Safari
Questa è la strana ed è l’unica favicon che deve essere fornita in formato vettoriale come file SVG. Viene visualizzato come icona di anteprima quando un utente inserisce una scheda nella finestra del browser Safari.,
Questa favicon deve essere un file SVG nero al 100% con uno sfondo trasparente . L’SVG può essere solo un livello e safari richiede che l’attributo viewBox dell’SVG sia impostato su “0 0 16 16”.
<link rel="mask-icon" href="your_icon.svg">Altri tipi di favicon
Ci sono alcune dimensioni favicon e formati che non sono stati inclusi in questo articolo ad es., Google TV, Chrome Web Store e pre-iOS 7 icone Touch di Apple. Perché? Perché sono stati deprecati o perché sono raramente rilevanti per lo sviluppatore web medio.
In generale, gli sviluppatori e i progettisti dovrebbero sforzarsi di supportare la più ampia varietà possibile di dispositivi e sistemi operativi, ma a volte non ha senso. Ma, se vuoi vedere un elenco più completo di immagini favicon, assicurati di dare un’occhiata a questo cheat sheet di favicon su GitHub.,
- Le migliori tendenze del design per il 2020
- 15 font professionali per designer
- 27 migliori set di icone gratuite
Notizie recenti
