Naar de handleiding
lil cactus

Hoe maak je een favicon als ICO-bestand?

Beginner4 minutenBijgewerkt

Kort antwoord

Open in Lil Cactus je ontwerp en kies Bestand dan Exporteren dan ICO… Vervang de tekst in het veld Bestandsnaam door favicon.ico. Laat onder Pictogramgroottes alle zes groottes aangevinkt (16 tot 256 px; dat is de standaard) en klik op Exporteren. De download bevat alle zes vierkante versies in één ICO-bestand.

De zes geëxporteerde groottes van het bladpictogram op een lichte en een donkere strook: 16, 32, 48, 64, 128 en 256 pixels in elke bovenste rij, met 16 en 32 pixels daaronder vier keer vergroot
De zes groottes in favicon.ico op een lichte en een donkere achtergrond: 16, 32, 48, 64, 128 en 256 px in de bovenste rij, met 16 en 32 px daaronder 4× vergroot.
Tijd
4 minuten
Niveau
Beginner
Wat je nodig hebt
Een pictogram of ander ontwerp dat in de editor is geopend
Werkt met
PNG, JPG, SVG, PSD en Lil Cactus-projecten (transparantie blijft behouden)
Voorbeeld openen in Lil CactusEigen foto gebruiken

Gratis, zonder account. Je foto blijft op je eigen computer.

Een favicon is het kleine pictogram naast het tabblad of de bladwijzer van een website. Eenvoudige vormen met brede kleurvlakken zijn op klein formaat beter te herkennen. Deze oefening gebruikt een tweekleurig blad met één lichte nerf.

Een favicon-ICO exporteren in vier stappen

  1. Het ontwerp openen

    Open het oefenontwerp van deze pagina. Kies voor je eigen bestand Bestand dan Openen… en selecteer de afbeelding. Het dambordpatroon rond het blad geeft de transparante achtergrond aan. Er kan kort een melding over het gladmaken van SVG-randen verschijnen; die sluit vanzelf.

    Het menu Bestand met Openen omcirkeld
    Laad het ontwerp waarvan je een pictogram wilt maken.

  2. Bestand › Exporteren › ICO… kiezen

    Kies Bestand dan Exporteren dan ICO… Het dialoogvenster Exporteren als ICO opent met een voorvertoning van het ontwerp.

    Het menu Bestand en het submenu Exporteren met ICO omcirkeld
    Open het dialoogvenster voor ICO-export.

  3. De bestandsnaam en de groottes kiezen

    Vervang de tekst in het veld Bestandsnaam door favicon.ico. Houd onder Pictogramgroottes 16, 32, 48, 64, 128 en 256 aangevinkt. Dit zijn de zes beschikbare groottes.

    Het veld Bestandsnaam voor ICO met favicon.ico, omcirkeld
    Geef het gedownloade pictogrambestand een naam.
    Opties voor ICO-export met 16, 32, 48, 64, 128 en 256 aangevinkt en de groep Pictogramgroottes omcirkeld
    Elk getal is zowel de breedte als de hoogte van een vierkant pictogram, in pixels.

  4. De ICO exporteren

    Controleer of er onderaan 6 pictogramgroottes staat en klik op Exporteren. Je browser slaat favicon.ico op met zijn eigen instellingen voor downloaden of opslaglocatie.

    Onderkant van het ICO-venster met 6 pictogramgroottes, Annuleren en de omcirkelde knop Exporteren
    Controleer het aantal gekozen groottes voordat je exporteert.

Het pictogram op je website gebruiken

Upload favicon.ico naar de hoofdmap van je site, zodat het bestand opent op /favicon.ico. Je kunt er ook naar verwijzen vanuit de <head> van de pagina met <link rel="icon" href="/favicon.ico"> (zie de pictogramdocumentatie van MDN).

Browsers bewaren favicons in hun cache, dus een bijgewerkt pictogram verschijnt soms pas na herladen of na een tijdje.

Als het pictogram van 16 px moeilijk te herkennen is

Vereenvoudig het ontwerp: minder details, grotere vormen en dikkere lijnen. De afbeelding boven aan deze pagina laat zien wat er bij 16 px overblijft: de twee brede kleurvlakken van het blad en de ene dikke nerf.

Controleer of de vorm opvalt op zowel lichte als donkere tabbladbalken. In de afbeelding verdwijnt de donkergroene helft van het blad bijna op de donkere achtergrond, en draagt de lichtgroene helft de vorm. Een ontwerp in één donkere kleur zou daar moeilijk te zien zijn.

Verder leren

Favicons als ICO-bestand: vragen en antwoorden

Kan ik een PNG of JPG omzetten naar ICO?

Ja. In Lil Cactus kun je beide indelingen openen en exporteren met de ICO-instellingen. Het zichtbare ontwerp wordt het pictogram.

Kan een ICO een transparante achtergrond hebben?

Ja. In Lil Cactus behoudt ICO de transparantie die al in je ontwerp zit. Verwijder eerst een effen achtergrond als de ruimte rond het pictogram leeg moet zijn.

Wat gebeurt er met een rechthoekige afbeelding in een ICO?

In Lil Cactus wordt de afbeelding zonder uitrekken passend gemaakt binnen elk gekozen vierkant. Transparante opvulling vult de overgebleven ruimte.

Kan ik een ICO met maar één grootte exporteren?

Ja. Laat in Lil Cactus onder Pictogramgroottes alleen de grootte die je nodig hebt geselecteerd. De ICO bevat dan alleen die ene grootte.

Kan ik een ICO van 512 × 512 px maken?

Nee. In Lil Cactus is de grootste ICO-grootte 256 × 256 px. Gebruik PNG als je grotere afmetingen in pixels nodig hebt.

Wordt mijn afbeelding geüpload als ik een ICO maak?

Nee. Lil Cactus maakt de ICO in je browser en downloadt hem naar je apparaat; de afbeelding wordt niet naar een server gestuurd. Optionele gebruiksstatistieken staan beschreven op de privacypagina.

Gepubliceerd  · Laatst gecontroleerd