Afbeeldingen · Faviconmaker

Favicons voor een website maken op een Mac

Elk favicon dat een website nodig heeft, plus het webmanifest en de HTML om in je pagina te plakken.

Werkt op je Mac

Vraag AIChatGPTClaudePerplexityAI-modusGrokMarkdown

Download OneMacTools Meer tools voor Afbeeldingen

Faviconmaker op een Mac

Faviconmaker met voorbeeldbestanden en de opties

Wat Faviconmaker van de voorbeeldbestanden heeft gemaakt

Schermafbeeldingen uit de app, met voorbeeldbestanden.

Zo gebruik je Faviconmaker

1
Sleep je logo erin
Gebruik één afbeelding, liefst vierkant en minstens 512 px. Niet-vierkante afbeeldingen worden bijgesneden tot een gecentreerd vierkant.
2
Voeg de gegevens van je site toe
Typ de sitenaam en themakleur voor het webmanifest, en kies de achtergrond van het Apple touch icon.
3
Klik op Maak favicons
Elk faviconbestand wordt gemaakt, samen met het manifest en het HTML-fragment.
4
Upload naar je site
Kopieer de bestanden uit de map “favicons” (in een map met datum in Downloads › OneMacTools) naar de root van je website, en plak de HTML in de <head> van je pagina. Het fragment wordt ook in de app getoond.

Wat Faviconmaker doet

Krijg uit één logo favicon.ico met 16, 32 en 48 px erin, PNG's van 16 en 32 px, een Apple-touch-icoon van 180 px op een effen achtergrond zodat het op iPhones niet zwart wordt, en iconen van 192 en 512 px voor Android en installeerbare webapps — plus een site.webmanifest met je sitenaam en themakleur en het HTML-fragment voor je <head>.

Ideaal voor

Een favicon aan een nieuwe website toevoegen
Maak een site installeerbaar op telefoons
Vervang een wazige favicon

Opties uitgelegd

Sitenaam: De naam die in site.webmanifest wordt gebruikt en wordt getoond als iemand je site op een telefoon installeert. Laat je het leeg, dan wordt de bestandsnaam van de afbeelding gebruikt. De korte naam bestaat uit de eerste 12 tekens.
Themakleur: Een hexkleur zoals #1E90FF, gebruikt voor de themakleur van de browser en de achtergrondkleur van het manifest. Wit als je het leeg laat.
Achtergrond Apple-touch-icoon: Wit, Themakleur of Zwart. iPhones tonen transparante beginschermiconen op zwart, dus het Apple touch icon van 180 px krijgt een effen achtergrond.
Rond de hoeken af: Standaard uit. Rondt de hoeken van je logo af in elk faviconformaat.

Tips

Gebruik een eenvoudig merkteken, niet je volledige logo met tekst. Op 16 px blijven alleen krachtige vormen herkenbaar.
Begin met een transparante PNG, zodat het favicon mooi staat op lichte en donkere browsertabbladen.
Typ de themakleur als hexwaarde. Die kleurt de browserinterface op sommige telefoons, dus kies je belangrijkste merkkleur.
Open na het uploaden je site in een privévenster om het nieuwe icoon te controleren, want browsers cachen favicons lang.

Werkt met

In: Eén afbeelding, bij voorkeur een vierkante PNG van 512 px of groter.
Uit: Een map “favicons” met favicon.ico (met 16, 32 en 48 px erin), favicon-16x16.png, favicon-32x32.png, apple-touch-icon.png (180 px), android-chrome-192x192.png en android-chrome-512x512.png, plus site.webmanifest en add-to-head.html.

Niet-vierkante afbeeldingen worden bijgesneden tot een gecentreerd vierkant.

Vragen over Faviconmaker

Welke faviconbestanden heeft een website nodig?

favicon.ico voor oudere browsers, PNG's van 16 en 32 px voor tabbladen, een Apple touch icon van 180 px voor iPhone-beginschermen, en iconen van 192 en 512 px met een webmanifest voor Android. OneMacTools maakt ze allemaal, plus de HTML om in de <head> van je pagina te plakken.

Waar komen de bestanden terecht?

In de hoofdmap van je website, naast index.html. Het HTML-fragment en het manifest verwachten ze allebei daar.

Hoe maak ik een favicon.ico op een Mac?

Sleep je logo naar Faviconmaker en klik op Maak favicons. favicon.ico wordt gemaakt met versies van 16, 32 en 48 px erin, naast de PNG-formaten.

Waarom ziet mijn icoon er zwart uit op het beginscherm van een iPhone?

iOS toont transparante delen van een beginschermicoon als zwart. Het Apple touch icon wordt daarom op een effen witte, zwarte of themakleurige achtergrond gezet.

Waar is site.webmanifest voor?

Het vertelt telefoons de naam, iconen en kleuren van je site als iemand hem aan het beginscherm toevoegt of als webapp installeert.

Mijn nieuwe favicon verschijnt niet. Wat is er mis?

Browsers cachen favicons hardnekkig. Controleer of de bestanden in de root van je site staan en het fragment in <head>, en laad de pagina dan opnieuw in een privévenster.

Uploadt Faviconmaker mijn bestanden?

Nee. Faviconmaker werkt volledig op je Mac, dus je bestanden verlaten hem nooit en het werkt offline.

Verandert Faviconmaker mijn originele bestanden?

Nee. Resultaten worden als nieuwe bestanden bewaard in een map met datum in Downloads › OneMacTools, en je originelen blijven precies zoals ze waren, tenzij je een optie aanzet die iets anders zegt.

Wat heeft Faviconmaker nodig?

Alleen een Mac met macOS 26 of nieuwer. Je hoeft verder niets te installeren.