Een favicon is een kleine, vierkante afbeelding (16 bij 16 pixels) dat bij jouw website of blog hoort. Het wordt gebruikt als icoontje voor je sitenaam in de tabbladen van je browser, maar ook in je lijst met favoriete links zie je deze plaatjes terug. Als je een rich pin in Pinterest pint, verschijnt de favicon ook voor de sitenaam. Een favicon vergroot de herkenbaarheid van je blog en is ook erg handig voor gebruikers die veel tabbladen open hebben staan. Zo kunnen ze snel jouw site terugvinden. Hoogste tijd om er een te maken en toe te voegen dus, mocht je dat nog niet gedaan hebben. Want het is heel makkelijk. In deze post leg ik uit hoe je een favicon maakt en vervolgens instelt in Blogger of Wordpress.
Favicon maken
Allereerst heb je een plaatje nodig dat bij je website of blog past. Vaak wordt hiervoor de eerste letter van een sitenaam gebruikt, kijk bijvoorbeeld maar naar de favicons van Pinterest, Facebook, Wikipedia, etc. Je kunt ook je logo gebruiken, maar vaak is een logo niet zo geschikt als favicon. Het is natuurlijk maar een hele kleine afbeelding en in een logo gebeurt vaak te veel. Ga dus op zoek naar een kleine, iconische afbeelding voor je blog. Zoals jullie kunnen zien, heb ik een bloemetje uit m'n achtergrond gebruikt hiervoor. Kijk eens of er ook een leuk, klein design-element in het ontwerp van je site zit dat je kunt gebruiken, of ga anders ook voor de eerste letter (in de stijl van je blog uiteraard).
Maak in Photoshop, of een ander afbeeldingsbewerkingsprogramma, een afbeelding van 16*16, 32*32, 48*48 of 64*64 pixels en sla dat op als favicon.ico, favicon.jpg, favicon.png, of favicon.gif. Een transparante achtergrond is mooi indien het icoontje niet vierkant is. Heb je geen programma hiervoor op je computer geïnstalleerd staan, dan kun je er ook een ontwerpen via favicon.cc.
Favicon toevoegen in Blogger
In Blogger hoeft de Favicon niet eens aan bepaalde afmetingen te voldoen, zolang het plaatje maar vierkant is en niet groter dan 100 kb. Het toevoegen is heel simpel, je moet alleen even weten waar deze optie zit. Ga naar het dashboard van Blogger en klik op 'Indeling'. Gelijk bovenaan het gedeelte van de pagina waar je gadgets kunt toevoegen, vind je het gadget 'Favicon'. Klik hier op 'Bewerken'.
Vervolgens verschijnt er een pop-up waar je het juiste bestand kun kiezen en uploaden. Als je dit gedaan hebt, klik je op 'Opslaan' en je bent al klaar.
Favicon toevoegen in Wordpress
In Wordpress kun je je favicon op twee manieren toevoegen; via FTP en een kleine aanpassing in de HTML of via een plug-in. Kies je voor de eerste manier, upload dan je 'favicon.ico' naar de root-folder van je website via een FTP-programma. Kopieer vervolgens onderstaande code en plak hem tussen de <head> en </head> in het bestand 'header.php'.<link title="Favicon" href="https://AANPASSEN.nl/favicon.ico" rel="shortcut icon" />
Pas de code wel even aan met je eigen domeinnaam.
Via een plug-in
Weet je niet zoveel van FTP en HTML en/of vind je dit eng, dan kun je de favicon ook instellen via een plug-in, bijvoorbeeld Favicon XT-Manager. Klik bij 'Plugins' op 'Nieuwe plugin'. Op het scherm dat nu verschijnt, kun je rechtsboven zoeken naar plug-ins. Vul in het zoekscherm 'Favicon XT-Manager' in en druk op enter. Waarschijnlijk verschijnt de plug-in Favicon XT-Manager als eerste zoekresultaat. Klik op de knop 'Nu installeren'.
Klik na de installatie op de link 'Plugin activeren'. Vervolgens verschijnt er in het dashboard een extra link 'XT-Favicon'.
In het scherm dat verschijnt als je op deze link klikt, kun je achtereenvolgens een Favicon-afbeelding uploaden, selecteren en opslaan. Als het goed is, zie je nu al de Favicon op het tabblad staan.
Zoals je ziet is het instellen van je Favicon niet veel werk en het staat wel heel professioneel. Laat je een bericht achter onder deze post als het gelukt is? (Als het niet lukt mag je natuurlijk ook een reactie achterlaten, dan kijk ik of ik je kan helpen). Succes!
Volg mij op Facebook, Instagram, Pinterest, Google+, YouTube en/of Bloglovin'
Heel handig dat jij hier even uitlegt hoe je een favicon kunt toevoegen. Ik heb dat nog steeds niet gedaan. Denk dat ik me daar nu maar eens aan ga zetten. Bedankt voor de reminder!
BeantwoordenVerwijderenEindelijk zeg! Ik zocht me een breuk. Dank je wel!
BeantwoordenVerwijderenGrtjs, Camilla
Goed uitgelegd! Ik heb zelf een webdesign achtergrond dus wist dit al, maar er zijn heel veel mensen die hier niet van op de hoogte zijn, terwijl een eigen favicon je site of blog toch net iets extra's geeft!
BeantwoordenVerwijderenJoehoe, een "oud" artikel maar ik heb er veel aan gehad! Super duidelijk! Mijn man is hoofd ICT en ik heb mooi lopen pronken "kijk eens wat ik kan" hahaha ;-)
BeantwoordenVerwijderenWat leuk om te lezen!
Verwijderen