Favicon generator: één canvas van 512 pixels, twaalf bestanden
De site staat live, het logo is goedgekeurd en op het browsertabblad staat nog steeds een grijze wereldbol. De favicon generator hieronder neemt een geüploade afbeelding, één emoji of maximaal drie letters en tekent die op een canvas van 512×512 pixels. Alle uitvoerformaten worden vanaf dat canvas geschaald. Het live voorbeeld toont het icoon als browsertabblad, als Google-resultaat en op het beginscherm van een telefoon.
Wat op je laptop blijft
De afbeelding wordt met een FileReader gelezen en in je browser op een canvas getekend. Een bestand uploaden of op een downloadknop drukken verstuurt geen enkel verzoek, en het netwerkpaneel van je ontwikkelaarstools laat dat zien. Bestanden komen binnen als gewone browserdownloads. Het codefragment komt alleen op het klembord als je op Code kopiëren drukt.
Vijf instellingen, dan de download
- Kies een bron-tabblad: Afbeelding / SVG uploaden, Emoji-favicon of Tekst / monogram. Sleep een PNG-, SVG-, JPG- of WebP-bestand, typ één tot drie letters of kies een emoji. Er zijn 14 snelknoppen voor emoji's.
- Kies een achtergrond: Transparant, Effen kleur of Moderne kleurovergang. De overgang heeft twee kleuren en een hoek van 0° tot 360°.
- Stel de binnenmarge in (0–40%, standaard 15%) en de hoekafronding (0–50%, standaard 22%, de iOS-squircle-look).
- Typ de naam van de site. Die wordt
namein het manifest en de eerste 12 tekens wordenshort_name. - Druk op Compleet pakket downloaden (.ZIP). Je kunt ook losse bestanden pakken via de formaatkaarten onder het canvas.
De twaalf bestanden en de extra's in de ZIP
Het pakket bevat deze afbeeldingsbestanden:
favicon.icoen vier PNG's van 16, 32, 48 en 96 pixels- Drie Apple Touch Icons van 180, 152 en 120 pixels.
- Android-iconen van 192 en 512 pixels, plus een maskable icoon van 512.
- Een Windows-tegel van 150 pixels.
De ZIP voegt site.webmanifest, browserconfig.xml en een README.txt toe. De knop Code kopiëren geeft je de bijbehorende <link>- en <meta>-tags voor de head van je pagina.
Waar het resultaat je kan verrassen
Het .ico-bestand bevat drie PNG-lagen: 16, 32 en 48 pixels. Een laag van 64 of 256 pixels bestaat niet. Emoji's gebruiken het emoji-lettertype van je besturingssysteem, dus dezelfde emoji ziet er op macOS, Windows en Android anders uit. Monogrammen gebruiken systeemlettertypen, en Impact of een schrijfletter kan op jouw computer vervangen worden door een ander lettertype.
Hoekafronding en marge gelden voor elk bestand, ook het maskable icoon. Voor een maskable icoon tot de rand zet je de afronding op 0 en houd je je ontwerp binnen de stippellijncirkel. Het HTML-fragment verwijst naar de .ico, de PNG's van 16 en 32 pixels, het Apple-icoon van 180 pixels, het manifest en de Windows-configuratie. De bestanden van 48, 96, 152 en 120 pixels zitten in de ZIP maar worden niet gelinkt. Een kleine rasterafbeelding wordt opgeschaald, dus begin met 512×512 pixels of meer. Als de achtergrond niet effen is, is de themakleur in het manifest #2563eb.