> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.kennis.shop/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Huisstijl instellen: logo, favicon en kleuren

> ✨ Dit artikel is gemaakt met behulp van AI. Klopt er iets niet? Laat het ons weten via de chat.

Met je huisstijl bepaal je hoe jouw shop eruitziet: je logo, het icoontje in het browsertabblad (favicon) en je kleuren op openbare pagina's zoals je winkel, cursuspagina's en het studentenportaal. In dit artikel stel je dat in.

## Waar vind je de huisstijl-instellingen?

1. Klik in het menu links op **Instellingen**.

![Het menu links met Instellingen gemarkeerd](https://kennis.shop/help/huisstijl-instellen/01-menu-instellingen.webp =250x900)
2. Je staat nu op het tabblad **Bedrijfsgegevens**. Dat is het eerste tabblad.

![De tabbladen in Instellingen met Bedrijfsgegevens gemarkeerd](https://kennis.shop/help/huisstijl-instellen/02-tab-bedrijfsgegevens.webp =238x515)
3. Scroll naar beneden naar de kaart **Huisstijl**. Daar vind je het logo, de favicon en de kleuren.

## Logo en favicon uploaden

![De kaart Huisstijl met het Logo-veld (1) en het Favicon-veld (2) gemarkeerd](https://kennis.shop/help/huisstijl-instellen/03-logo-favicon.webp =750x753)
1. Klik bij **Logo** op **Bestand kiezen** en kies een afbeelding.
2. Klik bij **Favicon** op **Bestand kiezen** en kies een kleine afbeelding. Dit is het icoontje in het tabblad van de browser.
3. Onder het veld zie je meteen een voorbeeld van je afbeelding, in een rondje.
4. Klik op **Opslaan** (zie "Kleuren instellen" hieronder).

Goed om te weten:
* Toegestane bestanden zijn **.png**, **.jpg** en **.jpeg**.
* De maximale grootte is **250 KB** per afbeelding. Is je bestand te groot? Verklein het met [squoosh.app](https://squoosh.app/).
* Voor de favicon werkt een vierkante afbeelding het best.

### Een logo of favicon verwijderen

1. Klik onder het logo of de favicon op **Verwijder afbeelding**.
2. Klik op **Opslaan**.

Heb je geen favicon? Dan toont Kennis.shop zijn eigen standaardicoon.

## Kleuren instellen (Eenvoudig)

In het deel **Aangepaste stijl** kies je bij **Stijlmodus** voor **Eenvoudig**. Dat is voor de meeste shops genoeg.

![Stijlmodus Eenvoudig (1), Primaire kleur (2), Achtergrondkleur (3) en Opslaan (4) gemarkeerd](https://kennis.shop/help/huisstijl-instellen/04-kleuren.webp =750x753)
1. Zorg dat bij **Stijlmodus** de optie **Eenvoudig** geselecteerd is.
2. Klik op **Primaire kleur** en kies je hoofdkleur met de kleurkiezer, of typ een hexcode (bijvoorbeeld `#e6007e`).
_De primaire kleur gebruiken we voor knoppen, links en accenten._
3. Klik op **Achtergrondkleur** en kies de achtergrondkleur van je pagina's.
4. Klik op **Opslaan**.

Je krijgt een melding dat de wijzigingen zijn opgeslagen. Liever alles terugzetten voordat je opslaat? Klik dan op **Wijzigingen ongedaan**.

## Heb je eigen CSS opgeslagen?

Heb je eerder eigen CSS gebruikt (**Geavanceerd**) en schakel je terug naar **Eenvoudig**? Dan zie je een gele waarschuwing: met Eenvoudig bewaren we alleen je twee kleuren en wordt de rest van je CSS verwijderd.

![De gele waarschuwing met het vinkje Ja, vervang mijn eigen CSS door deze twee kleuren](https://kennis.shop/help/huisstijl-instellen/05-waarschuwing-eigen-css.webp =750x853)
1. Wil je je eigen CSS echt vervangen? Zet dan een vinkje bij **Ja, vervang mijn eigen CSS door deze twee kleuren**.
2. Klik op **Opslaan**.

Zonder dit vinkje slaan we niet op. Zo raak je je eigen CSS nooit per ongeluk kwijt, ook niet als je alleen een nieuw logo uploadt.

## Geavanceerd: je eigen CSS

De modus **Geavanceerd** is voor als je zelf CSS wilt schrijven, bijvoorbeeld om een lettertype of afgeronde knoppen aan te passen. Dat is alleen iets voor wie met CSS overweg kan. Voor problemen door eigen CSS kunnen we geen ondersteuning bieden. Hoe het werkt lees je hier: [Eigen CSS gebruiken (Geavanceerd)](https://help.kennis.shop/nl/article/eigen-css-gebruiken-geavanceerd-r6t72p/).

## Problemen oplossen

* **Mijn logo of favicon wordt niet geaccepteerd.** Controleer of het bestand een .png, .jpg of .jpeg is en kleiner dan 250 KB. Verklein het eventueel met [squoosh.app](https://squoosh.app/).
* **Ik zie mijn nieuwe favicon niet in het tabblad.** Browsers onthouden favicons lang. Ververs de pagina met Ctrl+Shift+R (Cmd+Shift+R op een Mac) of open je shop in een privévenster.
* **Mijn kleuren veranderen niet na het opslaan.** Controleer of je op **Opslaan** hebt geklikt en of je de melding kreeg dat het is opgeslagen. Ververs daarna de pagina van je shop.
* **Ik kan niet opslaan na het terugschakelen naar Eenvoudig.** Zet het vinkje **Ja, vervang mijn eigen CSS door deze twee kleuren** aan, of blijf in **Geavanceerd** om je CSS te houden.

Je huisstijl staat nu op je hele shop, klaar voor je klanten! 🚀