HTML: favicons

Dit zijn de icoontjes die verschillende systemen gebruiken om jouw website als icoon weer te geven. Links naar die verschillende iconen plaats je in de <head> van je html.

Voorbeeld:

html

<head>
  <link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="favicons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="favicons/favicon-16x16.png">
  <link rel="manifest" href="favicons/site.webmanifest">
  <link rel="mask-icon" href="favicons/safari-pinned-tab.svg" color="#5bbad5">
</head>

Dit is best veel werk zijn om altijd manueel te doen, laat je dus helpen door een online tool: realfavicongenerator

Tips

Gebruik best een svg als bronbestand van je favicon
Controleer goed het Favicon path. Zorg ervoor dat dit overeenstemd met de locatie waar je de favicons plaatst. Gebruik bij voorkeur een relatief pad
Favicons horen in de <head> van je pagina

HTML: favicons ​

HTML: favicons