Una favicon è quella piccola immagine fantastica accanto alla barra degli indirizzi nel browser. È ciò che distingue il tuo sito nella scheda dei segnalibri e può essere utilizzato per aumentare la consapevolezza del marchio. Se hai un sito ma non hai mai pensato di creare una favicon, dovresti ripensare alla tua decisione. Sempre più spesso, gli sviluppatori di software utilizzano le favicon per diversi aspetti delle loro applicazioni, come le icone della schermata iniziale sui tablet. Fortunatamente, progettare, creare e implementare una favicon è qualcosa che quasi tutti possono fare se seguono i passaggi giusti.
Passi
Metodo 1 di 3: Progettare la tua Favicon
Passaggio 1. Crea una favicon che rappresenti il tuo sito web
Il tipo di sito web che hai dovrebbe determinare l'aspetto della tua favicon. Prova a progettare qualcosa che aderisca all'immagine del tuo marchio e che sia riconoscibile e memorabile per le persone. La tua favicon sarà la prima cosa che le persone vedranno quando guarderanno le schede nel loro browser e apparirà anche nei segnalibri delle persone.
- Ad esempio, se hai un sito web di cibo, la scelta di una favicon con frutta o verdura come design potrebbe renderla più memorabile.
- Se il tuo sito web è per uno studio legale o una società di investimento, una favicon tradizionale ed elegante è la cosa migliore.
- Se il tuo sito web è rivolto ai più giovani, prova a creare una favicon giocosa e colorata.
Passaggio 2. Decidi se desideri uno sfondo trasparente
Se non designi uno sfondo, si riempirà di bianco, che potrebbe non aderire al tuo marchio. Uno sfondo trasparente assumerà il colore del browser della persona e in alcuni casi apparirà più snello. In altri casi, avere un colore per lo sfondo farà risaltare le lettere o la grafica in primo piano. Decidi quale sarebbe il migliore per il tuo design e tienilo a mente mentre lo realizzi.
La favicon più elementare è un quadrato 16x16 e ha un colore di sfondo
Passaggio 3. Crea una favicon facile da leggere
Poiché l'immagine favicon che utilizzerai è piccola, è importante che tu possa far conoscere il tuo marchio senza confondere i tuoi visitatori. Una favicon difficile da leggere lascia un'impressione negativa e può creare domande nella mente del visitatore sulla qualità del lavoro che puoi fornire. Immagini e loghi eccessivamente complessi non hanno un bell'aspetto se ridotti a 16x16 o 32x32 pixel.
- Se il tuo logo esistente è troppo complicato, puoi utilizzare tattiche per semplificarlo, in modo che possa essere riconoscibile nelle dimensioni della favicon. Usa le iniziali invece di mostrare l'intero nome dell'azienda o progetta una semplice icona invece di usare un'immagine.
- Se hai già un logo semplice, puoi ridurre l'immagine e impostarla come favicon. Potrebbe essere necessario modificarlo prima di convertirlo in un file icona.
- Puoi anche utilizzare un'immagine di un oggetto che descriva il tema generale del tuo sito.
Passaggio 4. Crea una favicon esteticamente gradevole
La struttura della tua favicon è chiamata la sua forma. Le favicon in genere assumono forme, come un cerchio o un quadrato. Quando progetti la tua favicon, generalmente è meglio se è in grado di adattarsi a una di queste forme di base perché le forme a forma libera possono spesso essere confuse o confuse a 16x16 pixel. Un altro aspetto importante del tuo design si chiama unità estetica. L'unità estetica include i dettagli e le dimensioni dei diversi componenti nella tua favicon e come la tua favicon è bilanciata. Più uniformi sono i dettagli, più coerente sarà la tua favicon. Ad esempio, l'utilizzo di tipi o dimensioni di carattere diversi all'interno della tua favicon non è piacevole alla vista e può rendere la tua favicon confusa o disordinata.
- Un altro esempio di unità estetica è mantenere gli angoli arrotondati in tutte le forme nella tua favicon.
- Un buon esempio di un'icona che ha cambiato forma è la favicon di Google. È cambiato da quadrato a cerchio.
Passaggio 5. Usa colori coerenti con il tuo marchio
Quando crei la tua favicon, dovresti crearla con una profondità di colore a 8 bit (256 colori) o 24 bit (16,7 milioni di colori), poiché funzionerà sui browser moderni. Assicurati che i colori che scegli possano essere trovati altrove sul tuo sito web o che siano associati in qualche modo al tuo marchio. Una favicon con colori che non sono sul tuo sito Web, logo o applicazioni non sarà memorabile e le persone non saranno in grado di associare l'icona al tuo marchio.
- Alcuni usi creativi del colore favicon includono GitHub che cambia i colori a seconda dello stato del tuo sistema e Trello, che cambia a seconda del colore di sfondo.
- I colori più comuni utilizzati nelle favicon sono il rosso e il blu.
Passaggio 6. Considera il tuo pubblico durante la progettazione di una favicon
Oltre a identificare il tuo marchio, la tua favicon deve apparire attraente per i tuoi visitatori. Persone con gusti, interessi e norme sociali diversi guarderanno a diverse iconologie da prospettive diverse. Le differenze culturali esistono all'interno della nostra società e potrebbero confondere o respingere il pubblico che stai cercando di attirare.
Ad esempio, Mac Os X utilizza un timbro che è un simbolo universale per la posta. L'utilizzo di una cassetta postale non sarebbe altrettanto efficace perché le cassette postali variano in diverse parti del mondo
Passaggio 7. Ottieni l'opinione di amici e colleghi
Sebbene non sia incredibilmente intenso dal punto di vista grafico, una favicon è una parte importante del tuo marchio. Ad esempio, pensa ai tuoi siti Web preferiti come Twitter, Gmail, Facebook o wikiHow e quanto associ la favicon al marchio. Se non hai un buon occhio per il design, o sei perplesso sul tipo di design che dovresti avere per il tuo sito, consulta gli amici che hanno un occhio per il design o che lavorano nel design grafico.
- Chiedi in giro nella tua rete di amici per vedere se qualcuno può fornire consigli di progettazione gratuitamente.
- Le aziende più grandi dispongono di grafici interni in grado di creare l'immagine favicon.
Metodo 2 di 3: creazione della tua favicon
Passaggio 1. Usa un software di fotoritocco per creare la tua favicon
Puoi utilizzare software di fotoritocco come Adobe Photoshop o Illustrator per creare l'immagine per la tua favicon. Queste applicazioni software consentono anche di ridimensionare ed esportare l'immagine nel formato corretto. Alcuni software ti consentono di creare manualmente la tua favicon.
- Ci sono anche programmi di editing specifici per favicon che puoi trovare online.
- Usa un motore di ricerca e digita "editor di favicon".
- Rendi la tua tela di dimensioni 512x512 pixel perché questo numero si suddivide nelle dimensioni delle favicon più applicabili ed è ancora abbastanza grande da poter essere modificato in modo efficace.
- Altri popolari software di fotoritocco includono GIMP, PhotoScape e Paint. NET.
- Quando si utilizza questo software, non sarà possibile modificare direttamente i file.ico, ma è possibile utilizzare file.png,-j.webp" />
Passaggio 2. Ridimensiona e salva la tua favicon
32x32 px è la dimensione degli elementi del desktop di Windows mentre 16x16 px è la dimensione delle favicon nella scheda del browser. Dopo aver creato la tua favicon in un formato più grande, è importante ridurne le dimensioni in modo da poter vedere come apparirà nei browser delle persone. Se è illeggibile o non esteticamente gradevole, ricomincia dal tuo design originale. Pensa alle piattaforme su cui molto probabilmente verrà utilizzato il tuo sito Web o la tua applicazione e quindi crea una favicon per coprire tutte le tue basi.
- È importante notare che hardware e software diversi utilizzano dimensioni di favicon diverse.
- Alcune altre dimensioni di favicon includono 57x57px per la schermata iniziale standard di iOS, 72x72px per iPad, 96x96px per Google TV, 128x128px per Chrome Web Store e 195x195px per Opera Speed Dial.
- Se vuoi coprire tutte le tue basi, puoi creare versioni della tua favicon in ciascuna di queste dimensioni.
- Salva versioni separate della tua favicon, in modo da non perdere il lavoro che hai fatto.
Passaggio 3. Combina i tuoi file utilizzando un convertitore
La cosa grandiosa dei file.ico è che puoi combinare più di un file per crearlo. Questo è utile perché browser e software diversi vorranno una favicon di dimensioni diverse. Per assicurarti che la tua favicon abbia un bell'aspetto su tutte le diverse piattaforme, converti i tuoi file utilizzando un convertitore online. Digita "convertitore di icone" nel tuo motore di ricerca preferito per trovare applicazioni online gratuite per farlo. Salva il file unito come "favicon.ico".
- Puoi anche utilizzare un programma come GIMP che ha una funzione integrata o scaricare un plug-in chiamato ICO FORMAT in Adobe Photoshop.
- Crea una nuova cartella in modo da poter memorizzare nuove favicon o lavori in corso.
- Digita ".ico converter" o "favicon generator" in un motore di ricerca per trovare diversi strumenti che puoi utilizzare.
Metodo 3 di 3: implementare la tua favicon
Passaggio 1. Carica la tua favicon se stai utilizzando un editor di siti web
Molti editor di siti Web sono dotati di un modulo integrato che ti consente di caricare automaticamente la tua favicon sul tuo sito Web. Se stai utilizzando un editor di siti Web con questo integrato, cerca le opzioni che dicono "Carica Favicon" o "Aggiungi Favicon" nel menu delle impostazioni del tuo sito web. Seleziona il tuo file favicon.ico e caricalo sul tuo sito.
Se non riesci a trovare un posto dove caricare la tua favicon sull'editor del tuo sito web, dovrai farlo manualmente
Passaggio 2. Carica il file nella directory principale del tuo sito
Se il tuo sito web supporta il protocollo di trasferimento file o FTP, puoi utilizzare il tuo client FTP per caricare il tuo nuovo file favicon.icon nella directory principale (indice). In caso contrario, dovrai andare alla pagina del tuo host web e caricare l'immagine manualmente. Ricordati di sostituire il file favicon.ico esistente con il tuo nuovo file.
Passaggio 3. Aggiungi il file all'intestazione
Trova il luogo in cui puoi accedere ai file PHP e CSS per il tuo sito. Vai al file header.php del tuo sito e modificalo. Sotto il tipo di tag,"
-
. Questo dovrebbe collegare il tuo sito alla tua favicon.
Poiché stai utilizzando PHP, significa che tutti i siti che utilizzano il tuo file di intestazione ora avranno la stessa favicon
Crea la tua icona Favicon Passaggio 14 Passaggio 4. Aggiorna il browser
Una volta terminato il caricamento della favicon, puoi aggiornare il browser per vedere la tua nuova immagine accanto alla barra degli indirizzi. Per andare direttamente a un'immagine della tua favicon aggiornata, digita "https://www.tuodominio.com/favicon.ico".
- Se la tua favicon non viene visualizzata inizialmente, potrebbe essere necessario ripristinare la cache del browser.
- Per svuotare la cache, vai alle impostazioni del browser ed elimina i file temporanei Internet, i cookie e la cronologia.
