Generi tag HTML per favicon e Apple touch icon

Crea un riferimento favicon per ogni risorsa fornita e aggiunge automaticamente un riferimento Apple touch icon. Il risultato è deterministico, protegge i valori degli attributi ed è pronto da inserire in un template, un sito statico, un gestore di contenuti o il layout di un’applicazione.

Prepari un inventario preciso delle icone

Inizi dai file di icona già pubblicati dal Suo sito. Aggiunga una riga per ogni risorsa, indicando le dimensioni in pixel nel formato LARGHEZZAxALTEZZA e il percorso pubblico o l’URL. I set comuni per browser comprendono piccoli file quadrati per schede e preferiti, mentre un’immagine quadrata più grande è utile quando un dispositivo salva il sito nella schermata iniziale. I percorsi possono essere relativi al sito, come /assets/icons/favicon-32.png, oppure URL assoluti serviti da un host di risorse. Ogni dimensione deve comparire una sola volta, perché due file concorrenti dichiarati con le stesse misure rendono ambigua la selezione. Il generatore convalida tutte le righe prima di produrre il markup: percorsi vuoti, dimensioni non valide, misure duplicate e valori estremi non supportati diventano quindi errori di input chiari anziché tag difettosi. Lo strumento non consulta il filesystem e non scarica immagini, quindi considera le dimensioni una Sua dichiarazione esplicita. Verifichi che ogni percorso sia accessibile pubblicamente dopo la distribuzione e che le dimensioni reali dell’immagine corrispondano a quelle inserite.

Comprenda come vengono scelti e ordinati i tag

Per ogni icona fornita, il risultato include un elemento link con rel impostato su icon, un valore sizes normalizzato in minuscolo e un href sottoposto a escape. I tag per browser sono ordinati dall’area in pixel più piccola alla più grande, con criteri deterministici per risolvere le parità. Lo stesso insieme logico produce così sempre lo stesso output, anche se le righe arrivano in un ordine diverso. L’Apple touch icon viene scelta separatamente. Una risorsa quadrata esattamente di 180x180 ha la precedenza perché è una dimensione molto usata per le icone touch. Se manca, viene selezionata l’icona quadrata più grande; se non vi sono risorse quadrate, una regola di ripiego esplicita usa la risorsa più grande fornita. Il file scelto resta anche nell’elenco normale per browser, mentre un altro elemento link lo identifica con rel uguale ad apple-touch-icon. L’escape degli attributi protegge e commerciali, virgolette e parentesi angolari nei percorsi senza cambiare la destinazione interpretata dall’HTML. Il tipo MIME non viene dedotto dall’estensione, evitando dichiarazioni errate per route trasformate o prive di estensione.

Inserisca e verifichi il markup generato

Copi il valore html restituito nel head del template condiviso che serve tutte le pagine pubbliche. Se usa un framework, lo collochi nel layout principale o nel template dei metadati, anziché ripeterlo nelle singole route. L’array tags contiene le stesse righe come stringhe separate quando uno script di build richiede valori strutturati; icon_count e apple_touch_size rendono semplici i controlli automatici. Dopo la distribuzione, apra il sorgente della pagina generata e verifichi che gli href si risolvano dall’origine pubblica finale. Un percorso relativo al sito che inizia con una barra viene risolto dalla radice del dominio; senza barra, viene risolto rispetto al documento corrente e può comportarsi diversamente nelle route annidate. Per controllare una sostituzione, svuoti la cache del browser o usi una finestra privata, perché la cache delle favicon è particolarmente persistente. Provi anche ad aggiungere il sito alla schermata iniziale di un dispositivo mobile se questa esperienza è importante. Lo strumento scrive soltanto riferimenti: non crea immagini, non modifica manifest web, non carica risorse e non conferma il tipo di contenuto restituito dal server.