Favicon maken

Sleep je logo hierheen, kies opvulling, achtergrond en hoeken, en download alle iconen die een website nodig heeft, met de HTML om in je pagina te plakken.

Over deze tool

Alle iconen voor je website uit één afbeelding

Browsers, iPhones en Android-telefoons willen elk hun eigen icoon. Deze tool maakt ze allemaal tegelijk, op je eigen apparaat.

Een echte ICO met meerdere formaten

favicon.ico bevat versies van 16, 32 en 48 px, zodat het tabblad, de bladwijzers en de Windows-taakbalk elk een scherp icoon krijgen. Kleine formaten worden in stappen verkleind, zodat dunne lijnen niet breken.

Klaar voor telefoons

apple-touch-icon.png (180 px) voor het beginscherm van de iPhone, iconen van 192 en 512 px voor Android en een site.webmanifest met de naam van je site en de themakleur.

Bekijk het voor je downloadt

Een voorbeeld van het browsertabblad in licht en donker, plus alle formaten naast elkaar. PNG-, JPG-, WebP- en SVG-logo's werken; transparantie blijft waar dat mag.

Zo werkt het

  1. Sleep een logo of afbeelding hierheen (PNG, JPG, WebP of SVG) of plak hem met Ctrl + V.
  2. Kies ‘Passend met rand’ of ‘Vullen en bijsnijden’, en daarna opvulling, achtergrond en ronde hoeken.
  3. Vul de naam van je site en de themakleur in voor het webmanifest.
  4. Klik op ‘Favicon maken’, download de ZIP en kopieer de HTML naar de <head> van je pagina.

Veelgestelde vragen

Worden mijn afbeeldingen naar een server geüpload?

Nee. Elke afbeelding wordt in je browsertabblad gelezen, bewerkt en opgeslagen met Canvas, Web Workers en WebAssembly. Er wordt niets geüpload, bewaard of gelogd.

Welke bestanden zitten in de ZIP?

favicon.ico (16, 32 en 48 px), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png, android-chrome-512x512.png, site.webmanifest en een HTML-bestand met de tags om in je pagina te plakken. Begin je met een SVG, dan komt favicon.svg erbij.

Waar zet ik de favicon-bestanden?

Upload ze naar de hoofdmap van je website, naast je homepage, en plak de HTML in de <head> van elke pagina. Browsers zoeken ook zelf naar /favicon.ico.

Waarom heeft het Apple-icoon een achtergrond?

iOS toont transparante beginscherm-iconen op zwart. Houd je de achtergrond transparant, dan krijgt alleen het Apple-icoon een witte; de hoeken rondt iOS zelf af.

Kan ik een favicon maken van een SVG?

Ja. De ZIP bevat dan ook favicon.svg met je opvulling, achtergrond en hoeken, die moderne browsers verkiezen omdat hij op elk formaat scherp is. De PNG- en ICO-iconen worden vanuit de SVG op 1024 px getekend en verkleind, zodat zelfs de 16 px-versie scherp blijft.

Is het gratis, en komt er een watermerk op?

Ja, je gebruikt het gratis zonder account, en Toolula voegt nooit een watermerk toe. Het gratis abonnement heeft fair-use-limieten; Toolula Pro, een optioneel abonnement, verhoogt die.