Hoe maak ik een favicon

Heb je je wel eens afgevraagd, waarom in de tabbladen van de bezochte websites een klein plaatje staat? Een plaatje waaraan je in de meeste gevallen een website kunt herkennen? Nu juist daarvoor is het bedoeld. Herkenbaarheid. Dat icoontje, een favicon, urlicon, pagina-icoon of snelkoppelingspictogram, genaamd, is een pictogram dat de associatie met een website verzorgt.

Tabbladen van een browser

Vroeger was alles eenvoudiger. Er waren er alleen maar desktops (wel meerdere besturingssystemen) waarop een webbrowser kon draaien. Je maakte één favicon, zette die in de root van je website, paste de instelling van je sjabloon/thema/template aan en klaar. Tegenwoordig is dat wat lastiger doordat er een veelvoud is aan apparaten: telefoons, tablets en desktops in vele schermmaten. En een verscheidenheid aan leveranciers van besturingssytemen voor deze apparatuur: Microsoft met Windows, Apple met OS-X en iOS, Linux in vele soorten en maten, Google’s Android, enzovoorts. Iedere leverancier bedenkt weer nieuwe toepassingen voor de favicons met ieder z’n eigen eisen. Hoe maak je die allemaal en hoe houdt je de soortenrijkdom bij om je website overal zo goed mogelijk zichtbaar te maken met een favicon?

Ik ontdekte een zeer goede website die alle huidige (fav)icons kan maken (Windows, Mac, Linux, iPhone, iPad, Android telefoons en -tablets en meer). Hoe dan? Wat is er voor nodig en hoe zet je dit in de website. Hiervoor maken we gebruik van de website RealFaviconGenerator.

Diverse Content Management Systemen (CMS-en) hebben een plug-in om de laatste versies te beheren voor je website en die gebruik maken van de gegevens die RealFaviconGenerator levert. Zo kent Drupal de module responsive_favicons en WordPress de plugin Favicon by RealFaviconGenerator. Voor zover mij bekend is er voor Joomla geen plug-in, maar hebben meerdere personen de hieronder genoemde RealFaviconGenerator gebruikt voor hun site.
Websites, gebouwd met andere technieken, kunnen dit programma ook gebruiken.

Hoe werkt het

Als bron heb je een afbeelding nodig. Vaak zal dat het logo van een bedrijf of organisatie zijn. Gebruik een liefst vierkante afbeelding van minimaal 70x70px tot 260x260px. Is de afbeelding kleiner / groter dan wordt deze automatisch vergroot / verkleind. Gebruik voor het beste resultaat een zo groot mogelijke afbeelding. Het formaat moet png, jpg of svg zijn.
Controleer tevoren of de afbeelding zowel op 16x16px als op 180x180px nog herkenbaar is.

Ga naar de Real Favicon Generator website. Klik op [Select your favicon image] en selecteer de afbeelding op je computer.

Er worden meerdere favicons aangemaakt: verschillende platform / browser combinaties hebben ieder eigen eisen / wensen. De aan te maken favicons kunnen ieder naar keuze aangepast worden. Met name bij transparante logo’s is de optie om per favicon de achtergrondkleur (background color) aan te passen erg prettig.
Door het klikken op [Generate your favicons and HTML code] worden de verschillende favicons automatisch voorgesteld. En kunnen op de volgende pagina ieder nog worden aangepast aan de eigen wensen / doelstellingen. Je kunt de instellingen uitproberen / weer terugzetten naar de uitgangspositie. Het resultaat is direct zichtbaar links naast de instellingen.
Voor de meeste favicons kunnen de standaard instellingen worden gebruikt.

De aangemaakte favicon staat in een geselecteerd tabblad en daaronder in een niet geselecteerde tab. Daarnaast zoals deze bij zoekresultaten van Google op een desktop resp. mobiel apparaat te zien is (gaat worden?). Je kunt de standaardinstelling van de favicon gebruiken (Use the origial image as is).
Maar deze is aanpasbaar. Kies daarvoor ‘Add margins and a plain background’. Je kunt een andere achtergrondkleur kiezen, de hoeken vierkanter of ronder maken en de grootte aanpassen.

  • Als de aangemaakte favicon niet bevalt, kan de achtergrond kleur handmatig worden aangepast (in background color), maar kan ook een kleur uit het eigen logo gekozen worden door op de gewenste kleur te klikken. Daarnaast kan het logo (binnen dezelfde ruimte) verkleind worden waardoor er meer ruimte (margin) omheen komt in de gekozen achtergrondkleur.
  • In het tabblad ‘Assets’ kan gekozen worden om favicons voor alleen iOS 7 en latere versies te maken, alleen voor iOS 6 en eerder en voor beide. Tevens kunnen ook nog de (oude) precomposed favicons worden aangevinkt om meegeleverd te worden.
  • Tot slot kan in het tabblad ‘Dedicated picture’ een ander logo worden gekozen voor iOS.

  • Als de aangemaakte favicon niet bevalt, dan ook hier de ruimte om het logo en (op dezelfde manieren als voor iOS) de achtergrondkleur worden aangepast. Tevens kan een smalle shaduw rond het favicon worden gemaakt, vergelijkbaar aan de officiële Google apps (Gmail, Play Store, YouTube…).
    Van belang is om de naam van je website of app achter de ‘App name’ in te vullen (niet al te lang!).
    Onderaan kan de kleur van het thema worden aangepast. Beginnend met Android Lollipop, is de kleur van de taakbalk in de tabbladen in te stellen (klik op ‘Switcher’ onder het voorbeeld!).
  • In het tabblad ‘Options’ is de mogelijkheid om te kiezen tussen de browser mode of de standaard keuze: alleenstaand. De laatste is een aan Android aangepaste stijl en geeft de mogelijkheid om een specifieke van je website pagina als startpagina in te stellen (niet ingevuld = de normale startpagina). Tevens is de voorkeursorientatie ‘Portret’ (verticaal) of ‘Landschap’ (horizontaal) in te stellen. Standaard is dit: geen voorkeur.
  • Onder ‘Assets’ is de keuze tussen iconen met hoge resolutie voor Chrome versie 39 en later (standaard) of om alle gedocumenteerde favicons aan te maken. Voor eerdere Android versies kan worden opgegevens welk icoon gebruikt moet worden in plaats van het Apple Touch icon (zie iOS hierboven).
  • Bij ‘Dedicatet picture’ kan, net als bij iOS een afwijkend logo worden opgegeven voor Android.

  • In het basis scherm kan de kleur van de tegel worden opgegeven.
  • In ‘Assets’ kan voor Windows 8.0 en IE 10 een middelgrote, vierkante tegel moet worden gemaakt. Tevens of alleen voor Windows 8.1 en 10 / IE 11 en Edge worden in het bestand ‘browserconfig.xml’ de te kiezen favicontegels geplaatst. Er kunnen meerdere tegelgroottes worden aangemaakt. De keuze is uit klein, middelgroot, groot (allen vierkant) en/of dubbel breed.
  • Ook voor Windows kan een speciaal logo worden gekozen in het tabblad ‘Dedicated picture’.

  • In macOS wordt het favicon in drie smaken weergegeven: vastgezette tab, zonder focus, idem met focus en voor de touch bar. De kleur van de favicon kan meer of minder monochroom (eenkleurig) worden gemaakt.
    In plaats van het logo kan gekozen worden voor de eerste letter van de domeinnaam. Dit laatste voldoet aan de compatibiliteitseisen van W3C (het World Wide Web consortium). Tevens kan je eigen kleur weer worden ingesteld.
  • We worden niet moe: ook voor macOS kan een eigen logo worden opgegeven.

  • Voordat de favicons worden gegenereerd kunnen we nog diverse zaken instellen. Als eerste: waar komen de favicons in de website te staan: in de root (basis directory / map van de website) of een zelf te kiezen directory.
    De Drupal-module responsive_favicons zet de icons in een andere map maar er moet toch de root worden opgegeven. Het werkelijke pad wordt door de Drupal-module zelf aangepast.
  • Het tabblad ‘Version/Refresh’ geeft de mogelijkheid om aan te geven dat het de eerste favicon op je website is (= de standaard instelling) of dat deze gewijzigd wordt. Hiermee zullen bezoekers en zoekmachines de gewijzigde favicons sneller gaan gebruiken.
  • Onder ‘Compression’ kan worden opgegeven of de bestandsgrootte van de favicons gecomprimeerd (compressed) moet worden. De keuze van links boven naar rechts onder is geen verkleining tot een maximale comprimatie. Door te grote compressie kan de kwaliteit laag (de favicon is dan vaag) worden. Je ziet de resultaten.
  • ‘Scaling algorithm’: kies hier de methode om de favicons te verkleinen (minder breed/hoog). Afhankelijk van het logo kan het resultaat voor een favicon van 8x8px (8 maal vergroot) perfect of waardeloos zijn.
  • In ‘App name’ kan de naam van je app worden opgegeven. Standaard wordt de paginanaam door de browser gebruikt. Maar er kan ook een vaste naam worden opgegeven. Is bij Chrome voor Android een naam opgegeven dan is deze hier al ingevuld.
  • Bij ‘Additional files’ kunnen twee extra bestanden worden aangemaakt: ‘README.md’ met de installatie instructies. In ‘html_code.html’ komt de HTML opmaak van de favicons. Dit laatste bestand kan in de HTML worden opgenomen.

Klik nu op [Generate your Favicons and HTML code].

De installatie instructies

Op het volgende scherm staan de instructies hoe de aangemaakte favicons in de website kunnen worden gezet. Er kan gekozen worden uit diverse soorten opmaak- / programmeertalen: HTML5, ASP.net, enz.
Bij HTML5 kan bij 1. een .zip bestand worden gedownload met hierin alle favicon bestanden en bij punt 3 de HTML code worden gekopieerd die in de <head> sectie van de websitepagina’s gezet moet worden (zie hieronder).
De output voor ASP.NET Core is vergelijkbaar met HTML. Onder punt 4 staat de HTML code en in punt 3 wordt de inhoud van een aan te maken bestand weergegeven.

Hieronder wordt alleen voor HTML5 aangegeven hoe de favicons en bijbehorende code in de website moeten worden gezet.

Controleer of Real Favicon Generator in de output onder punt 3 ook de regel
<meta name="msapplication-config" content="/browserconfig.xml" />
heeft geplaatst. Zo niet voeg die dan toe om ook in Windows 10 favicons tegels te kunnen gebruiken.

Aanpassen in Drupal en WordPress

Verwijder een reeds aanwezige favicon-beheer plug-in. Maak eventueel handmatig verwijzingen (redirects) van de bestaande favicon(s) naar de nieuwe.
Installeer de eerder genoemde betreffende favicon-beheer plug-in.

Voor Drupal: ga naar de instellingen van de module en zet de gegevens uit punt 3 in het invulvlak en upload het zip bestand. Geef aan dat de standaard favicons uitgeschakeld moeten worden. Sla de instellingen pagina op en maak de caches leeg. Verwijder de al aanwezige favicons uit de root van de website en kopieer favicon.ico en browserconfig.xml uit het zipbestand naar de root van de website. Favicon.ico wordt het enige favicon-bestand in de root. Het is niet persé nodig maar wordt hier sneller gevonden.
Windows kan browserconfig.xml alleen vinden als het in de root staat, anders kan er geen tegel worden gemaakt.

In de WordPress plugin hoeft alleen de te gebruiken afbeelding te worden opgegeven. De favicon generator wordt automatisch opgestart. Stel je eigen gegevens in. Het resultaat wordt automatisch opgehaald en in WordPress gebruikt. Klaar!

Aanpassen in andere HTML websites

De regels uit punt 3 moeten allemaal bovenaan in de <head> sectie van iedere webpagina worden gezet. De bestanden uit het .zip bestand van punt 1 moeten worden uitgepakt en in de root van de website worden gezet. Als in de generator aan het eind een andere map is opgegeven, dan moeten die bestanden uiteraard in de opgegeven map (directory) komen te staan.

Conclusie

In de <head> sectie van de websitepagina’s staat nu de informatie die de diverse apparaten nodig hebben om de benodigde favicons te vinden en de bijbehorende meta-informatie.

Voorbeeld resultaat

In een van mijn websites ziet het bovenste deel van de <head> sectie van de webpagina’s er als onderstaand uit (dus in de HTML van de webpagina’s). Als extra heb ik aangegeven welke regels nieuw zijn.

ATTENTIE: onderstaand voorbeeld is van september 2020. De webwereld veranderd steeds en daarmee de HTML.

<html lang="nl" dir="ltr" prefix="content: http://purl.org/rss/1.0/modules/content/ dc: http://purl.org/dc/terms/ foaf: http://xmlns.com/foaf/0.1/ og: http://ogp.me/ns# rdfs: http://www.w3.org/2000/01/rdf-schema# schema: http://schema.org/ sioc: http://rdfs.org/sioc/ns# sioct: http://rdfs.org/sioc/types# skos: http://www.w3.org/2004/02/skos/core# xsd: http://www.w3.org/2001/XMLSchema# ">
<head>
<meta charset="utf-8" />
 
<---- begin favicon informatie ---->
<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="/site.webmanifest"/>
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#dddddd"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="theme-color" content="#ffffff"/>
<meta name="msapplication-config" content="/browserconfig.xml"/>
<---- eind favicon informatie ---->
 
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Home | Mijn website</title>