Creare una favicon adattiva

Una panoramica di base su come creare una favicon adattabile.

In questo post voglio condividere alcune idee su come creare una favicon adattabile con SVG. Prova la demo.

Le schede del browser si adattano alle modifiche del tema chiaro e scuro del sistema macOS. 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 e anche all'interno dei lettori "Salva per dopo", di 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.

Esempi di favicon chiari e scuri di grandi dimensioni e facili da distinguere.

Schede chiare e scure in ogni browser che forniscono una panoramica dell'icona adattiva da cima a fondo: Safari, Firefox, Chrome.
Schede chiare e scure in ogni browser che forniscono una panoramica dell'icona adattiva da cima a fondo: Safari, Firefox, Chrome.

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 impostato le dimensioni del viewBox pertinente per la 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 l'SVG in un editor di codice, ma il codice in genere non è di facile lettura. Ecco un'ottima guida che ti aiuta a esportare e ottimizzare gli SVG dagli strumenti di progettazione.

L'artwork di questa sfida GUI è stata creata 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.

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:

Screenshot del riquadro Rete di DevTools con un filtro per la ricerca di favicon e la risorsa favicon.svg evidenziata.

Stili

Come in HTML, puoi aggiungere un tag <style> al markup da utilizzare per l'ambito del documento:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
  <style>
    
  </style>
  …
</svg>

La versione del tema chiaro avrà la colorazione predefinita della mia favicon SVG. Gli stili per i quali 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>

Anteprima di favicon con tema chiaro di esempio.

A questo punto, la parte più divertente: lo stile della versione del tema scuro della 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>

Screenshot di DevTools che mostra la query multimediale del tema scuro che sovrascrive il colore di riempimento degli occhi e del naso dell&#39;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>

Anteprima di favicon in tema scuro di esempio.

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.

Anteprima delle favicon chiare e scure una accanto all&#39;altra.

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 i link e io la aggiungerò alla sezione dei remix della community di seguito.

Remix della community