Emoji als favicon

Sinds kort ondersteunen alle moderne browsers SVG als bestandsformaat voor favicons. Een bijwerking is dat je nu ook emoji’s als SVG-favicon kunt gebruiken. (Opfrisser: een favicon is het pictogram in een browsertab of op het homescreen van je telefoon.) Nou is een emoji in de browsertab niet een heel serieuze toepassing.  De echte winst is dat je met SVG eenvoudiger mooie favicons kunt maken.

Browsertab met emoji als favicon.
De emoji als favicon in Firefox op Windows.


De code om een emoji als favicon te gebruiken kan nauwelijks eenvoudiger. Plaats dit in de head boven in een webpagina (regeleinden zijn alleen voor de leesbaarheid toegevoegd):

<link rel="icon" href="data:image/svg+xml,
  <svg xmlns='http://www.w3.org/2000/svg'
  viewBox='0 0 110 100'>
    <text y ='.9em' font-size='90'>🤯</text>
  </svg>"
>

Je krijgt de emoji uit de set van het besturingssysteem, dus het resultaat is niet op elk apparaat hetzelfde. Soms moet je spelen met de waarden van viewbox en font-size om te voorkomen dat de emoji wordt afgekapt. De getoonde code is voor Windows. (Druk op Windows+punt om de emojiset te openen. Dubbelklik op een emoji om hem in een bestand te plakken.)

Of je opdrachtgever zit te wachten op een emoji als favicon is de vraag. Het is vooral handig om je eigen projecten even snel een origineel gezicht te geven. Bovendien zeurt je lokale webserver niet meer over een ontbrekende favicon.

De echte winst is dat je met SVG eenvoudiger mooie favicons kunt maken. Het was al langer mogelijk om PNG te gebruiken, naast het oorspronkelijke ICO-bestandsformaat, maar SVG schaalt nu eenmaal beter dan bitmap. Heb je geen software waarmee je SVG-bestanden kunt maken, dan is Inkscape is een goede, gratis SVG-editor.

Voor zover bekend was Lea Verou de eerste die op het idee kwam om een emoji als SVG-favicon te gebruiken.


Goed om te zien dat het artikel je tot het einde toe heeft kunnen interesseren. De meeste artikelen op dit blog worden geschreven door de auteurs van
uitgeverij Van Duuren Media.
Ben je geïnteresseerd in verdere verdieping of meer praktische toepassingen? Klik op onderstaande banner voor het meest actuele overzicht.

Geef een reactie

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.