Handleiding

Favicon voor Wix

Wix slaat uw favicon op in het sitedashboard onder Instellingen > Website-info > Favicon en injecteert deze automatisch op elke gepubliceerde pagina. Upload een vierkante PNG van minimaal 100×100 pixels; 512×512 is ideaal voor een scherpe weergave. Voor ondersteuning van PWA en apple-touch-icon kunnen geavanceerde gebruikers aangepaste code toevoegen via Wix Velo. Gebruik de favicon generator om een ​​kant-en-klare PNG te maken van uw logo of merkteken.

Uw favicon is een van de meest zichtbare merkelementen op een Wix-site: het verschijnt op het browsertabblad, de bladwijzerbalk en de geschiedenis van de adresbalk. Een scherpe, herkenbare favicon helpt bezoekers uw Wix-site te identificeren en er snel naar terug te keren. Wix verwerkt favicon-injectie automatisch zodra u de afbeelding uploadt, zodat de vereiste inspanning minimaal is.

Om uw Wix-favicon toe te voegen of te wijzigen, logt u in op uw Wix-dashboard en navigeert u naar Instellingen > Website-info. Scroll naar de Favicon-sectie (soms aangeduid met Sitepictogram of Tab Favicon, afhankelijk van uw Wix-versie). Klik op het uploadgebied of op de bestaande pictogramminiatuur om Media Manager te openen. Upload uw vierkante PNG en bevestig.

Wix adviseert een minimale favicongrootte van 100×100 pixels, maar dit is een verdieping en geen doelwit. Voor het scherpste resultaat upload je 512×512. Wix schaalt de afbeelding omlaag voor tabweergave, en starten vanaf een grotere bron betekent minder kwaliteitsverlies bij kleine formaten. De favicon generator exporteert binnen enkele seconden een perfecte 512×512 PNG van elk logo.

Het PNG-formaat is de beste keuze voor Wix favicon-uploads. Het ondersteunt transparantie, waardoor uw pictogram er schoon uitziet in zowel lichte als donkere browserthema's zonder een gekleurd of wit achtergrondvak. ICO-bestanden zijn niet vereist — Wix converteert uw PNG en levert deze met het juiste MIME-type.

Wix Studio (het professionele niveau van Wix) plaatst de favicon-instelling op dezelfde locatie onder Instellingen > Website-info. Studio maakt ook meer geavanceerde aangepaste code-injectie mogelijk in de `<head>`-sectie als u SVG-favicons of apple-touch-icon-tags nodig heeft. Navigeer naar Instellingen > Aangepaste code om hoofdscripts toe te voegen aan Wix Studio-projecten.

Nadat u uw favicon in het Wix-dashboard heeft geüpload, moet u uw site opnieuw publiceren om de wijziging live te laten gaan. Klik op Publiceren in de rechterbovenhoek van de editor. Wix verspreidt de nieuwe favicon over alle pagina's op uw aangepaste domein. Wijzigingen die in het dashboard zijn opgeslagen maar niet zijn gepubliceerd, zijn niet zichtbaar voor bezoekers.

Wix verwerkt de `<link rel='icon'>`-taginjectie automatisch; u hoeft geen code toe te voegen. Wix injecteert ook een standaard apple-touch-icon-invoer voor iOS-startschermopslag door het formaat van uw geüploade favicon aan te passen aan de vereiste afmetingen. Voor een aangepaste 180×180 apple-touch-icon (anders dan de favicon), gebruik je Wix Velo aangepaste code-injectie.

Transparante achtergronden blijven behouden door Wix wanneer u een PNG uploadt met een alfakanaal. Als uw pictogram een ​​effen achtergrond heeft, wordt er een gekleurd vakje weergegeven in browsertabbladen in de donkere modus. Exporteer uw logo zonder achtergrondvulling voordat u het uploadt. U kunt controleren of de transparantie correct werkt met behulp van de favicon tester, die het pictogram op zowel lichte als donkere achtergronden weergeeft.

Wix Velo (het JavaScript-ontwikkelplatform binnen Wix) maakt geavanceerde favicon-aanpassing mogelijk. Met behulp van Velo's `wixLocation` en paginagebeurtenissen kunt u op dynamische wijze verschillende favicon-linktags per pagina injecteren. Dit is handig voor e-commercesites met productspecifieke branding of voor sites met meerdere categorieën waarbij elke sectie een ander pictogram gebruikt.

Als u een Wix-sjabloon gebruikt die is gemaakt voordat Wix native favicon-ondersteuning introduceerde, kunnen de favicon-instellingen op een andere locatie verschijnen of helemaal niet aanwezig zijn. In deze gevallen gebruikt u de aangepaste code-injectie van Wix: Instellingen > Aangepaste code > Code toevoegen > Plaats code in de `<head>` van elke pagina, en voeg handmatig de `<link rel='icon' href='URL'>`-tag toe met een link naar uw gehoste favicon.

Wix ADI-sites (Artificial Design Intelligence) stellen automatisch een favicon in op basis van uw merkitems als u deze opgeeft tijdens de installatiewizard. U kunt het door ADI gekozen favicon op elk moment overschrijven via Instellingen > Website-info > Favicon-pad. Door ADI gegenereerde favicons zijn vaak logo's met een lage resolutie; het wordt aanbevolen deze te vervangen door een speciaal gebouwd pictogram.

Nadat u uw Wix favicon heeft gepubliceerd, opent u uw live domein in een privé/incognito browservenster om het bijgewerkte pictogram te zien zonder enige lokale browsercache. Als de oude favicon na een dag nog steeds wordt weergegeven bij normaal browsen, ligt dit waarschijnlijk aan de browsercache en niet aan een Wix-probleem. Een harde vernieuwing (Ctrl+Shift+R of Cmd+Shift+R) dwingt de browser om het in de cache opgeslagen pictogram te verwijderen.

Voor bedrijven die PWA ondersteuning willen installeren op hun Wix-site – door de site toe te voegen aan een mobiel startscherm met een app-pictogram op volledige grootte en een splash-scherm – heeft Wix beperkte native PWA-mogelijkheden. Gebruik de aangepaste code-injectie van Wix om een ​​`<link rel='manifest'>`-tag toe te voegen die verwijst naar een extern gehost site.webmanifest-bestand met 192×192 en 512×512 PNG-pictogrammen. Zie de web app manifest guide voor de volledige manifestconfiguratie.

Hoe het werkt

  1. 1

    Maak een 512×512 PNG favicon

    Gebruik de [favicon generator](tool:favicon-generator) met uw logo of merk als bron. Download de 512×512 PNG uit de verpakking – dit is de juiste maat voor Wix.

  2. 2

    Open Instellingen > Website-info

    Navigeer in uw Wix-dashboard (niet de editor) naar Instellingen > Website-info en scrol omlaag om de Favicon-sectie te vinden.

  3. 3

    Upload uw PNG

    Klik op het uploadgebied of de bestaande favicon-miniatuur, selecteer uw 512×512 PNG in de Wix-mediamanager of uw apparaat en bevestig. Sla de instellingen op.

  4. 4

    Publiceer uw site

    Klik op de knop Publiceren in de Wix-editor. Wix injecteert de bijgewerkte favicon-tag op alle pagina's in uw live aangepaste domein.

  5. 5

    Verifieer in een incognitovenster

    Open uw live domein in een privé/incognito browservenster. Het nieuwe favicon zou op het tabblad moeten verschijnen. Gebruik de [favicon tester](utility:favicon-tester) voor een snelle externe controle.

Probeer het nu

Genereer een favicon die klaar is voor Wix

Favicon-generator

Veelgestelde vragen

Waar is de favicon-instelling in Wix?+

Instellingen > Website-info > Favicon (het exacte label kan 'Tab Favicon' of 'Sitepictogram' zijn, afhankelijk van uw Wix-versie of sjabloon). Upload een vierkante PNG, sla deze op en klik op Publiceren om deze op uw live site toe te passen.

Welke maat moet mijn Wix favicon hebben?+

Voor Wix is een minimum van 100×100 pixels vereist, maar 512×512 PNG wordt sterk aanbevolen. Door te starten met een grotere bron zorgt ervoor dat Wix kan downsamplen naar 32×32 (tabbladgrootte) zonder zichtbaar kwaliteitsverlies.

Waarom toont mijn Wix favicon nog steeds het oude pictogram?+

Zorg ervoor dat je op Publiceren hebt geklikt nadat je de nieuwe favicon hebt geüpload; opgeslagen wijzigingen worden pas live gepusht als ze zijn gepubliceerd. Open vervolgens uw site in een privé-/incognitovenster om de lokale favicon-cache van uw browser te omzeilen.

Kan ik een SVG favicon gebruiken op Wix?+

Niet via het eigen paneel Instellingen; het accepteert alleen rasterformaten. Om SVG te gebruiken, voegt u een aangepaste code `<link rel='icon' type='image/svg+xml' href='URL'>` toe in Instellingen > Aangepaste code > Hoofdcode en host u de SVG extern.

Voegt Wix automatisch een apple-touch-icon toe?+

Wix injecteert een standaard apple-touch-icon uit uw geüploade favicon-afbeelding. Voor een aangepaste 180×180 apple-touch-icon (los van het favicon-tabblad), injecteert u de linktag handmatig via Wix Velo of Instellingen > Aangepaste code.

Mijn Wix favicon toont nog steeds het standaard Wix-pictogram. Wat moet ik doen?+

Sla uw nieuwe favicon op in Instellingen > Website-info en klik vervolgens op Publiceren in de editor. Controleer of de site is gepubliceerd op uw aangepaste domein (niet alleen op het subdomeinvoorbeeld Wix). Wis uw browsercache en probeer het in een incognitovenster.

Kan ik verschillende favicons op verschillende Wix-pagina's hebben?+

Ja, met Wix Velo. Voeg een aangepaste code-injectie per pagina toe, of gebruik Velo's page-ready-gebeurtenis om het `<link rel='icon'>`-element dynamisch bij te werken op basis van het huidige paginapad.

Gerelateerde tools

Meer handleidingen

Handleidingen

Ontdek FetchFavicon

Categorieën

Omzetters

Hulpprogramma's

Gidsen

Handleidingen