Een favicon maken voor je website. Simpel toch?
De meeste mensen zullen bij een favicon denken aan het 16 bij 16-pixelicoontje naast de titel van een website in het browsertabblad. Tegenwoordig wordt de kleine afbeelding voor van alles en nog wat gebruikt. Van Apple Touch Icons tot aan de tiles in het Windows-startmenu. Hoe kan je een favicon maken die aan al deze doeleinden voldoet? Lees verder om erachter te komen met welke (for)maten je allemaal rekening moet houden.
Wat is een favicon?
Dit is ‘m, de favicon zoals we die al ruim 15 jaar kennen. Een piepklein icoontje naast de websitetitel dat het, naast andere belangrijke punten, lekker makkelijk maakt om een website te herkennen tussen een leger aan openstaande tabbladen.
Favicon in Internet Explorer 5. Source: advancedhtml.co.uk
Dit is niet de oorspronkelijke functie van de favicon geweest, die in 1995 voor het eerst door Microsoft geïntroduceerd werd in Internet Explorer 5. Aangezien tabbladen in deze browser nog misten, werd de favicon gebuikt als extraatje voor favoriete websites. Zodra je een website als favoriet opsloeg, kreeg je het icoontje te zien in het favorietenmenu als website icoon. Vandaar de naam favicon, een combinatie van ‘favorite’ en ‘icon’.
Nadat de organisatie voor webstandaarden (het World Wide Web Consortium) later dat jaar favicons als standaard opnam in de HTML 4.01-reccomendatie, volgden snel andere browsers en werd de functie van de favicon uitgebreid. Zo was de kleine afbeelding later ook terug te vinden in de adresbalk naast de URL van een website (nu weer verdwenen) en uiteindelijk ook in het browsertabblad.
In 2006 voegde Mozilla in Firefox als eerste PNG-ondersteuning voor favicons toe, wat overigens niet het einde betekende voor het ICO-formaat, zoals je later in dit artikel zal merken.
Een Apple Touch Icon. Source: astrio.net
Een andere belangrijke gebeurtenis volgde in 2008 met de komst van de Apple Touch Icon. Dit is een grotere versie van de favicon die verschijnt op het startscherm van een iPhone of iPad zodra een gebruiker een website opslaat. Concurrerende besturingssystemen zoals Android bieden deze functie ook aan.
Tegenwoordig kan je ook een favicon maken voor het bureaublad van je computer, de taakbalk van Windows, Google TV of zelfs voor het Windows-startmenu.
Hoe ga je een favicon maken die op al deze plaatsen juist wordt weergeven? De twee belangrijkste punten waar je rekening mee moet houden, zijn het formaat en de maat van je favicon.
Het formaat: favicon.ico of facicon.png?
PNG is het formaat dat de meeste moderne besturingssystemen en browsers verwachten. Meestal heeft het ook een kleinere bestandsgrootte, omdat een ICO-bestand bestaat uit meerdere afbeeldingen. Het grootste voordeel is misschien wel de toegankelijkheid van PNG. Het is algemeen bekend en met elke afbeeldingstool te maken. Zelfs transparante PNG’s zijn in tegenstelling tot transparante ICO’s zo geregeld.
Maar het ICO-formaat blijft nog steeds een doel dienen. Anders dan Edge en Internet Explorer 11 ondersteunen de versies 6 tot en met 10 van Internet Explorer geen favicons in PNG-formaat. Voor deze browserversies zal je een ICO-bestand genaamd favicon.ico moeten plaatsen in de rootfolder van je website. Om problemen met Google Chrome en Safari te voorkomen, wordt het afgeraden om naar dit bestand te verwijzen via een link-tag in de <head> van je HTML-document.
Aangezien Microsoft deze oude versies niet meer ondersteunt, is een ICO-bestand eigenlijk overbodig. Maar omdat bijna alle browsers dit oude formaat nog ondersteunen en er soms zelfs actief om verzoeken, is het aan te raden om het nog steeds op te nemen in je rootfolder.
Favicon-maat: 16x16px, 32x32px, 48x48px etc.?
Zoals hiervoor besproken heeft een favicon tegenwoordig verschillende doeleinden. Voor veel van deze doeleinden zal de traditionele 16 bij 16-pixelmaat niet volstaan. Hou daarom rekening met meerdere maten.
Favicon.ico
Voor ICO-bestanden noemt Microsoft de volgende maten:
16x16: voor de adresbalk en verschillende functies van een pinned site op je taakbalk
24x24: voor een pinned site op je taakbalk (IE9)
32x32: voor het overzicht in een nieuw tabblad en de taakbalkknop
48x48 en 64x64: voor schermen met een hoge resolutie
Het wordt aangeraden om in ieder geval een ICO-bestand met afbeeldingen van 16, 32 en 48 pixels op te nemen in de rootfolder van je website.
Favicon.png
Voor PNG-bestanden ligt het iets ingewikkelder, waarbij de maten opgedeeld kunnen worden in de onderstaande categorieën.
De standaard
De meeste browsers hebben altijd wel een PNG-favicon in de maten 16x16px of 32x32px nodig. Als het niet voor een tabblad is, dan is het wel voor een favorietenicoon of andere functie. Welke van de twee wordt gekozen, verschilt per browser. Gebruik de volgende twee link-tags in de <head> van je HTML-document om naar deze twee maten te verwijzen.
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
Apple Touch Icons: 180x180px
In 2008 heeft Apple de functie toegevoegd om op iPhone’s en iPad’s een website vast te zetten op het startscherm. Aangezien er nog geen platform was dat gebruikmaakte van iconen met grote maten, besloot Apple een nieuw soort PNG-icoon in het leven te roepen: het Apple Touch Icon. Met de komst van nieuwe iPhone’s en iPad’s heeft de maat voor dit icoon verschillende veranderingen ondergaan. Via een link-tag wordt in de <head> van je websitedocument verwezen naar de juiste iconen die in de rootfolder van je website horen te staan.
Apple Touch Icons tot aan iOS 7
Apple-apparaten die draaien op iOS-versie 6 of ouder, verwachten de volgende maten.
Non-retina iPhone (2G, 3G, 3GS): 57x57px
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
Non-retina iPad Mini/iPad: 60x60px en 72x72px
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-60x60.png">
Retina iPhone: 114x114px
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
Retina iPad: 144x144px
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
iOS 6 en eerdere versies passen de aangeleverde iconen aan voordat ze op het home screen verschijnen. Zo worden de hoeken van een icoon afgerond en wordt er een schaduw- en glanseffect aan toegevoegd. Om dit gedrag te ontwijken, verander je in de bovenstaande tags het rel-attribuut van “apple-touch-icon” naar “apple-touch-icon-precomposed” en het href-attribuut van “apple-touch-cion-*x*.png” naar “apple-touch-icon-*x*-precomposed”.
Apple Touch Icons voor iOS 7 en later
Non-retina iPad: 76x76px
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
Retina iPhone (4, 4s, 5, 5c, 6, 6s, 7, 7s, 8): 120x120px
<link rel="apple-touch-icon" sizes=”120x120” href="apple-touch-icon-120x120.png">
Retina iPad: 152x152px
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
iPad Pro met iOS 8+: 167x167px
<link rel="apple-touch-icon" sizes="167x167" href="apple-touch-icon-167x167.png">
iPhone 6 Plus met iOS 8+: 180x180px
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
Is het verplicht om al deze maten op te nemen in je <head> en rootfolder? Gelukkig niet, tenzij je elk Apple-apparaat tot in de pixel nauwkeurig wil ondersteunen. iOS lijkt prima overweg te kunnen met het grootste icoon van 180x180px en deze naar kleinere afmetingen te schalen wanneer dat nodig is. Eén regel code en één afbeelding is dus eigenlijk al voldoende:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
Een bijkomend voordeel van deze werkwijze is dat je gelijk oude systemen zoals Android 2.2 en Blackberry ondersteunt, die op zoek gaan naar een “apple-touch-icon.png”. Android 2.1 accepteert alleen “apple-touch-icon-precomposed.png”, dus voor ondersteuning van dit systeem is nog een extra regel code vereist:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Gezien de leeftijd van Android 2.1 is ondersteuning hiervoor in het merendeel van de gevallen overbodig. Scheelt je toch weer een regel in je HTML-document.
Let op: transparante Apple Touch Icons krijgen een zwarte achtergrondkleur! Gebruik dus geen transparante PNG-afbeeldingen als zwart niet goed matcht met je websitelogo.
Safari pinned tabs
Mac-gebruikers kunnen vanaf de El Capitan-update in Safari gebruikmaken van geavanceerde pinned tabs. De favicons voor deze functie vereisen een SVG-afbeelding (niet te verwarren met de later te bespreken SVG-favicon) en hebben daarom geen vaste maat. Voor een succesvolle weergave van de favicon in een pinned tab, moet de SVG-afbeelding volledig zwart zijn, in de rootfolder van je website staan en aangeroepen worden met de volgende link-tag.
<link rel="mask-icon" href="website_icon.svg" color="red">
Android home screen: 192x192px
Het toevoegen van een home screen icon voor Android via Chrome is een lastigere procedure dan die voor Apple Touch Icons. Dit verloopt via een zogenaamd ‘web app manifest’ dat thuishoort in de rootfolder van je website. Er is onder andere een 192x192px PNG-icoon in de rootfolder van je website vereist.
Voorbeeld van een web app manifest:
{
"short_name": "TransIP",
"name": "TransIP-website",
"icons": [
{
"src": "icon-192x192.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html"
}
Android Oreo
De nieuwe versie van Android vereist een ronde afbeelding (met transparante randen) voor een optimaal resultaat op het home screen. Alles wat niet rond is, wordt merkbaar verkleind en in een cirkel geforceerd.
Ronde home screen icons voor de nieuwste Android-versie. Source: realfavicongenerator.net
Splash screen
Sinds Chrome 47 is het ook mogelijk om een splash screen icon toe te voegen. Deze wordt getoond wanneer een gebruiker wacht op het laden van je website nadat hij deze heeft aangeklikt op zijn home screen. Voor het splash screen icon raadt Google een minimale grootte aan van 192x192px. Gelukkig dezelfde grootte als je home screen icon! Voor hogere resolutieschermen mag je nog de maten 256px, 384px en 512px in het web app manifest toevoegen, maar om data te besparen is dit niet verplicht. Voeg ten slotte nog de onderstaande meta-tag toe in de <head> van je HTML-document om te bepalen welke kleur het taakbalkvenster van jouw website heeft in het taakbalkoverzicht van Android.
Verouderd
De mogelijkheid om homescreen icons toe te voegen bestaat al sinds versie 31 van Chrome voor Android. Support tot aan versie 39 verloopt echter op een andere manier, waarbij onder andere meerdere maten van je favicon toegevoegd moeten worden. Aangezien updates voor Chrome ook beschikbaar zijn voor oudere versies van Android, kan support voor versie 31 tot 39 genegeerd worden.
Het web app manifest werkt niet voor de kleine groep mensen met een apparaat dat draait op versie 2.1 of 2.2 van Android. Deze versies maken gebruik van de hiervoor besproken Apple Touch Icons (precomposed). Support voor deze oeroude versies van Android wordt in het algemeen ook genegeerd.
Windows startscherm: 270x270px
Ook Windows geeft je de optie om je favoriete websites vast te pinnen buiten de browser. Als ‘custom tiles’ op het startscherm om precies te zijn. Voor Windows 8.1+ en Internet Explorer 11+ wordt aangeraden om vier transparante afbeeldingen te maken met als grootte:
Small: 70x70px (128x128 aangeraden voor hogere resoluties)
Medium: 150x150px (270x270px aangeraden)
Wide: 310x310 pixels (558x270 aangeraden)
Large: 310x150 pixels (558x558 aangeraden)
Vervolgens kunnen deze vier afbeeldingen, samen met het bijhorende browserconfig.xml-bestand, in de root directory van je website worden geplaatst. Het xml-bestand ziet er als volgt uit:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/smalltile.png"/>
<square150x150logo src="/mediumtile.png"/>
<wide310x150logo src="/widetile.png"/>
<square310x310logo src="/largetile.png"/>
<TileColor>#123456</TileColor>
</tile>
</msapplication>
</browserconfig>
Het medium tile van 270x270px zie je het meest voorbijkomen in het startscherm en daarom kan je er ook voor kiezen om de overige maten te negeren.
Verouderd
Als je custom tiles (in deze context ook wel pinned tiles genoemd) ook op Windows 8 in combinatie met Internet Explorer 10 wil ondersteunen, dan werkt de bovenstaande wijze niet. In plaats daarvan schrijf je de volgende twee meta-tags in de <head> van je website en voeg je een transparante afbeelding van 144x144px toe in de rootfolder.
<meta name="msapplication-TileColor" content="#123456"> <meta name="msapplication-TileImage" content="/mstile-144x144.png">
Daarnaast zijn custom tiles voor Windows Phone (in deze context ook wel live tiles genoemd) ook mogelijk, maar zeker niet makkelijk in te stellen. Zo komt er zelfs JavaScript bij kijken.
Gezien het kleine marktaandeel van zowel Windows 8/Internet Explorer 10 als Windows Phone, worden iconen voor deze platformen over het algemeen genegeerd.
Overige maten
Ten slotte zijn er nog enkele maten favicons die niet vaak worden gebruikt of zwaar verouderd zijn. Ook hierbij geldt het algemene advies om ze te negeren.
96x96px voor Google TV Een dienst die nog door weinig mensen wordt gebruikt.
160x160px / 195x195px voor de Speed Dial van oudere Opera-browserversies Nieuwe Opera-browserversies ondersteunen deze maten niet.
228x228px voor de Opera Coast-browser Een browser die door weinig mensen gebruikt wordt en een grote bestandsgrootte heeft. Bovendien valt Opera Coast terug op andere maten wanneer een afbeelding van 228x228px mist.
Help!
Wie had gedacht dat er achter zo’n klein website icoon zo veel complexe materie schuilt? Gelukkig bestaan er enkele favicongenerators die alles wat hiervoor besproken is tot in de puntjes snappen. Een daarvan is RealFaviconGenerator. Er is zelfs een plug-in voor WordPress beschikbaar. Na het lezen van dit artikel snap je gelijk een stuk beter hoe deze favicongenerator te werk gaat en waarom bepaalde favicons worden overgeslagen.
Zo heb je eigenlijk maar 6 regels aan code nodig om alle moderne platformen in 2017 te ondersteunen.
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> <link rel="manifest" href="/manifest.json"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"> <meta name="theme-color" content="#ffffff">
De rootfolder van je website bevat daarnaast de volgende bestanden. De PNG-afbeelding van 512x512px voor Android is naar onze mening optioneel.
Waarom niet alles?
Je vraagt je misschien af waarom er geadviseerd wordt om sommige maten favicons achterwege te laten. Het kan toch geen kwaad om alles te ondersteunen?
Ten eerste komt de rootfolder van je website helemaal vol te staan met verschillende afbeeldingen. Hetzelfde geldt voor de <head> in je HTML-document, die in het ergste geval meer dan 20 regels aan verwijzingen beslaat. Niet fijn om mee te werken en al helemaal geen fijn gezicht.
Daarnaast worden sommige browsers of besturingssystemen nog amper gebruikt of zelfs geeneens meer ondersteund.
Ten slotte hebben Firefox en Chrome de nare eigenschap om alle opgenomen favicons te downloaden, waardoor de mobiele databundel van je bezoekers onnodig verloren gaat.
De truc is dus om zo veel mogelijk te ondersteunen met zo weinig mogelijk middelen. Een favicon maken via SVG lijkt hiervoor de perfecte oplossing: één afbeelding die automatisch schaalt naar de juiste grootte. Helaas bieden op dit moment alleen Firefox en Opera volledige ondersteuning voor SVG-favicons. Tot de tijd dat alle browsers dit formaat ondersteunen, moeten we roeien met de riemen die we hebben.
Bedankt voor het toelichten!