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.