Icona (informatica)

In informatica, un'icona è definita come un pittogramma o ideogramma, generalmente visualizzato tramite un monitor, parte dell'interfaccia grafica di un sistema informatico, assieme a finestre, menù e puntatori, che hanno soppiantato le interfacce a linea di comando (CLI)

Esempio di icone in varie dimensioni

Le icone sono spesso utilizzate come supporto al veloce riconoscimento e comprensione di uno strumento, che possono più o meno accompagnare il testo o una breve descrizione. Nei dispositivi, come smartphone e computer, la maggior parte della grafica è realizzata con le icone che, attraverso una corretta rappresentazione grafica, esprimono il relativo contenuto. Ad esempio, le cartelle sul desktop che contengono i file, a volte, sono rese simili al colore o al materiale dei portadocumenti e sono corredate anche da corrispettiva etichetta.

Il livello di stilizzazione di una icona è variabile, spesso più simile ad un cartello stradale che ad una illustrazione dettagliata dell'elemento rappresentato. È compito del progettista, riuscire a fornire l'informazione esatta che si vuole trasmettere, attraverso una corretta rappresentazione grafica.

In un sistema operativo un'icona può assumere la funzione di collegamento ipertestuale o collegamento ad un software o file. L'utente può interagire con un'icona tramite un mouse, puntatore, touch o comandi vocali. Il puntatore posizionato all'interno dell'interfaccia ed in relazione ad altre icone, può essere usato per fornire ulteriori informazioni riguardo al loro utilizzo.

Utilizzo

Le icone hanno molteplici impieghi; alcuni di essi possono essere:

• nei moderni sistemi operativi alle applicazioni viene associata un'icona e l'interazione con tale icona (ad esempio un doppio clic) è il metodo standard per il lancio delle applicazioni;
• all'interno di un programma, possono essere utilizzate per rappresentare un'azione (come copia e incolla in un elaboratore testi o indietro in un browser);
• in un file manager le icone vengono usate per differenziare i tipi di file in base alla loro estensione;
• in una pagina Web un'icona può essere usata per caratterizzare il collegamento ipertestuale che la affianca; ad esempio, in un forum web è frequente che le discussioni con un numero elevato di messaggi vengono affiancate da icone infuocate;
• un'icona può essere essa stessa un link e venire utilizzata per creare delle ricorrenze ad una pagina Web su altre pagine o siti; un'operazione di questo tipo è anche detta scambio di link (link exchange).

Anche un sito web può avere una propria icona (favicon, letteralmente icona dei preferiti) che generalmente rappresenta il logo del sito stesso. Nella maggior parte dei browser questa icona appare alla sinistra dell'URL digitata. Per esempio l'icona di Wikipedia è una W nera su fondo bianco.

Nel web

Ci sono diverse tecniche per incorporare delle icone in una pagina web. Le due più utilizzate sono i font-icona (ogni lettera corrisponde ad una icona simbolica) e le immagini (svg, jpg, png...). Queste ultime hanno diversi vantaggi rispetto ai font-icona:

• Possibilità di creare l'icona con molti particolari e colori. I font-icona hanno solitamente un solo colore.

CSS Sprite, attuano una sola chiamata al server utilizzando una sola immagine che ne contiene molte.

• Le immagini sono dotate di elementi semantici incorporati, come <title> e <desc>, che lo rendono accessibile a screen reader e browser di testo. Come anche attraverso il tag <alt>, <title> e le regole WAI-ARIA attraverso l'attributo aria-labelledby. Un font-icona verrà invece letto come "A", "E", ecc.
• I font-icona sono vulnerabili alle tecniche di anti-aliasing implementate dal browser che influiscono sulla qualità visiva dell'icona rendendola sfocata e meno nitida.
• Le immagini e/o gli elementi SVG possono essere animate con CSS3 in modo molto più vario rispetto ai font-icona

Esempio di uso di uno sprite in CSS

• Poiché i caratteri delle icone vengono inseriti utilizzando pseudo-elementi, il loro posizionamento è più difficile delle immagini. Potrebbe essere necessario modificare molte proprietà CSS, mentre nelle immagini si deve solo specificare la dimensione.
• Creare icone tramite software come Inkscape è molto più semplice che creare da zero un font-icona. Se si scelgono questi ultimi si è costretti ad usare font già esistenti
• Si possono creare icone anche in codice, ad esempio SVG, Canvas e WebGL.

Note

1. ^ Joel Rosenblatt, Former Apple Designer Kare Testifies at Samsung Patent Trial, in Businessweek, , 7 agosto 2012. URL consultato il 7 agosto 2012.
2. ^ (EN) ICT Pictograms, Icons and Symbols, [1], 10 maggio 2011
3. ^ (EN) Mallik Cheripally, Inline SVG or Icon Fonts: Which One to Use, su Medium, 27 maggio 2020. URL consultato il 2 febbraio 2021.
4. ^ (EN) It’s 2019! Let’s End The Debate On Icon Fonts vs SVG Icons, su LambdaTest. URL consultato il 2 febbraio 2021.

Voci correlate

• Favicon
• .ico
• Susan Kare

Altri progetti

Altri progetti

• Wikizionario
• Wikimedia Commons

• Wikizionario contiene il lemma di dizionario «icona»
• Wikimedia Commons contiene immagini o altri file sull'icona

Collegamenti esterni

• Icona, su Treccani.it – Enciclopedie on line, Istituto dell'Enciclopedia Italiana.
• Icona, in Dizionario delle scienze fisiche, Istituto dell'Enciclopedia Italiana, 1996.
• Icòna, su Vocabolario Treccani, Istituto dell'Enciclopedia Italiana.
• Icona, su Vocabolario Treccani, Thesaurus, Istituto dell'Enciclopedia Italiana, 2018.
• icòna, su sapere.it, De Agostini.
• Manuela Gianandrea, Icona, in Enciclopedia dei ragazzi, Istituto dell'Enciclopedia Italiana, 2004-2006.
• (EN) Opere riguardanti Icons (Computer graphics), su Open Library, Internet Archive.
• (EN) Denis Howe, icon, in Free On-line Dictionary of Computing. Disponibile con licenza GFDL

Controllo di autorità	LCCN (EN) sh00000329 · J9U (EN, HE) 987007290981305171

Portale Informatica: accedi alle voci di Wikipedia che trattano di Informatica