Design della favicon: icone minuscole che restano riconoscibili

Una favicon è la piccola icona quadrata che rappresenta il tuo sito web nelle schede del browser, nei segnalibri, nella cronologia, nelle schermate home del telefono e nei risultati di Google. Spesso viene mostrata a soli 16 o 32 pixel, quindi un buon design della favicon è spietato: una sola forma o lettera marcata, alto contrasto, nessun dettaglio fine. Tecnicamente servono solo pochi file, un ICO 32×32, un SVG, un'Apple touch icon 180×180 e due PNG per il manifest, più qualche riga di HTML.

Dimensioni e file della favicon che servono davvero

Le vecchie guide elencano venti misure. I browser moderni ridimensionano bene, quindi un set breve copre ogni posto in cui compare una favicon. Questo segue l'approccio consigliato su web.dev per i manifest e il comportamento attuale dei browser per il resto.

Anche Google Search mostra le favicon accanto ai risultati. Le sue linee guida sulle favicon chiedono un'icona quadrata, ne consigliano una più grande di 48×48 pixel e dicono che deve rappresentare il tuo brand. I PNG 192 e 512 sono entrambi adatti; controlla quella pagina prima del lancio, perché Google la rivede.

Come aggiungere una favicon al tuo sito

<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">

{
  "name": "Studio Nine",
  "icons": [
    { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
    { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" },
    { "src": "/icon-mask.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

Progettare una favicon leggibile a 16 pixel

A 16 pixel hai 256 punti. Un logotipo completo diventa una macchia grigia, i tratti sottili spariscono e due colori simili si fondono. Le favicon che le persone riconoscono all'istante sono quasi sempre una di tre cose: una singola lettera, un simbolo semplice o una forma piena in un colore distintivo.

Colore e gradienti in un'icona minuscola

A questa misura il colore lavora più della forma, perché è ciò che le persone cercano lungo una fila di schede. Un colore di brand riconoscibile batte un simbolo intelligente. I gradienti possono funzionare se sono decisi e brevi: due punti con una chiara differenza di luminosità si leggono come una superficie illuminata, mentre una sfumatura sottile a più punti a 16 pixel appare solo fangosa.

Se il tuo brand ha già uno sfondo distintivo, un suo ritaglio può fare una tessera favicon riconoscibile. I Mark di Gradiently sono utili qui: lo stesso stile che corre dietro i tuoi post può stare dietro una sola lettera a 512×512, così scheda e feed sembrano un unico brand. Assicurati che la lettera mantenga un forte contrasto con la tessera, come spiegato in logo su sfondo sfumato.

Favicon in modalità scura con SVG

Un'icona nera sparisce su una barra delle schede scura, e una bianca su una chiara. Poiché una favicon SVG è un piccolo documento, può portare con sé una propria media query e cambiare colori con il tema del browser.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
  <style>
    rect { fill: #1e1b4b; }
    path { fill: #ffffff; }
    @media (prefers-color-scheme: dark) {
      rect { fill: #e0e7ff; }
      path { fill: #1e1b4b; }
    }
  </style>
  <rect width="32" height="32" rx="7"/>
  <path d="M9 24V8h3l8 10V8h3v16h-3l-8-10v10z"/>
</svg>

Una tessera piena dietro il simbolo è l'assicurazione più semplice: si legge su qualsiasi sfondo, chiaro o scuro, senza affidarsi alla media query. SVG o PNG spiega perché il file vettoriale è quello da conservare.

Una rapida lista di controllo per la favicon

1. 1

   Parti dalla parte più semplice del logo

   Un monogramma, la prima lettera o il solo simbolo. Varianti del logo spiega come costruire apposta una versione piccola.

2. 2

   Disegnala prima a 32×32

   Progetta sulla griglia piccola e ingrandisci, non il contrario. Tratti spessi, spazi generosi.

3. 3

   Esporta i cinque file

   ICO a 32×32, SVG, Apple touch icon 180×180, PNG del manifest 192 e 512.

4. 4

   Provala in schede vere

   Apri il tuo sito accanto ad altri dieci, con temi chiari e scuri. Se non riesci a trovare la tua scheda in un secondo, semplifica.

La favicon sta accanto alla tua immagine Open Graph e alle immagini del profilo social come i piccoli segnali costanti di un brand. Tienile coerenti e vedi dimensioni del logo per il kit completo.