Una panoramica generale su come creare una favicon adattiva.
In questo post vorrei parlare di come creare una favicon adattiva con SVG. Prova la demo.
Se preferisci i video, ecco una versione di YouTube di questo post:
Panoramica
Una favicon personalizzata
è un ottimo modo per perfezionare un progetto web. Viene visualizzata nelle schede del browser per desktop,
nei lettori di "Salva per dopo", in altri post del blog che rimandano al tuo sito e
altro ancora. In genere questa operazione viene eseguita con il tipo di file .ico, ma recentemente i browser hanno consentito l'utilizzo di SVG, un formato vettoriale. Con il
miglioramento
progressivo
puoi pubblicare favicon .ico ben supportati ed eseguire l'upgrade a un .svg, se
disponibile.
Il formato SVG è in grado di fare lo scale up e lo scale down senza perdite di qualità e può avere dimensioni potenzialmente molto ridotte. Inoltre, possono disporre di CSS incorporati, perfino di query multimediali incorporate. Ciò significa che se in un'app di lettura o nelle barre dei preferiti viene utilizzata una favicon SVG, è possibile che l'utente visualizzi un'icona del tema pertinente (chiaro o scuro) a causa degli stili di preferenza scuri disponibili all'interno di SVG. Il file SVG si adatta quindi usando gli stili incorporati per soddisfare le preferenze degli utenti chiara e scura.
Markup
Il markup SVG è XML e 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 dimensionato il viewBox pertinente alla mia artwork:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
Aggiunta di forme e percorsi
Quindi, aggiungi il codice di percorso SVG. Spesso ciò significa aprire il file SVG in un editor di codice, ma in genere il codice non è di tipo umano. Ecco un'ottima guida che ti guida nell'esportazione e nell'ottimizzazione delle immagini SVG dagli strumenti di progettazione.
L'artwork per questa GUI Challenge è stato realizzato da un designer che l'ha realizzato in Adobe Illustrator. L'ho ottimizzato molto. L'ho controllato attraverso SVGOMG e poi l'ho modificato a mano.
Ecco un esempio del gruppo di percorsi dell'artwork skull dal mio, 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>
Osserva i selettori dell'ID leggibili da una persona, come
#eyes-and-nose, e le
classi come
.favicon-stroke. Queste sono le mie modifiche manuali, in preparazione per il CSS.
Non è necessario aggiungere corsi e ID perché il file SVG sia una favicon adattiva.
Collega il file SVG della favicon da HTML
Aggiungi quanto segue nel tag <head> del codice HTML, dopo la favicon .ico:
<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 la nuova icona sia in uso. Apri il riquadro Network (Rete) di DevTools. Filtra per immagini e cerca
favicon:
Stili
Come per l'HTML, puoi aggiungere un tag <style> al markup per utilizzarlo in base all'ambito del documento:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
La versione del tema chiaro sarà il colore predefinito del file SVG della mia favicon. Gli stili per cui ho scritto erano principalmente colori 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>
Passiamo ora alla parte più divertente: assegnare uno stile alla versione con il tema scuro della favicon. Gli stili verranno inseriti in una query supporti all'interno del tag di stile:
<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 chiaro con un bel grigio scuro freddo (#343a40),
ha cambiato il colore dell'osso del teschio da bianco a un grigio chiaro freddo (#adb5bd), ma ho lasciato il cappello decorativo rosa.
Conclusione
Ora che sai come ci sono riuscito, come faresti? 🙂
Diversifica i nostri approcci e scopriamo tutti i modi per creare sul web. Crea una demo, inviami un tweet con i link e lo aggiungerò alla sezione Remix della community di seguito.