Blog
Het favicon
Wikipedia zegt dit over het favicon: “Een favicon, urlicon of pagina-icoon, is een pictogram dat geassocieerd is met een website.”.
Onderschat het belang van een favicon niet. Een favicon speelt namelijk een rol in de bounce rate en conversie. Er een hebben is dus belangrijk.
Een favicon kan worden gebruikt door een <link>-tag in de <head>-sectie van de HTML-code in te voegen.
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"><link rel="shortcut icon" type="image/gif" href="/favicon.gif"><link rel="shortcut icon" type="image/png" href="/favicon.png">Maar zo gemakkelijk is het uiteraard niet (meer). Er zijn immers verschillende browsers en verschillende platformen waar we rekening mee moeten houden.
Volgens Favicon Generator moeten we volgende code aan de HTML toevoegen.
Voor Internet Explorer 9
<!--[if IE]><link rel="shortcut icon" href="/favicon.ico"><![endif]-->De code gebruikt ‘conditional comments’ omdat het enkel voor Internet Explorer 9 en lager is.
Het klassieke favicon
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="194x194" href="/favicon-194x194.png">Verschillende groottes zijn nodig voor schillende browsers en platformen.
Voor iPhone en iPad
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">Men kan iconen van websites aan het homescherm toevoegen, die iconen verschijnen als normale app-iconen. Verschillende groottes zijn nodig voor schillende versies van toestellen (o.a. retina en niet-retina).
Voor Android Chrome
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">Men kan iconen van websites aan het homescherm toevoegen, die iconen verschijnen als normale app-iconen.
<link rel="manifest" href="/manifest.json">Het manifest.json-bestand is het Web application manifest, gedefinieerd door het W3C. Het wordt momenteel enkel gebruikt door Android Chrome.
Voor Safari 9
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#d63b00">Het icoon voor gepinde tabs op OS X El Capitan (versie 10.11) moet monochroom en in SVG-formaat zijn.
Voor Windows 8 / Internet Explorer 11
<meta name="msapplication-TileColor" content="#d63b00">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">Voor msapplication.TileColor is het aangeraden om een kleur te kiezen uit de Metro UI.
Voor Android
<meta name="theme-color" content="#d63b00">Voor Android Chrome. Men kan de taakbalk in het overzcht een andere kleur geven.
De gulden middenweg
Aangezien bovenstaande eigenlijk belachelijk veel code is om enkel een favicon te tonen en van het goede te veel is, kan je een verkorte versie gebruiken.
<!--[if IE]><link rel="shortcut icon" href="path/to/favicon.ico"><![endif]-->
<link rel="icon" type="image/png" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">Andere artikelen
BeTrains icoon
Beter laat dan nooit. Mijn redesign van de BeTrains app miste nog een aangepast icoon volgens de Material Design richtlijnen. Dus een voorstel voor een nieuw icoon mocht niet ontbreken.
