Favicon causes mixed content warning over SSL

Question

I have the following favicon loading via header.php:

<link rel="shortcut icon" type="image/x-icon" href="<?php echo esc_url( home_url( '/wp-content/themes/themename/img/favicon.ico' ) ); ?>">

My site has an SSL certificate installed. Google Chrome loads the each page over SSL perfectly, but Firefox flags a mixed content warning. I can see via the source (both in Chrome and Firefox), that the favicon is being served via http.

I can't work out why this is happening.

Answer 1

After a little more reading via the WordPress Codex, I discovered that I was calling the favicon incorrectly. It should be called like this:

<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico" />

Using get_stylesheet_directory_uri() checks for SSL.