Multiple sizes of favicon

The favicon is the 16×16 icon you see in the browser tab for a webpage. But this icon can also be used in other locations, like when someone saves your website to the home screen of their phone. The snippet below will load a high resolution version (152×152) on all devices that support it, and fall back to the 16×16 for old versions of IE. For more information, see Understand the Favicon.

This loads favicon-152.png and favicon.ico from your theme’s /images directory. The Genesis theme will auto-load the favicon if it can find it in your theme, so the last line removes Genesis’ favicon code.

* Add Favicon
* @author Bill Erickson
* @link
function be_favicon() {
echo '<link rel="icon" href="' . get_stylesheet_directory_uri() . '/images/favicon-152.png">';
echo '<!--[if IE]><link rel="shortcut icon" href="' . get_stylesheet_directory_uri() . '/images/favicon.ico"><![endif]-->';
add_action( 'wp_head', 'be_favicon' );
remove_action( 'wp_head', 'genesis_load_favicon' );
view raw functions.php hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk