Come creare una favicon per il sito: consigli e servizi utili

1. Come creare una favicon
2. Come realizzare una favicon in Photoshop
3. Come salvare una favicon
4. Come inserire il sito di favicon
5. Come sostituire favicon
6. Come creare favicon più complesse

È difficile indovinare cos'è una favicon quando senti questa parola per la prima volta. Questa è un'icona in miniatura che viene visualizzata nelle schede dei browser, nelle linee degli indirizzi e in altre aree, a seconda del sistema operativo in uso e del browser Internet. Può essere tranquillamente definito uno degli elementi più complessi e capricciosi nella progettazione di siti Web.

Creare una buona favicon è abbastanza difficile, dal momento che l'icona è piccola, dovrebbe essere chiara e mostrare qualcosa di correlato al tuo sito. Creare un favicon compatibile con tutti i browser più diffusi può essere anche un compito arduo. In questo articolo tratteremo tutti gli aspetti complessi della sua creazione. Se hai bisogno anche di un logo, allora lo abbiamo un articolo come si fa

Come creare una favicon

Iniziamo con il design della favicon. Un buon design, nonostante la sua compattezza, dovrebbe riflettere l'essenza del tuo sito ed essere parte organica dell'identità aziendale. In genere, l'icona è un segno grafico (icona) di un'azienda e non un intero logo (icona, testo e slogan).

Come favicon, questi siti web usano le loro icone (o immagini vicino a loro).

Il testo nella favicon non dovrebbe essere usato, poiché questo testo sarà illeggibile a causa delle dimensioni ridotte dell'immagine. Le uniche eccezioni a questa regola sono caratteri di testo famosi in tutto il mondo che vengono associati automaticamente a una marca specifica. Ad esempio, la risorsa online Wikipedia ha lasciato sulla favicon la sua lettera maiuscola "W", e Facebook - la lettera "F".

Su queste favicon ci sono lettere che sono fortemente associate a una marca particolare. Ad esempio, Facebook utilizza il suo segno grafico. Si noti inoltre che i pixel sono visibili sull'immagine Disney. Questo perché la schermata è stata scattata su un display Retina, che è compatibile con icone 16 × 16, mentre i siti Web utilizzano icone 32 × 32.

Dato che le favicon sono piccole immagini, ciascun pixel ha un ruolo importante. A volte, dopo aver ridotto il logo, i singoli pixel diventano visibili, a causa dei quali l'immagine diventa "sfocata". Per ottenere chiarezza, è necessario modificare l'icona a livello di pixel.

Per evitare ciò, è necessario ridimensionare il logo utilizzando editor speciali come Photoshop o GIMP. Per prima cosa è necessario ridurre la dimensione dell'immagine a 64x64 pixel (questa è la favicon più grande). Quindi è necessario modificare ciascun pixel usando lo strumento Matita fino a quando l'immagine non è chiara. Questo è un processo laborioso, ma ne vale la pena. Quando la favicon 64x64 è pronta, devi fare lo stesso lavoro con l'immagine di 16 × 16, 24 × 24 e 32 × 32 pixel. Tante dimensioni che devi visualizzare correttamente visualizzate in tutti i browser e i gadget:

• 64x64 - Segnalibri del browser Safari;
• 32x32 - schermi ad alta risoluzione (Retina);
• 24x24 - segnalibri Internet Explorer e MicroSoft Edge;
• 16x16 - Google Chrome e altri browser.

Come realizzare una favicon in Photoshop

Per prima cosa è necessario creare alcune tele con le dimensioni precedenti.

Quindi devi aggiungere un'icona, una lettera o un'altra immagine alla tela.

Come salvare una favicon

Dopo aver creato icone di dimensioni diverse, salvarle come file PNG trasparente (24 bit). In Photoshop, è possibile utilizzare la funzionalità Salva per Web disponibile nel menu File. Quindi è necessario unire tutti i file PNG in un unico file ICO. Puoi utilizzare sia file PNG che file ICO contemporaneamente, ma spesso anche Safari e Chrome preferiscono solo il formato ICO. A mio parere, è più facile creare un file ICO. Il formato ICO non è molto comune, ma fortunatamente esistono numerosi strumenti che possono aiutarti a convertire i tuoi file in questo formato. Per questo scopo, preferisco usare X-Icon Editor . Si tratta di un servizio online gratuito che converte istantaneamente le immagini scaricate in un unico file ICO, dopo il quale è possibile scaricarlo. Questo non è niente di complicato, basta seguire le istruzioni sul sito. Se ti consideri una persona disperata, puoi sperimentare con l'editor di pixel di questo servizio e disegnare una favicon da solo. (Anche se preferisco modificare le favicon in un editor più professionale, ad esempio, in Photoshop).

Caricando le tue immagini PNG su X-Icon Editor, otterrai un file ICO in uscita.

Come inserire il sito di favicon

Quindi, hai già un file ICO. Ora devi aggiungerlo al sito web. Rinominare il file in favicon.ico e posizionarlo nella cartella principale del tuo sito Web (dove sono archiviati il ​​file index.html e altri file standard). Dopo l'aggiunta riuscita, puoi visualizzarla sul tuo sito web .com / favicon.ico. Quasi tutti i browser cercano il file favicon.ico nella cartella principale. Pertanto, è importante scaricare la favicon in questa cartella. Per compatibilità con diversi browser, è meglio non aggiungere elementi HTML o collegamenti che indicano la sua posizione. Questo trucco funziona per tutti i browser, fino a IE6. Inoltre, se si dispone di un sito WordPress, in molti temi è possibile aggiungere una favicon nelle impostazioni del tema. Questo metodo può anche essere usato.

Come sostituire favicon

Per qualche motivo inspiegabile, i browser lo aggiungono alla cache. Pertanto, quando carichi un nuovo file ICO, il browser potrebbe continuare a mostrare la tua vecchia favicon. Cosa fare in questo caso? Puoi aggiungere un file HTML temporaneo che indica la posizione della tua nuova favicon. Inoltre, alla fine dell'URL devi aggiungere una breve stringa di query:

<link rel = "icona di collegamento" href = "il tuo sito web .com / favicon.ico? v = 2" />

Quindi il browser penserà che questo sia un URL univoco e, pertanto, sarà costretto a visualizzare una nuova icona. Dopo aver aggiornato la favicon, questo codice HTML può essere completamente rimosso. Se è necessario apportare modifiche alla favicon, utilizzare la stessa tecnica, aumentando ogni volta il numero dopo la "v" nella stringa della query. Pertanto, il browser percepirà ogni volta questo URL come univoco e visualizzerà la sua nuova versione. E non dimenticare di cancellare il codice HTML dopo un aggiornamento riuscito.

Come creare favicon più complesse

In questo articolo, volevo descrivere un modo semplice e universale per creare favicon che funzionasse praticamente su qualsiasi piattaforma. Ma nel web design e nello sviluppo non c'è limite alla perfezione. Se vuoi imparare come creare icone più complesse, puoi provare a utilizzare il servizio favico.js . Ti permette di creare immagini dinamiche con numeri diversi. Grazie a questa icona, puoi vedere il numero di messaggi non letti, anche quando la scheda corrispondente non è attiva. Se vuoi creare favicon animati online, puoi provare a usare un generatore di favicon favicon.cc .

Altri generatori online che puoi trovare qui .

Se vuoi condividere i tuoi consigli sulla creazione di favicon o fare una domanda, ti sto aspettando nei commenti!