Naar de inhoud
FlexiConvert

Favicon-generator

Alle iconen van je website op basis van je logo, klaar om te uploaden.

Andere tools: JPEG naar JPG JPG comprimeren PNG comprimeren WebP comprimeren Afbeelding verkleinen Afbeelding bijsnijden Afbeeldingen samenvoegen

Eén bestand tegelijk, tot 20 MB.

Passen in het vierkant

Iconen zijn vierkant. Is je afbeelding dat niet, kies dan of ze helemaal zichtbaar is (met transparante randen) of het vierkant vult.

Voor het Apple-icoon, dat niet transparant mag zijn, en als themakleur op Android.

Je bestanden worden automatisch verwijderd na de conversie en uiterlijk een uur na het uploaden. Hoe we met je bestanden omgaan

Maak de complete favicon van je website op basis van je logo: het icoon in het browsertabblad, de iconen voor het beginscherm van een iPhone en Android-telefoon, het manifest en de HTML-code om alles te koppelen. Upload een PNG-, JPG-, WebP- of SVG-afbeelding en download een zip met alles, zonder account en zonder watermerk.

Zo maak je een favicon

  1. Selecteer je logo of icoon in PNG, JPG, WebP of SVG, bij voorkeur vierkant en minstens 512 pixels groot.
  2. Kies of de afbeelding helemaal zichtbaar is of het vierkant vult, en de achtergrondkleur van het Apple-icoon.
  3. Klik op “Favicon maken” en download de zip.
  4. Zet de bestanden in de hoofdmap van je website en plak de code uit head.html in de head-tag van je pagina’s.

Wat er in het pakket zit

Bestand Waarvoor
favicon.ico Het klassieke tabbladicoon, met de formaten 16, 32 en 48 pixels in één bestand. Browsers zoeken ernaar, ook als je het niet koppelt.
favicon-16x16.png en favicon-32x32.png De iconen voor tabbladen en bladwijzers in moderne browsers.
apple-touch-icon.png Het icoon van 180 pixels dat iPhone en iPad gebruiken als iemand je website aan het beginscherm toevoegt.
android-chrome-192x192.png en android-chrome-512x512.png De iconen voor Android en installeerbare webapps.
site.webmanifest Het manifest dat de Android-iconen en de kleur van je website vastlegt.
head.html De tags om de iconen aan je pagina’s te koppelen.

Zo installeer je het op je website

  1. Pak de zip uit en zet alle bestanden, behalve head.html, in de hoofdmap van je website (waar de startpagina staat).
  2. Kopieer deze tags, die ook in head.html staan, naar de head-tag van je pagina’s:
<link rel="icon" href="/favicon.ico" sizes="48x48">
<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="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
  1. Vul desgewenst de naam van je website in bij name en short_name in site.webmanifest.

Browsers bewaren de favicon in hun cache: zie je de nieuwe niet meteen, laad de pagina dan geforceerd opnieuw of wacht even.

Inpassen of vullen

Alle iconen zijn vierkant. Is je afbeelding dat niet, dan kun je haar inpassen, zodat ze helemaal zichtbaar is met transparante randen, of het vierkant laten vullen, waarbij wat aan de zijkanten uitsteekt wordt afgesneden. Bij een liggend logo met tekst is het vaak beter om alleen het beeldmerk te gebruiken, vierkant bijgesneden.

Het Apple-icoon mag niet transparant zijn: iOS zou de achtergrond zwart maken. Daarom maken we het met de achtergrondkleur die je kiest, die ook dient als kleur van je website op Android. De andere iconen behouden hun transparantie.

Tips voor een goed resultaat

  • Begin met een grote afbeelding, van minstens 512 × 512 pixels, of nog beter een SVG: de kleine iconen worden daaruit berekend.
  • Houd het eenvoudig: op 16 pixels zijn tekst en fijne details onleesbaar. Een symbool of een letter in contrasterende kleuren werkt veel beter.

Heb je alleen het .ico-bestand nodig, dan kun je je PNG omzetten naar ICO.

Beperkingen

  • Eén afbeelding tegelijk, van maximaal 20 MB en 100 megapixel.
  • We komen niet aan je website: je moet de bestanden zelf uploaden en de tags toevoegen, of degene vragen die je website beheert.

Veelgestelde vragen

Hoe groot moet de afbeelding zijn om een favicon te maken?

Hoe groter, hoe beter: minstens 512 × 512 pixels, of een SVG. Alle iconen, van 512 tot 16 pixels, worden daaruit berekend.

Waar zet ik de favicon-bestanden?

In de hoofdmap van je website, dezelfde map als de startpagina. Plak daarna de tags uit head.html in de head-tag van je pagina’s.

Waarom zie ik de nieuwe favicon niet in mijn browser?

Omdat browsers de favicon in hun cache bewaren. Laad de pagina geforceerd opnieuw, open haar in een incognitovenster of wacht even.

Waarom heeft het Apple-icoon een gekleurde achtergrond?

Omdat iOS geen transparantie toestaat in iconen op het beginscherm en de achtergrond anders zwart maakt. We maken het met de achtergrondkleur die je kiest, zodat het er goed uitziet.

Kan ik de favicon van mijn WordPress-website hiermee maken?

WordPress heeft een eigen optie, het “Site-icoon” (onder Weergave › Customizer › Site-identiteit of, afhankelijk van je versie en thema, in de algemene instellingen): je uploadt een vierkante afbeelding en WordPress maakt de formaten. Het pakket van deze tool is bedoeld voor websites waar je zelf bestanden kunt uploaden en de code kunt bewerken.

Zet ook je PNG, JPG, WebP of SVG-bestanden om