Una panoramica di base su come creare una favicon adattiva.
In questo post voglio condividere i miei pensieri su come creare una favicon adattiva formato SVG, Prova la demo.
Se preferisci i video, ecco una versione di questo post su YouTube:
Panoramica
Una favicon personalizzata è
un ottimo modo per perfezionare un progetto web. Viene visualizzato nelle schede del browser desktop e
anche all'interno di "Salva per dopo" lettori, altri post di blog con link al tuo sito e
altro ancora. In genere questa operazione viene eseguita con il tipo di file .ico, ma recentemente
browser hanno consentito l'uso di
SVG, un formato vettoriale. Utilizzo
progressivo
miglioramento
puoi pubblicare favicon .ico ben supportate ed eseguire l'upgrade a .svg se
disponibili.
SVG è in grado di fare lo scale up e lo scale down senza di perdita di qualità e possono essere di dimensioni molto ridotte, possono anche CSS incorporati, persino query supporti incorporate. Ciò significa che se viene usata una favicon SVG in un'app del lettore o nelle barre dei preferiti, è possibile che l'utente visualizzi un tema pertinente (chiaro o scuro) a causa degli stili di preferenza scuri forniti all'interno formato SVG, Il file SVG si adatta quindi utilizzando lo stile incorporato per gli utenti con immagini chiare e scure preferenze.
Aumento
Il markup SVG è
XML con
un'estensione di tipo .svg che gli consente di contenere più tipi di file dinamici
le API nel tuo codice.
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
Poi, aggiungi il codice del percorso SVG. Spesso ciò significa aprire il file SVG in un editor di codice, il codice in genere non è facile da usare per le persone. Ecco un'ottima guida che ti guiderà esportando e ottimizzando i file SVG strumenti di progettazione.
Gli artwork di questa GUI Challenge sono arrivati di un designer che l'ha realizzato in Adobe Illustrator. Ho molto ottimizzato. L'ho eseguito tramite SVGOMG e poi ritoccare a mano gli elementi cattivi.
Ecco un esempio del gruppo di percorsi dell'artwork skull dal mio, dopo la pulizia
Questo:
<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 l'ID leggibile da una persona
selettori come
#eyes-and-nose e
classi come
.favicon-stroke, Provengono dalle modifiche manuali in preparazione per il CSS.
Non è necessario aggiungere classi e ID affinché il tuo SVG diventi una favicon adattiva.
Collega l'SVG della favicon 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 essere identica alla versione .ico, verifica che sia
in uso. Apri il riquadro Rete di DevTools. Filtra per immagini e cerca
favicon:
Stili
Come per l'HTML, puoi aggiungere al markup un tag <style> da usare in questo
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. La gli stili che ho scritto erano principalmente colori di tratto e di 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. La gli stili pertinenti verranno inseriti in una query multimediale 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 in questo modo:
<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 del viola brillante con un bel grigio scuro freddo (#343a40),
ha cambiato il colore dell'osso del cranio da bianco a grigio chiaro (#adb5bd), ma
ha lasciato il cappello rosa.
Conclusione
Ora che sai come ci ho fatto, come faresti‽ 🙂
Diversificaamo i nostri approcci e impariamo tutti i modi per creare sul web. Crea una demo, twittami con i link e la aggiungerò alla sezione dei remix della community qui sotto.