Multiple sizes of favicon

Written by Bill EricksonPublished on August 12, 2014Updated on December 5, 2018

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' );