Come creare icone personalizzate per il tuo sito

Nella guida di oggi vediamo come realizzare icone personalizzate per il proprio sito web o blog in WordPress.

Non c’è ombra di dubbio: per quanto riguarda il web design, le icone stanno diventando sempre più importanti e, talvolta, vengono usate non solo per supportare, ma anche per sostituire il testo scritto.

Per esempio, se ti trovi su un sito web e vedi un’icona a forma di sacchetto, su quale pagina pensi che sarai rediretto cliccandoci sopra? Semplice: alla pagina Carrello.

Ancora più intuitivo è il collegamento tra icone e piattaforme social. È ormai rarissimo vedere link testuali ai social network. Nella grande maggioranza dei casi, sono usate le icone ufficiali Facebook, Twitter, Google+, Pinterest, eccetera.

Aggiungere le icone social è molto semplice: ci sono tanti plugin che permettono di inserire i link di condivisione (trovi la selezione di quelli più validi su questa guida), mentre la maggior parte dei temi hanno ormai una funzionalità integrata per inserire i collegamenti alle proprie pagine e profili.

Le icone che puoi usare sul tuo sito non si limitano però solo a quelle social. Infatti, puoi crearne pressoché di infinite!

Trattandosi di un elemento grafico, è inoltre molto importante che le icone:

• siano in linea con lo stile del tema che hai installato sul tuo sito
• abbiano tutte uno stesso stile (questo può risultare difficile da ottenere se usi vari plugin per aggiungere icone).

In questa guida, vedremo quindi come creare icone personalizzate per il tuo sito, usando strumenti online e plugin gratuiti ed estremamente validi.

Creare icone personalizzate è sicuramente un accortezza principalmente estetica, che però contribuisce a dare un aspetto più professionale al tuo sito.

Strumenti per creare icone personalizzate per il tuo sito web in WordPress

1: IconMonstr

Questo sito ha icone rappresentanti pressoché qualunque cosa. Senza bisogno di registrarsi, permette di scegliere un’icona, regolarne la dimensione (da 256px a 16px), se si desidera, posizionarla su uno sfondo tondo o quadrato ed impostarne il colore con il color picker.

Le icone possono quindi essere scaricate in formato .png o .svg e sono pronte per essere caricate all’interno della Libreria Media del tuo sito WordPress.

Per vedere tutta la raccolta di icone disponibili su IconMonstr, clicca qui. Si tratta di una collezione di quasi 4000 icone. Sicuramente troverai quella che fa al caso tuo, tra tutte quelle disponibili.

Nota! La favicon dei siti web (cioè, la piccola immagine che appare nella tab del browser) è di misura standard 16px x 16px. Potresti quindi usare IconMonstr per creare una favicon personalizzata.

2: Fontastic

Il secondo strumento che ti voglio presentare è Fontastic. Questo sito web è molto interessante e risulterà particolarmente utile ai web designer che devono creare e “coordinare” le icone su diverse pagine web, piattaforme, eccetera.

Fontastic ha una libreria di oltre 9000 icone. Effettuato il login, si possono modificare le icone anche usando codici CSS. Le opzioni di personalizzazione sono, quindi, infinite.

Le icone create vengono quindi salvate sul repository Amazon S3 di Fontastic. La stessa icona, può quindi essere usata su molteplici piattaforme. Ogni volta che viene fatta una modifica, l’icona verrà aggiornata automaticamente su tutti i siti web su cui è presente. Questo è particolarmente utile in quanto permette di saltare il passaggio Scarica Immagine > Carica Immagine su ogni singolo sito.

Se però preferisci scaricare l’icona come file, Fontastic offre la funzionalità download in formato .svg.

3: WP SVG Icons

Mentre le due risorse descritte nei paragrafi precedenti sono siti web, WP SVG Icons è un vero e proprio plugin.

Installato il plugin, potrai scegliere fra oltre 490 icone.

Lo strumento funziona in questo modo: all’interno della Bacheca, troverai una nuova voce chiamata “WP SVG Icons”. Cliccando su “Default icons set”, potrai selezionare l’icona da usare ed anche di quale grandezza questa deve essere (h1, h2, h3, eccetera).

In questo modo, genererai uno shortcode che potrai poi incollare all’interno delle tue pagine.

Il numero di icone disponibili non è vasto quanto altri strumenti (per esempio, IconMonstr) però è un ottimo punto di partenza.

Inoltre, WP SVG Icons permette anche di caricare un Icon Pack (cioè, un pacchetto di icone esterno) personalizzato.

4: Menu Icons

Infine, l’ultimo strumento che guarderemo in questa guida su come creare icone personalizzate per il tuo sito è Menu Icons.

Talvolta, può essere veramente molto utile usare icone nel menu. Sono però ancora pochi i temi WordPress che includono questa funzionalità.

Se l’idea ti piace, puoi installare il plugin Menu Icons.

Anche questo strumento è molto interessante: una volta installato, attivato e configurato (trovi la sezione “Settings” all’interno di Aspetto > Menu) potrai, per ogni voce del menu, selezionare un’icona tra le moltissime disponibili.

Le icone incluse sono tratte da ottime risorse, tra cui Dashicons (queste sono le icone ufficiali WordPress), Font Awesome e altre.

5: Genericon’d

Quando il tema che usi per il tuo sito WordPress non include molte icone e trovare un set adatto ai tuoi bisogni diventa complicate, puoi decidere di usare un plugin come Genericon’d. Le Genericons sono delle icone gratuite e flessibili, basate sui vettori, che possono essere ridimensionate facilmente.

Questo plugin include3 set di icone:

• Genericons Neue, delle icone generiche adatte a blog e siti web. Si tratta di icone generiche, come la matita per indicare l’opzione modifica, la nuvoletta per la cloud o la lente di ingrandimento per lo zoom.
• Social Logos, che include tutte le icone social usate su WordPress.com; troverai icone per Facebook, Twitter, Squarespace e gli altri social network.
• Genericons, delle icone semplici usate come un font.

Per implementare queste icone Genericons sul tuo sito WordPress, puoi usare codice HTML di base (se vuoi inserire in temi e funzioni) oppure degli shortcode (per includerle in post o widget).

Puoi cambiare il colore delle icone, ruotarle e modificarne la dimensione tramite css o, se le hai implementatetramite shortcode, l’attributo per la dimensione (size).

Conclusione

Siamo giunti alla fine di questa carrellata su alcune delle risorse disponibili per creare icone personalizzate per il tuo sito.

Come vedi, tutti questi strumenti sono facili e veloci da usare. Ti aiuteranno ad avere un sito dall’aspetto più professionale.

Che strumento usi per creare le icone del tuo sito?

Come sempre, ti invito a condividere la tua opione (o qualunque domanda tu abbia), nella sezione commenti qui sotto.

Alla prossima guida!

NOTA: Questa guida è stata pubblicata originariamente nel Giugno 2016 ed è stata completamente riscritta e aggiornata per accuratezza e comprensibilità.