Genera un favicon ICO multirisoluzione senza uscire dal browser

Cosa deve contenere un favicon ICO

I favicon.ico classici incorporano più risoluzioni per tab, segnalibri e scorciatoie nitide su display Retina. Inviare solo un 16×16 sfocato ingrandito sembra datato.

WebP.Best offre pacchetti come Favicon (16/32/48), Standard (aggiunge 64) e Full (fino a 256) per coprire browser e Windows comuni senza progettare ogni taglia a mano.

• Tab del browser → taglie piccole del pacchetto Favicon
• Scorciatoie / alcune superfici OS → Standard o Full
• Sorgente → preferibilmente un logo o marchio quadrato e chiaro

Prepara l’immagine sorgente

Parti da un master quadrato o quasi con bordi puliti. PNG o WebP trasparenti vanno bene. Foto molto piene fanno icone deboli a 16 px — semplifica o ritaglia sul simbolo prima.

Se il logo è solo un wordmark orizzontale, aspettati bande o ritaglio forzato nel quadrato. Decidi se l’icona debba essere un simbolo o un monogramma prima di convertire.

Passaggi su WebP.Best

Apri il convertitore in homepage e aggiungi il file logo (PNG o WebP con trasparenza è l’ideale). Formato di output: ICO.

Scegli un pacchetto dimensioni: Favicon (16/32/48 px) per le tab; Standard aggiunge 64 px per le scorciatoie; Full arriva a 256 px per icone Windows più nitide. Non serve esportare ogni taglia — il pacchetto le unisce in un .ico.

Scegli come riempire il quadrato: Fit inside mantiene tutto il logo visibile con margini se la sorgente non è quadrata; Fill and crop scala fino a riempire e può tagliare i bordi — meglio per simboli semplici che per testo piccolo.

Converti, scarica il .ico e controlla la taglia più piccola in una tab. Tutto gira in locale sul tuo dispositivo.

Fit inside vs fill and crop: quale scegliere

Immagina l’icona come una cornice quadrata. Fit inside riduce il logo finché entra tutto — nulla viene tagliato, ma possono restare bande vuote se il logo è largo o alto.

Fill and crop ingrandisce fino a coprire la cornice e ritaglia ciò che esce. Buono per cerchi o lettere semplici; rischioso con wordmark lunghi che perdono lettere a 16 px.

Serve un master rigorosamente quadrato prima dell’ICO? Espandi Opzioni avanzate, scegli Larghezza × altezza esatte (es. 512×512), Fill and crop o Fit inside, converti una volta in PNG e poi genera l’ICO da quel quadrato. Se i pacchetti predefiniti vanno già bene, salta questo passaggio.

• Solo wordmark largo → Fit inside, o ridisegna prima un simbolo quadrato
• Icona rotonda stile app → Fill and crop spesso è più pulito
• Incerto → prova Fit inside; passa a Fill and crop solo se i margini disturbano

Usare l’ICO sul sito

Metti favicon.ico nella root del sito o collegalo nell’head HTML con il type corretto. Molti host statici accettano anche favicon PNG; l’ICO resta utile per segnalibri legacy e alcuni contesti desktop.

Dopo il deploy, ricarica forzata o finestra privata: i browser cacheggiano i favicon in modo aggressivo. Un’icona «sbagliata» dopo l’upload spesso è cache, non un ICO difettoso.

Cosa non fa

Questo percorso è per icone statiche. Non progetta il brand, non rimuove sfondi automaticamente né genera SVG. Linee molto sottili possono sparire a 16 px — prova la taglia minima.

L’impacchettamento gira in locale con bundle predefiniti. Per «Aggiungi a Home» sul telefono potresti servirti di PNG separati — un solo ICO non basta sempre.