Gratis een favicon maken van PNG of JPG
Met de Favicon-generator kun je snel een favicon maken voor jouw website. Sleep een afbeelding of logo in het vak bovenaan en ontvang direct een compleet ZIP-pakket met favicon.ico, PNG-bestanden voor alle apparaten en een site.webmanifest. Alle verwerking vindt lokaal plaats in je browser, dus je bestanden worden nooit naar een server geüpload.
Een icoon voor je website maken: stappenplan
Een icoon voor je website maken werkt via een eenvoudig proces op je eigen apparaat:
- Sleep een afbeelding in het invoervak of klik om een bestand te selecteren. Een vierkant logo van minimaal 256x256 pixels geeft het scherpste resultaat.
- Bekijk het live voorbeeld in het nep-tabblad en de voorbeeldweergave van het startscherm.
- Open Aanpassingen om eventueel extra marge toe te voegen of een achtergrondkleur in te stellen.
- Download het complete ZIP-pakket met alle pictogrammen en de HTML-code.
PNG naar ico en PNG naar favicon omzetten
Veel ontwerpers willen een PNG naar ico converteren of een PNG naar favicon omzetten. PNG is de meest geschikte bron omdat het transparantie behoudt, wat direct wordt overgenomen in de gegenereerde pictogrammen.
Als je een PNG naar ico omzetten wilt, maakt de tool automatisch een favicon.ico-bestand met meerdere formaten aan waarin de resoluties 16x16, 32x32 en 48x48 pixels gecombineerd zijn.
JPG naar favicon converteren
Het is net zo eenvoudig om een JPG naar favicon te converteren. Aangezien een JPG-afbeelding geen transparantie ondersteunt, kun je in het paneel Aanpassingen een achtergrondkleur kiezen om lege ruimtes netjes op te vullen.
Standaard favicon afmetingen voor browsers en mobiel
Moderne apparaten vereisen verschillende favicon afmetingen. Het downloadpakket bevat de juiste maten voor elk doel:
favicon.ico: multi-resolutie bestand (16x16, 32x32 en 48x48 pixels) voor maximale achterwaartse compatibiliteit.favicon-16x16.pngenfavicon-32x32.png: afzonderlijke afbeeldingen voor browsertabbladen.favicon-48x48.png: het specifieke formaat dat Google gebruikt in zoekresultaten.apple-touch-icon.png: 180x180 pixels voor iOS-startschermen.icon-192.pngenicon-512.png: voor Android-startschermen en Progressive Web Apps.
Gebruik van de PNG naar ico converter en installatie
Deze gratis png naar ico converter genereert niet alleen de afbeeldingsbestanden, maar levert ook de juiste HTML-code in het bestand favicon-tags.html. Pak het ZIP-bestand uit en upload alle afbeeldingsbestanden en het site.webmanifest naar de hoofdmap van je website, zoals public_html of www.
Open vervolgens favicon-tags.html, kopieer de <link>-tags en plak ze direct in de <head>-sectie van je HTML-pagina's.
Veelgestelde vragen
Hoe kan ik gratis een favicon maken van een afbeelding?
Sleep je afbeelding of logo naar het vak bovenaan deze pagina. Pas eventueel de randen en achtergrondkleur aan bij Aanpassingen en klik op de downloadknop om het ZIP-pakket met alle bestanden en HTML-code te downloaden.
Wat is het verschil tussen favicon.ico en PNG-pictogrammen?
Een favicon.ico is één enkel bestand dat meerdere resoluties tegelijk bevat voor klassieke browserondersteuning. PNG-bestanden zijn afzonderlijke afbeeldingen voor specifieke toepassingen zoals browsertabbladen, Google-zoekresultaten en mobiele startschermen.
Welke favicon afmetingen zijn nodig voor een website?
Browsers gebruiken 16x16 en 32x32 pixels voor tabbladen, Google vraagt 48x48 pixels voor zoekresultaten, iOS gebruikt 180x180 pixels en Android gebruikt 192x192 en 512x512 pixels. Deze tool genereert al deze formaten automatisch in één pakket.
Waar moet ik het bestand favicon.ico uploaden op de server?
Upload het bestand favicon.ico en de overige afbeeldingsbestanden naar de hoofdmap van je website, wat vaak de map public_html of www is. Voeg vervolgens de meegeleverde HTML-code toe aan de head-sectie van je webpagina's.
Waarom zie ik mijn nieuwe favicon niet meteen in de browser?
Browsers slaan favicons vaak op in hun geheugen. Als je het nieuwe icoon niet direct ziet, voer dan een harde vernieuwing uit of leeg de cache van je browser.
Wat is een site.webmanifest bestand en waar dient het voor?
Een site.webmanifest is een klein JSON-bestand dat browsers vertelt hoe je website zich gedraagt als een gebruiker deze toevoegt aan het startscherm op Android. Het verwijst naar de gegenereerde 192px en 512px pictogrammen.
Aanbevolen
-
The $100 Startup (Chris Guillebeau)Je site heeft een icoon; laat hem nu geld opleveren
-
Wacom Intuos Small TekentabletTekening je eigen logo en favicon met de hand
-
InnoView 15,6" Draagbare MonitorEen tweede scherm voor het bouwen van je website
Help de tools gratis te houden. ✨
Afbeeldingen dienen ter illustratie. Als Amazon-Partner verdien ik aan in aanmerking komende aankopen.
