Wat is een favicon

Wat is een favicon?

Een favicon is een kleine vierkante grafische afbeelding of eigenlijk een ikoontje, waarmee je een website makkelijk kunt herkennen.

Deze ikoontjes staan vaak rechts voor het websiteadres, op tabbladen of voorafgaand aan een bladwijzer of bookmark. Zie bijvoorbeeld onderstaande afbeelding: Je ziet de tabbladen “Facebook”, “Twitter”, “Google” en “Nu.nl”. De kleine pictogrammen, dat zijn de favicons van elke website.

Firefox_tabbladen

Favicons zichtbaar in tabbladen (firefox)

Met “klein” bedoelen we overigens ook Klein! Deze mogen namelijk slechts 16 bij 16 beeldpunten (pixels) groot zijn. Nou dat is een leuke grafische uitdaging: maak een herkenbare logo van slechts 256 punten (16 x 16)!

Okay, ik heb een favicon. wat doe ik ermee?

Heb je eenmaal een favicon dan hoef je deze alleen nog maar te plaatsen in de hoofdmap van jouw website. Tenminste, dat geld voor een “gewone” html-website. Werk je met een cms-systeem (zoals, WordPress, Joomla, etc) EN jouw thema (skin of opmaak) daar GEEN voorziening om favicon.ico-bestanden te uploaden, dan is waarschijnlijk de goede locatie iets als “public_html/mijnwebsite.nl/wp-content/themes/themenaam/images”. (hierbij is “mijnwebsite.nl” de domeinnaam van jouw website , en “themenaam” de naam van jouw theme)

Zorg dat het .ico-bestand de naam ‘favicon.ico’ (allemaal kleine letters!) heeft.

Alleen maar .ico?

Nee, moderne browsers (behalve Internet explorer!) begrijpen ook .png en .gif. Deze kunnen interessant zijn, omdat die beiden een transparante achtergrond kennen. .gif Kun je zelfs gebruiken in de geanimeerde variant! Je kunt dus een klein bewegend beeldje van 16 x 16 pixels als favicon gebruiken!

Toch kun je jezelf beter beperken tot het ico-formaat. deze wordt door alle browsers ondersteund.

Hoho, niet zo snel! Hoe maak ik een favicon?

Een favicon kun je maken in elk favoriet grafisch pakket, zolang het maar een afbeelding kan opslaan in het ico-formaat.

Vreemd genoeg kan Photoshop dat niet, tenminste niet standaard uit de doos!

Toch .ico bestanden maken in photoshop? Kijk dan even op de pagina “Hoe maak ik een ico bestand in Photoshop

Het GRATIS pakket GIMP kan dat wel. Deze kun je hier downloaden. Wil je meer lezen over Gimp, kijk dan eens op deze pagina.

Om een transparante favicon.ico te maken laten we in dit artikel zien hoe je die kunt maken in gimp

(mocht je interesse hebben hoe je een favicon kunt maken in photoshop, laat het ons dan even weten)

Een Favicon.ico maken in Gimp.

1. Start gimp op

2. Maak een nieuw bestand, OF open een afbeelding die je wilt gebruiken

3. Klik op Afbeelding, Modus en vink RGB aan (Engels: Image, mode, RGB)

4. Gebruik de gum (erase-tool) om die gedeeltes die je niet wilt gebruiken weg te gummen (daarmee worden die gedeelten transparant)

5. Ga naar hem menu Afbeelding, afbeelding schalen, (Image, scale) geef bij de breedte en hoogte 16 pixels op

6. Sla het bestand oo door in het menu “Bestand” te kiezen voor “Exporteren” (file, export)

7. geef het bestand de naam “favicon.ico” en druk op de knop “export”

8. je krijgt nu een aantal opties:

  • 1 bpb, 1-bit alfa, 2- kleurenpalet (1 bpp, 1 bit alpha, 2-slot palette)
  • 4 bpb, 1-bit alfa, 16- kleurenpalet (4 bpp, 1 bit alpha, 16-slot palette)
  • 8 bpb, 1-bit alfa, 256- kleurenpalet (8 bpp, 1 bit alpha, 256-slot palette)
  • 24 bpb, 1-bit alfa, geen kleurenpalet (24 bpp, 1 bit alpha, no palette)
  • 32 bpb, 8-bit alfa, geen kleurenpalet (32 bpp, 8 bit alpha, no palette)

Kies uit: 4 bpb, 1-bit alfa, 16- kleurenpalet (4 bpp, 1 bit alpha, 16-slot palette)

9. upload het bestand naar jouw website. Afhankelijk van het theme dat je gebruikt doe je dat als volgt:

  • Kijk in jouw theme instellingen of je daar een favicon kunt uploaden, zo ja, gebruik dan die functie
  • Bevat jouw theme geen favicon-upload functie, upload het favicon bestand dan met b.v. Filezilla naar jouw website.

De goede locatie (voor een wordpress-site) zou moeten zijn:

public_html/mijnwebsite.nl/wp-content/themes/themenaam/images

(hierbij is “mijnwebsite.nl” de domeinnaam van jouw website , en “themenaam” de naam van jouw theme)

Bij een gewone HTML site zal de plaats voor de favicon waarschijnlijk zijn:

  • public_html/mijnwebsite.nl/ of
  • public_html/mijnwebsite.nl/images

Verwijder cache /website geschiedenis

Zeker als er al een favicon-bestand aanwezig was (wat je dan wsl met bovenstaande stappen hebt overschreven) kan het heel goed zijn dat je nog steeds de oude (of geen) favicon ziet. Dit heeft ermee te maken dat de websitegeschiedenis van jouw browser, deze haalt het (oude) favicon.ico bestand op uit zijn eigen geheugen (ipv deze opnieuw te downloaden)

Dit kan hardnekkig zijn! Mocht je toch geen resultaat zien, laat het dan even weten door onderaan een berichtje in te vullen. Er is namelijk wel een “omleiding”, daarvoor moeten we een php-bestand aanpassen.

 




WordPress Membership Plugin


03 GIF Banner


KPN Algemeen 728 x 090



728x90_ShutterStock-Culture_NL_animated
Codecanyon wide 728 x 90
Themeforest wide 728 x 90


Go Daddy NL 728x90 30 off


Coolblue 728x90


Brand Communication Image Banner 728 x 90