Webstick.nl logo Webdesignburo en Wordpress-blog

Favicon maken en favicon plaatsen [2024] 💥

Favicon maken en favicon plaatsen

Favicon screenshots bij dit artikel

Een voorbeeld van een standaard favicon.

Wordpress plug-ins voor favicon op uw site.

Gratis favicon generators online.

Zelf favicon maken met Photoshop.


Advertentie


Handmatig favicon plaatsen op Wordpress website

Wilt u handmatig een favicon in uw Wordpress website installeren omdat uw theme niet de optie biedt om een favicon te plaatsen?

U doet dit op de volgende manier:
  1. Ga via FTP of Cpanel Filemanager naar de map public_html /wp-content/themes/themenaam/
  2. Maak hier een nieuwe map aan en noem deze “images” als de map er nog niet toevallig is.
  3. Maak uw favicon.ico en upload deze in deze nieuwe map.
  4. Ga nu naar het bestand header.php en dezelfde map van het theme, dus public_html /wp-content/themes/themenaam/ en open header.php in de filemanager of download het bestand eerst via FTP en open het met bijvoorbeeld Notepad++ en helemaal onderaan in het bestand plakt u de volgende code:<link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/images/favicon.ico" />
  5. Uw nieuwe favicon zal meteen getoond worden nadat u uw browser ververst heeft met CTRL+F5.

Favicon met Wordpress plugin

U kunt uiteraard ook een Wordpress plugin installeren die het u mogelijk maakt een favicon voor de URL van uw website in browsers te tonen. Dergelijke favicon plugins kunt u hier vinden.

Het maken van een Favicon

Favicon maken met Photoshop

Ik maak favicons altijd met Photoshop, hiervoor moet wel deze plugin in Photoshop geïnstalleerd worden waarmee u bestanden vervolgens als het gewenste .ico kunt opslaan. De plugin installeert u door eenvoudig naar de map van Adobe/Photoshop op uw PC te gaan en het bestand “ICOFormat.8bi” te plaatsen in de “Plug-Ins” map. Hierna dient u Photoshop opnieuw op te starten.

Het maken van uw favicon doet u het beste door een nieuw bestand te maken in Photoshop van 256x256px (dit werkt prettiger, u ziet beter waarmee u bezig bent) en hier uw design in te zetten, verklein vervolgens het bestand naar 64x64px en sla het bestand op op uw bureaublad als “.ico” bestand. Doop als laatste het bestand om naar favicon.icon voordat u het uploadt.

Favicon generator online

Als u geen Photoshop heeft u het makkelijker vindt om online een favicon te laten maken door een van de vele websites die dit aanbieden raadt ik u aan om naar deze website te gaan hiervoor.

Andere geschikte sites om favicons te genereren zijn:

Zowel met een generator alsof Photoshop kunt u uw favicon het beste in het formaat 64x64px maken zodat hij er goed uitziet, vroeger werd vooral 16x16px gebruikt maar dat zou ik anno 2020 niet meer gebruiken al kan het wel.

Een favicon moet in principe altijd op .ico eindigen en perfect vierkant zijn, gebruik 16x16, 32x32, of 64x64 (best)

- Martijn Assie / Webstick.nl

Favicon plaatsen op Joomla website

Op een Joomla website zou de favicon.ico geplaatst moeten worden in de map van het template, dat is public_html/templates/uw_template. Hier is het van belang dat na het plaatsen van de favicon u cache wist en uw browser ververst met CTRL+F5 om de favicon te kunnen zien, soms duurt het evengoed even.

Favicon plaatsen op HTML website

Op een HTML site plaats u de favicon.ico gewoon in de public_html map (httpdocs op Windows server), eventueel kunt u in de header bij de meta tags aangeven waar de favicon staat als een andere plek uw voorkeur zou hebben met bijvoorbeeld:

<link rel="shortcut icon" type="image/png" href="/images/favicon.png"/>

of <link rel="shortcut icon" type="image/png" href="http://uw-website.nl/afbeeldingen/favicon.png"/>

Animated favicon met scrolling tekst

Op deze website: favicon-generator.org kunt u en favicon genereren met een scrollende tekst. >> animated favicon

U kunt ook zelf animated GIF's maken voor uw favicon zowel online als met animated-GIF software. Hier vindt u een aantal gratis programma's hiervoor.

Waarom een favicon gebruiken?

Een favicon geeft een professionele indruk aan uw website mee, maar de fav(orite) icon wordt getoond voor bladwijzers die mensen in hun browser zouden maken van uw website en helpt zodoende om snel uw website terug te kunnen vinden later.



Advertisement

Divi Ad 680px



Scroll naar boven