Una panoramica di base su come creare una favicon adattabile.
In questo post voglio condividere i miei pensieri su come creare una favicon adattiva con SVG. Prova la demo.
Se preferisci i video, ecco una versione di questo post su YouTube:
Panoramica
Un'icona preferita personalizzata è un ottimo modo per perfezionare un progetto web. Viene visualizzato nelle schede del browser desktop, ma anche nei lettori "Salva per dopo", in altri post del blog che rimandano al tuo sito e altro ancora. Tradizionalmente, questa operazione veniva eseguita con il tipo di file .ico, ma di recente i browser hanno consentito l'utilizzo di SVG, un formato vettoriale. Utilizzando il miglioramento progressivo, puoi pubblicare favicon .ico ben supportate ed eseguire l'upgrade a un .svg, se disponibile.
Il formato SVG è in grado di aumentare e diminuire di dimensioni senza perdita di qualità e può essere potenzialmente di dimensioni molto ridotte. Inoltre, può avere CSS incorporati, anche query sui media incorporate. Ciò significa che se viene utilizzata un'icona SVG in un'app di lettura o nelle barre dei preferiti, è possibile che l'utente riceva un'icona pertinente al tema (chiara o scura) a causa degli stili di preferenza scura forniti all'interno del SVG. L'SVG si adatta quindi utilizzando lo stile incorporato per le preferenze degli utenti in modalità chiara e scura.
Segni e linee
Il markup SVG è costituito da XML che utilizza un'estensione di tipo di file .svg che consente di contenere tipi di codice più dinamici.
Inizia creando favicon.svg
Crea un nuovo file denominato favicon.svg e aggiungi quanto segue:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
Ecco il mio file SVG, ho ridimensionato l'elemento viewBox pertinente alla mia artwork:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
Aggiunta di forme e percorsi
Aggiungi il codice del percorso SVG. Spesso questo significa aprire il file SVG in un editor di codice, ma in genere questo codice non è intuitivo. Ecco un'ottima guida che ti aiuta a esportare e ottimizzare gli SVG dagli strumenti di progettazione.
L'artwork di questa sfida GUI è stata realizzata da un designer in Adobe Illustrator. L'ho ottimizzato molto. L'ho eseguito tramite SVGOMG e poi ho modificato manualmente i dati inutili.
Ecco un esempio del mio gruppo di percorsi artwork skull dopo la pulizia:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<g id="skull">
<path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
<path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
<path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
</g>
</svg>
Tieni presente i selettori di ID leggibili, come #eyes-and-nose, e le classi come .favicon-stroke. Sono le modifiche manuali che ho apportato in preparazione al CSS.
L'aggiunta di classi e ID non è obbligatoria per fare in modo che l'SVG sia una favicon adattiva.
Collega l'icona SVG dal codice HTML
Nel tag <head> del codice HTML, dopo la favicon .ico, aggiungi quanto segue:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Poiché la nuova icona potrebbe sembrare identica alla versione .ico, verifica che sia in uso. Apri il riquadro Rete di DevTools. Filtra per immagini e cerca la favicon:
Stili
Come in HTML, puoi aggiungere un tag <style> al markup da utilizzare per quell'ambito del documento:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
La versione con tema chiaro sarà la colorazione predefinita del mio SVG della favicon. Gli stili che ho scritto erano principalmente colori di tratto e riempimento:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
.favicon-stroke {
stroke-width: 8px;
stroke: #8929ff;
}
#skull-outline { fill: white }
#eyes-and-nose, #hat-outline { fill: #8929ff }
#hat-fill, #hat-bill { fill: #e662e6 }
</style>
…
</svg>
La parte più divertente è definire lo stile della versione con tema scuro della tua favicon. Gli stili per questo verranno inseriti in una query sui contenuti multimediali all'interno del tag style:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
Il mio è finito così:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
.favicon-stroke { stroke: #343a40 }
#skull-outline { fill: #adb5bd }
#hat-outline { fill: #343a40 }
#eyes-and-nose { fill: #343a40 }
}
</style>
…
</svg>
Ho scelto di sostituire i bordi viola brillante con un bel grigio scuro (#343a40),
ho cambiato il colore delle ossa del teschio dal bianco a un grigio chiaro (#adb5bd), ma
ho lasciato il cappello di colore rosa.
Conclusione
Ora che sai come ho fatto, come faresti? 🙂
Diversifichiamo i nostri approcci e impariamo tutti i modi per creare sul web. Crea una demo, twittami con i link e io la aggiungerò alla sezione dei remix della community qui sotto.