Favicon-generator

Nee. Elk icoon wordt in je browser getekend en ook de ZIP wordt op je apparaat gemaakt. Je logo verlaat je computer nooit.

Dat hangt af van de vakjes die je aanvinkt. Standaard: favicon.ico (16, 32 en 48 px in één bestand), PNG-favicons, apple-touch-icon.png (180 px), android-chrome-iconen (192 en 512 px), site.webmanifest, head-snippet.html met de regels voor je pagina’s en een README.txt. Is je logo een SVG, dan kun je favicon.svg toevoegen, en je kunt maskable iconen voor Android toevoegen.

Upload de iconbestanden naar de map die je hebt ingevoerd bij “Waar upload je de bestanden?” en plak dan de regels uit head-snippet.html in de <head> van je pagina’s. WordPress, Shopify, Wix en de meeste sitebouwers hebben ook een instelling “Site-icoon” waar je in plaats daarvan de PNG van 512 px kunt uploaden.

Een favicon.ico is nog steeds de veiligste keuze, want elke browser vraagt erom. Een favicon.svg geeft een scherp icoon op elk formaat in browsers die dat ondersteunen en kan de lichte en donkere modus volgen. Het Apple-touch-icoon wordt gebruikt op beginschermen van iPhone en iPad, en de Android-iconen worden gebruikt wanneer een site wordt geïnstalleerd. Imgovo beweert niet dat één combinatie “de beste” is — het pakket volgt wat browsers en de standaard voor web-app-manifesten beschrijven.

Een eenvoudig, krachtig vierkant logo, een enkele letter of een emoji. Fijn detail en dunne tekst verdwijnen bij 16 × 16 pixels. Een transparante PNG of een SVG werkt het best; foto’s worden tot een vierkant bijgesneden en je kunt de uitsnede verplaatsen en zoomen.

Android kan een app-icoon tot een cirkel, een afgerond vierkant of een andere vorm uitsnijden. Een maskable icoon houdt het logo binnen een veilige zone (een cirkel met 40% van de icoonbreedte als straal) en vult de rest met een achtergrondkleur, zodat er niets belangrijks wordt afgesneden. Het voorbeeld toont de veilige zone en een cirkelvormige uitsnede.

iPhones en iPads tonen transparante delen van beginschermiconen als zwart, dus het Apple-icoon heeft altijd een effen achtergrond. Standaard gebruikt het je achtergrondkleur, of wit als het icoon transparant is. Je kunt wit, zwart of een andere kleur kiezen.

Ja, voor logo’s in één kleur. Imgovo voegt een kleine stijlregel toe met twee kleuren, een voor lichte en een voor donkere browserthema’s. Browsers die SVG-favicons niet ondersteunen, gebruiken favicon.ico. Bij een logo met meerdere kleuren zouden al zijn kleuren worden vervangen, dus gebruik deze optie alleen voor eenkleurig ontwerp.

Een SVG-bestand kan scripts, links en ingesloten webpagina’s bevatten. Imgovo verwijdert alles wat geen tekening is voordat het logo wordt gebruikt. Vormen, kleuren, kleurverlopen en tekst blijven staan. De melding onder het logo vertelt hoeveel onderdelen zijn verwijderd.

De afbeelding in je pakket wordt getekend met lettertypen die op je apparaat zijn geïnstalleerd, en de afgewerkte PNG- en ICO-bestanden zijn vaste afbeeldingen die er overal hetzelfde uitzien. Een emoji ziet er op Apple-, Google- en Microsoft-apparaten anders uit, dus de emoji die je hier ziet, is degene die jouw apparaat tekent.

Browsers bewaren favicons lang. Laad de pagina opnieuw met Ctrl+F5 (Cmd+Shift+R op een Mac), of open het iconadres direct (bijvoorbeeld /favicon.ico) en laad dat opnieuw. Controleer ook of de map die je hebt ingevoerd overeenkomt met waar je de bestanden hebt geüpload.

Imgovo leest elk bestand na het maken terug en controleert formaten, de ICO-directory, het manifest en de regels in head-snippet.html. Dat bewijst dat de bestanden correct zijn opgebouwd. Het vervangt niet dat je zelf je site bekijkt in de browsers en telefoons waar het jou om gaat.

Ja. Ongedaan maken en Opnieuw (knoppen boven de instellingen, of Ctrl+Z / Ctrl+Shift+Z) gaan terug door bijsnijden, zoom, achtergrond, opvulling, hoekstraal, namen en opties.