L’icona classica è un file ICO da 16 × 16, con supporto a colori o trasparente a 16 o 24 bit. Molto più tardi, è apparsa nelle dimensioni 32 × 32, ma i browser più vecchi la riducono ancora a 16 × 16.
Perché ne hai bisogno? Oggi è una componente importante dell’interfaccia del sito web, che svolge un ruolo importante anche nelle applicazioni web avanzate.
Favicon Checker Controlla se il tuo sito web ha favicon e come viene visualizzato in diversi browser
Qual è il suo scopo?
Ovviamente, è molto più semplice cercare il bookmark di cui hai bisogno, perché è più facile cercare un’icona familiare che leggere tutti i nomi dei siti web. Pertanto, il suo compito è migliorare l’esperienza dell’utente. Questa è la ragione principale per cui dovresti usarla. Oggi, puoi trovare questa popolare componente in tutti i siti web e browser moderni più famosi, nelle sue schede di navigazione. Le aziende globali hanno icone (popolari) e facilmente riconoscibili, che le aiutano a distinguersi dalla massa di altre risorse web (e sono buoni esempi di favicon a cui guardare). Senza dubbio, è uno strumento utile per siti di ogni tipo. È stata creata per una ricerca rapida e visiva, per trovare l’esatto sito web di cui hai bisogno tra migliaia di bookmark su internet, aiutando il tuo pubblico di destinazione a trovarti più veloce e in modo semplice.
Al sito web, senza un’icona identificabile personale, verrà assegnato il simbolo generico del browser, il che significa che è un must have se t’interessa diffondere la conoscenza del tuo marchio.
Come creare una Favicon per il sito web?
Puoi farlo da solo o usare un aiuto online. Non è necessario utilizzare generatori online speciali per crearne una, sebbene spesso siano abbastanza comodi e semplici. Ecco alcuni esempi di siti web che ti possono aiutare:
- Favicon Generator;
- Favicon Generator ORG;
- Dynamic Drive Favicon Tool;
- Favigen;
- Gen Favicon;
- Degraeve Favicon;
Come vedi, non hai nemmeno bisogno di un grafico per realizzarla. Tuttavia, se stai pianificando di lanciare un sito in tutto il mondo e di avere un marchio globale, probabilmente faresti bene a rivolgerti a un designer professionista per creare qualcosa di unico che corrisponda al tuo marchio. Tuttavia, se hai intenzione di farlo da solo, possono essere necessari circa 10 minuti per realizzarne una semplice: devi solo caricare il logo del tuo sito web in uno dei siti menzionati qui sopra e scaricare il file pronto. È facilissimo!
Inoltre, prova questi siti web per trovare alcune idee interessanti di favicon:
Controllare il sito Web per errori SEO Nessuna favicon danneggia l'usabilità del sito Web, ma la mancanza di tag Title e Description può portare alla perdita di traffico.
Come aggiungerla al sito?
Una volta che hai un file pronto, non dovrebbe essere difficile metterlo sul server. Per poter modificare il codice HTML del tuo sito web, avrai prima bisogno di accedere allo strumento di modifica del testo e alla cartella principale sul tuo sito web. Ecco una guida rapida:
1. Carica il file pertinente sul tuo server. Quindi inserisci l’indirizzo del tuo server FTP nella barra degli indirizzi del browser. Premi il pulsante “Invio”, accedi e carica il file nella cartella principale.
2. Quindi è necessario modificare la pagina HTML del tuo sito web. Trova e scarica il file “header.php” o “index.html” dal server. Se il tuo sito è realizzato in HTML, devi inserire il codice nell’area head del file “index.html”:
<link rel="shortcut icon" type="image/x-icon" href="http://yourwebsite.com/favicon.ico">Se lavori su WordPress, inserisci il codice nell’area head del file “header.php”:
<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('url') ?>/favicon.ico">Questo è tutto! Sarai sorpreso da quanto sia facile.
Creazione di un’icona con Photoshop
Photoshop è un programma ottimo per lavorare con le immagini! È uno strumento utile, che ti aiuterà in molte situazioni diverse e ti consentirà anche di creare un’icona personalizzata per il tuo sito. Se sei un designer, ovviamente, il programma Photoshop è la cosa migliore che puoi utilizzare. In caso contrario, ti consigliamo di prendere in considerazione l’utilizzo dei siti web menzionati in precedenza e di risparmiare tempo. Il problema è che Photoshop non supporta i file “ico”. Pertanto, è necessario scaricare e installare il relativo plug-in da Telegraphics.
Nel menu di selezione, nella cartella FILE, dovresti creare un nuovo file, con una dimensione di 64 × 64 pixel (è più facile lavorare con le dimensioni più grandi), incollare il tuo logo nel documento e apportare tutte le necessarie modifiche.
Dopodiché, seleziona la cartella IMMAGINE, vai a FORMATO IMMAGINE e cambiala in 16 × 16 pixel, e non dimenticare di verificare che l’icona non si offuschi facendo clic su RESAMPLE IMAGE e BICUBIC SHARPER. Quando sei soddisfatto del risultato, apri la cartella FILE e premi SAVE AS.
Conclusione
Questo componente è una sorta di biglietto da visita, quindi dovrebbe essere creato con lo stesso stile del sito – più cose hanno in comuni il sito e l’icona, meglio è. Deve essere associata al sito – questa è la sua funzione principale. Inoltre, l’icona dovrebbe essere pertinente e chiara: l’utente deve capire subito cosa è disegnato in essa e deve anche essere facile da memorizzare.
Pertanto, un’icona ben fatta renderà il tuo sito più professionale. Se sei seriamente intenzionato a creare un marchio personale, è necessario adottare un approccio molto serio alla creazione di una favicon.
