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.

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.

Peter Doolaard

Peter Doolaard is auteur van het Handboek HTML5 en CSS3. Dat geeft een behoorlijk compleet overzicht van wat HTML en CSS te bieden hebben. Hij werkt nu aan een nieuw boek: Websites bouwen met HTML, CSS en JavaScript. Een praktisch doe-boek, met vragen, opdrachten en projecten. En natuurlijk uitleg over HTML-elementen, CSS-eigenschappen en JavaScript-opdrachten. De komende tijd publiceert Computer Creatief artikelen die je een idee geven van wat je van het nieuwe boek kunt verwachten. Bekijk alle boeken van Peter.