Wat is een favicon en waarom je er een nodig hebt

wat_is_favicon_gratis_download

Bij een website hoort een favicon. Het wordt niet voor niets de kers op de taart genoemd omdat het de algehele design compleet maakt. Maar… wat is een favicon nu precies?

Wat is een favicon?

Een favicon is een klein vierkante afbeelding dat naast de paginatitel weergegeven wordt in een browser. Door het toevoegen van een dergelijk icoon zal je website snel herkenbaar zijn in een browser waar tientallen tabs open staan. Ben jij net zoals ik en heb jij ook standaard zo’n 20 tabs of meer open staan? Een visueel herkenningspunt zoals een favicon zorgt ervoor dat de site dat je zoekt, makkelijk te vinden is tussen een grote hoeveelheid tabs die open staan.

Afhankelijk van het thema dat je gebruikt, kan het zijn dat er een standaard favicon weergegeven wordt dat erin is verwerkt. Echter kan het ook zijn dat er niets is toegevoegd en er een leeg vak naast de paginatitel te zien is. Dat wil je natuurlijk niet. Jij wil ook de kers op de taart voor jouw websitedesign, toch?

Tip

Gebruik de accent kleuren van je design zodat alles netjes in dezelfde stijl blijft en het icoontje echt de ‘finishing touch’ geeft aan je design.

Welke afmeting moet ik gebruiken?

Vroeger was het noodzakelijk om het icoon 16 x 16 pixels te maken maar dat hoeft niet meer. Dit door de komst van smartphones en tablets die favicons ook gebruiken. Bij het opslaan van een snelkoppeling naar een website op de telefoon, zie je tegenwoordig ook de naam van de website inclusief het icoontje. En bij retina schermen dien je ook nog eens twee keer het originele formaat te gebruiken (16×16 zal dan standaard 32 x 32 moeten zijn!). En als laatste, Windows gebruikt de tegels op het startscherm en daarvoor worden de icoons ook toegepast. Je ziet ze dus overal.

Wil je voor alle verschillende mobiele apparaten een favicon gebruiken, dan kan je het beste 512 x 512 pixels aanhouden. Gebruik vervolgens een Favicon Generator om meerdere afmetingen te maken.

Hoe maak ik een favicon?

Een favicon kan in een grafisch design programma zoals Illustrator, Photoshop of GIMP gemaakt worden. Begin met een vierkante afbeelding zodat je deze makkelijk kan schalen (verkleinen). Ga het icoontje niet gelijk ontwerpen in het formaat 16 x 16, maar begin gewoon groot zodat je alles duidelijk kan zien, bijvoorbeeld 512 x 512. Enkele tips die je kan gebruiken:

  • Gebruik een klein gedeelte van je logo, bijvoorbeeld als je logo een visueel merkbeeld bevat.
  • Waar gaat jouw blog of website over? Kan je dat vertalen naar een simpel icoon? Denk aan een icoon met mascara, lipgloss, lippenstift of een make-up brush bij een beautyblog. Misschien niet super origineel maar wel passend bij jouw blog.
  • Gebruik de eerste letter van je blognaam. Probeer hetzelfde lettertype toe te passen dat gebruikt wordt in het logo zodat het icoon in dezelfde stijl blijft.
  • Heb je nog geen idee? Hou het dan simpel en gebruik bijvoorbeeld een vierkant, cirkel, driehoek, etc. en maak deze dezelfde kleur van jouw blogdesign. Zo heb je toch een icoon dat als visueel herkenningspunt gebruikt kan worden.
  • Wil je transparantie in het icoon? Verwijder dan de achtergrond laag en sla het icoon op als .PNG formaat.
  • Gebruik maximaal drie kleuren in je icoon. Kleine (kleur)details worden namelijk niet goed weergegeven.

Ben je klaar met je favicon? Verklein hem dan naar het formaat 16 x 16. Is alles nog goed leesbaar? Ben je tevreden? Ga dan terug naar het originele formaat (512 x 512) en sla het icoontje op.

Hoe voeg ik een favicon toe?

Was het vroeger nog zo dat een icoon perse in het formaat .ico opgeslagen moest worden, nu hoeft dat niet meer. Sommige blogplatformen kunnen namelijk ook .PNG toepassen. Wel is het raadzaam, mocht je jouw website op willen slaan als snelkoppeling op je telefoon/computer/tablet, dat je diverse icoon formaten toepast dus ook een .ico formaat. Photoshop kan niet direct in dat formaat opslaan. Je zal dus altijd je afbeelding moeten omzetten, maar dit is heel makkelijk te doen middels de website RealFaviconGenerator. Deze website zorgt ervoor dat het icoontje op diverse media apparaten gebruikt kan worden.

Favicon toevoegen aan Blogger

Super simpel: Ga naar Layout. Je ziet dan gelijk de mogelijkheid om een Favicon toe te voegen. Klik erop, upload je bestand en voila! Je bent klaar!

favicon-blogger-simpel

Favicon toevoegen aan WordPress

In WordPress zit de functie om een icoon toe te voegen geïmplementeerd, waardoor het super simpel is om deze toe te voegen. Je kan dan gewoon een PNG of JPG gebruiken. Makkelijker kan haast niet!

  1. Ga naar je WordPress Dashboard
  2. Ga naar Weergave – Customizer
  3. Onder het kopje Site-Identiteit kan je een favicon toevoegen. Je kan hier een afbeelding toevoegen dat minimaal 512 x 512 pixels is. Je kan overigens ook kleinere formaten toevoegen.
  4. Klik op opslaan. Dat was het!favicon-wordpress

Geavanceerde manier + doe de Favicon Check

Na het testen met RealFaviconGenerator kwam ik erachter dat de favicon niet juist op alle mobiele apparaten weergegeven wordt. Nu is dit niet perse nodig, maar wil je dat wel? Volg dan de volgende stappen. Let op: deze stap is voor gevorderden.

  • Doe de Favicon Checker. Er zal een analyse worden gemaakt voor iOS Safari, Android, Windows, Mac en de klassieke browser.  Krijg je meldingen dat je niet het juiste formaat hebt gebruikt?
  • Ga naar de Favicon Generator. Upload jouw favicon dat je gemaakt hebt. Doorloop de basis stappen.
  • Selecteer “I will place favicon files (favicon.ico, apple-touch-icon.png, etc.) at the root of my web site.” Deze optie is het beste.
  • Wil je ze ergens anders (vooral als je gebruikt maakt van Blogger): kies dan voor de tweede optie (upload ze ergens anders). Zorg ervoor dat de icoons dezelfde naam blijven houden en dat ze bij elkaar in de map staan.

FYI

De root directory is de basis folder waar de WordPress bestanden te vinden zijn, zoals index.php en de wp-admin, wp-content, wp-includes folders. Zorg ervoor dat de favicon daar geplaatst wordt (dus bij het index.php bestand).

  • Klik op “Generate your Favicons and HTML code”. Je kan dan een .ZIP bestand downloaden naar je computer
  • Voor WordPress: Je dient deze afbeeldingen (icoons) via FTP naar de root van je website te uploaden (zie tip).
  • Voor Blogger: Upload de bestanden naar Photobucket of een andere externe server die jij gebruikt. Bewaar deze links!

Je dient de ontvangen code in je header.php bestand te plaatsen. Hiervoor heb je meerdere manieren:

Op de computer – Open je header.php bestand in kladblok en kopieer de code die je ontvangen hebt van Favicon Generator tussen <head> en </head>. Sla het bestand op en upload deze met FTP in je thema folder.

favicon-code-html

Via WordPress (manier #1) – Ga naar je WordPress Dashboard – Weergave – Editor, open header.php en plak de code op de juiste plaats.

Via WordPress (manier #2)– Als je de plugin Header and Footer hebt, dan kan je de code middels de plugin in je header plaatsen.

Blogger – Pas de links van de icoons aan (gebruik de link naar waar jij de afbeeldingen hebt geupload) voordat je de code plakt in je template. Ga naar Template – Edit HTML en zoek <head> op. Plaats de code daar direct onder.

favicon-code-html-blogger

  • Doe nogmaals de Favicon Checker – als de rode vakken in groen zijn veranderd dan zijn de stappen goed doorlopen.

Phew! Dat waren nogal wat stappen nietwaar? Ik hoop dat alles goed gelukt is! Om je een beetje op weg te helpen heb ik voor jou al 18 icoons gemaakt die je zou kunnen gebruiken voor je blog. De kleuren kan je in Photoshop makkelijk wijzigen door een nieuwe kleurlaag toe te voegen. Als je ze zou willen downloaden, dan kan dat middels onderstaand formulier. Het enige wat ik van jou vraag is je mailadres zodat ik binnenkort een mailinglist kan opzetten. Je schrijft je hier automatisch voor in. Afmelden mag altijd, zelfs na het ontvangen van de icoons, al zou ik het heel jammer vinden als je mij al zo snel weer verlaat, haha. 😉

Ik hoop dat je wat aan deze tutorial hebt. Mocht er iets niet duidelijk zijn, laat het mij dan weten. Succes!

Download 18 gratis favicons

Download 18 gratis favicons die je kan gebruiken voor je blog of website. Val op met deze leuke en speelse icoontjes naast je webadres in een browser.

Door het invoeren van je e-mail, word je automatisch aangemeld voor mijn nieuwsbrief. Je ontvangt de download nadat je aanmelding is voltooid. Je kan te alle tijden uitschrijven voor de nieuwsbrief.

Geef een reactie

Één reactie

  1. Rochella says:

    Ik gebruik het ook. En vind het mooi en handig als herkenningspunt. Precies zoals je aangeeft.