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.

<?php
/**
* Add Favicon
*
* @author Bill Erickson
* @link http://www.billerickson.net/code/multiple-sizes-favicon/
*/
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 a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

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

Let's Talk