Volg dit voorbeeld en pas daarna dezelfde instellingen toe op je eigen afbeelding. Open Favicon / ICO generator.
Kies een duidelijk logo of begin met initialen
Open Favicon / ICO Generator en kies Afbeelding. Upload een PNG, JPG, JPEG, WebP of GIF, of selecteer Probeer een voorbeeld. Het uitgewerkte voorbeeld gebruikt favicon-orbit.png, een 512 × 512 pixel violet orbit-merkteken met transparante hoeken. De invoer is 202,491 bytes.
Voor een merk zonder afgewerkt logo, selecteer Tekst op de toolpagina. Voer één of twee letters in en kies Doorgaan. De editor biedt Modern sans, Classic serif en Monospace lettertypes, plus afzonderlijke tekst- en achtergrondkleuren. Tot drie tekens worden geaccepteerd, maar extra tekens kunnen moeilijk herkenbaar worden op kleine formaten.
Bewaar het originele artwork. De generator maakt nieuwe icoonbestanden en overschrijft de bron niet. GIF-invoer wordt een stilstaand icoon in plaats van een geanimeerde favicon.
Voor een monogram begint het menu Lettertype met drie meegeleverde stijlen. Selecteer Gebruik systeemlettertypes op een ondersteunde desktopbrowser en sta toegang toe om de op uw apparaat geïnstalleerde lettertypes toe te voegen. Gebruik de vorige en volgende pijltjes om aangrenzende lettertypes te vergelijken, of kies een familie en inspecteer het live voorbeeld, vooral op 16 pixels. Lettertypes blijven op uw apparaat; de meegeleverde stijlen werken zonder toestemming.
Gebruik een eenvoudig silhouet. Een gedetailleerde foto kan er aantrekkelijk uitzien op 512 pixels, maar een onduidelijke vlek worden op 16 pixels.
Verfijn de kadrering en inspecteer kleine voorbeelden
De editor toont lichte en donkere browsertabbladen plus voorbeelden op veelvoorkomende icoonformaten. Controleer eerst het 16-pixel voorbeeld; dit is de strengste test of het merkteken herkenbaar blijft. Het Apple Touch-voorbeeld vertegenwoordigt een 180-pixel export en wordt kleiner weergegeven in de werkruimte.
Open op een telefoon Instellingen. Laat Maken van ingesteld op Geüploade afbeelding en Afbeeldingspassing op Toon de hele afbeelding. Stel voor dit voorbeeld Ruimte rond inhoud in op 0 en schakel Transparante achtergrond in. De bron bevat al zijn eigen afgeronde violette vorm en duidelijke marges, dus het heeft geen extra gekleurde achtergrond nodig.
Bij een andere bron behoudt Toon de hele afbeelding de randen, terwijl Vul het icoon ze kan bijsnijden. Afgerond vierkant, Vierkant en Cirkel bepalen de buitenste vorm. Transparante achtergrond behoudt duidelijke gebieden, maar kan geen ondoorzichtige achtergrond verwijderen die al in een foto is getekend. Bekijk het kleinste voorbeeld na elke wijziging in de kadrering.
Een logo met transparante hoeken kan een ongewenst tweede kader krijgen als u een afzonderlijke ondoorzichtige achtergrond toevoegt. Bekijk beide achtergrondkeuzes.
Het voorbeeld in deze handleiding
Probeer een voorbeeld: favicon-orbit.png, 512 × 512 px. Geüploade afbeelding; Toon de hele afbeelding; Afgerond vierkant; Ruimte rond inhoud 0%; Transparante achtergrond ingeschakeld; Website icon package (ZIP); Website name My website.
- Bronafbeelding
- 512 × 512 PNG · 202,491 bytes
- ICO frames
- 16, 24, 32, 48, 64, 128 en 256 px
- Pakket
- 9 bestanden · 304,351 bytes
- Getoond resultaat
- Echt 256 × 256 ICO-frame
Kies een multi-size ICO of het websitepakket
Kies onder Download voor Website icon package (ZIP) voor dit voorbeeld. Laat Website name op My website staan voor het voorbeeld, of vervang het door de echte merknaam voor je eigen project. Deze naam wordt gebruikt in site.webmanifest; het wordt niet als tekst over de afbeelding toegevoegd.
Selecteer Start. De browser genereert een favicon.ico met zeven frames met vierkante afbeeldingen van 16, 24, 32, 48, 64, 128 en 256 pixels. Het maakt ook PNG iconen van 16, 32, 48, 180, 192 en 512 pixels, een manifest en installatie-instructies. Het resultaat is één ZIP-bestand in plaats van een aparte downloadknop voor elk icoon.
Als je alleen een klassieke favicon.ico nodig hebt, kies dan in plaats daarvan voor Multi-size ICO. Dit is handig wanneer een websiteplatform een ICO-upload accepteert en geen apart pakket vereist.
Het pakket is een set website-icoonbestanden. Het verandert de site niet automatisch in een progressive web app.
Download, installeer en verifieer de icoonbestanden
Download slaat website-icons.zip op. Het daadwerkelijke voorbeeld bevat negen bestanden en is 304,351 bytes groot. De vergelijking hierboven toont de bron van 512 pixels naast het echte frame van 256 pixels dat uit de geëxporteerde ICO is gehaald, in plaats van een gesimuleerde browserscreenshot.
Pak de ZIP uit, upload de icoonbestanden naar de root van je website en lees INSTALL.txt. Het bevat HTML link-tags voor de ICO, PNG-icoon, Apple Touch-icoon en webmanifest. Als je de bestanden in een submap plaatst, werk dan zowel de HTML-paden als de icoonpaden in site.webmanifest bij.
Controleer je site in een nieuw browsertabblad en op de apparaten die voor jou belangrijk zijn. Browsers kunnen favicons cachen, dus een oud icoon bewijst niet direct dat de installatie is mislukt. Bewaar de bronafbeelding en het gedownloade pakket voordat je de editor ververst, omdat een verversing terugkeert naar de hoofdpagina van de tool.
Kies één canonieke icoonlocatie en houd de HTML-paden consistent. De generator maakt assets; het publiceren ervan blijft onderdeel van je website-workflow.
Veelgestelde vragen
Kan ik een favicon maken zonder een logo te uploaden?
Ja. Selecteer Tekst, voer je initialen in en kies vervolgens het lettertype, de kleuren, de vorm en de spatiëring in de editor.
Welke formaten zitten er in het ICO bestand?
Het ICO bevat zeven PNG-gebaseerde frames: 16, 24, 32, 48, 64, 128 en 256 pixels in het vierkant. De browser selecteert een geschikt frame.
Wat zit er in de website-ZIP?
Het bevat favicon.ico, zes PNG iconen voor browser-, Apple- en Android-gebruik, site.webmanifest en INSTALL.txt met de HTML link-tags.
Kan mijn favicon een transparante achtergrond hebben?
Ja. Schakel Transparante achtergrond in. Dit behoudt transparante gebieden rond de bron; het verwijdert geen ondoorzichtige achtergrond van een foto.
Wordt de afbeelding geüpload voor conversie?
Nee. Deze tool genereert en verpakt de icoonbestanden in je browser. Bewaar de gedownloade bestanden, want de editor is geen permanente projectopslag.
Kan ik lettertypes gebruiken die op mijn computer zijn geïnstalleerd?
Ja, wanneer je browser toegang tot lokale lettertypes ondersteunt. Kies Tekst / monogram, selecteer Gebruik systeemlettertypes en geef de browser toestemming. Je beschikbare lettertypefamilies verschijnen in de lijst Lettertype. De meegeleverde stijlen blijven bruikbaar als toestemming wordt geweigerd of lokale lettertypetoegang niet beschikbaar is.
Geef je volgende website een duidelijke kleine handtekening.
Probeer een voorbeeld of gebruik je eigen bestand en bekijk het resultaat voordat je het deelt.
