Search code examples
htmlwordpresstwigfavicontimber

How do I get my Favicon to show in WordPress custom theme?


I am trying to get a favicon to show in WordPress header and its just not working for me - what would be the problem do you think?

I am using Twig/Timber for dev.

<link rel="shortcut icon" type="image/x-icon" href="{{options.header.favicon.url | default(site.theme.link ~ '/images/favicon.ico')}}"/>

Everything inspects just fine:

<link rel="stylesheet" href="http://protoolsite.local/wp-content/themes/protool-theme/style.css" type="text/css" media="screen"/>
<link rel="shortcut icon" type="image/x-icon" href="http://protoolsite.local/wp-content/themes/protool-theme/images/favicon.ico"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="author" href="http://protoolsite.local/wp-content/themes/protool-theme/humans.txt"/>

When I check this link it pulls up no problems at all: http://protoolsite.local/wp-content/themes/protool-theme/images/favicon.ico it just keeps showing the wordpress "W" favicon.


Solution

  • Pretty sure Wordpress requires "icon" too.

    <link rel="icon" type="image/x-icon" href="http://protoolsite.local/wp-content/themes/protool-theme/images/favicon.ico"/>

    It'll be easier to go to appearance > customise > site identity in Wordpress though.