Use a different image for large favicon / site icon

WordPress lets you customize the icon that’s used in browser tabs and phone home screens in Appearance > Customize > Site Identity.

You must upload an image that’s at least 512×512, and it’s scaled down for different uses. A browser tab will use a 16×16 version of the icon. That’s a 32x difference from the smallest to the largest usage of this image!

You might find that what looks good at 16×16 is too large and boring in larger contexts. Luckily, you can use the get_site_icon_url to modify it.

In the below code snippet, I’m using a different image for site icons 128px or greater.

I manually uploaded the file to the media library and it had an ID of 88. You could build a UI for it, but I figured it won’t be changing so it’s not worth the effort  and increased complexity of the editing experience.

 * Large Favicon
 * @author Bill Erickson
 * @link
 * @param string $url, favicon image url
 * @param int $size, size in pixels
 * @return string $url
function ea_large_favicon( $url, $size ) {

	if( intval( $size ) >= 128 ) {
		$favicon_id = 88; // uploaded to media library
		$url = wp_get_attachment_image_url( $favicon_id, array( $size, $size ) );

	return $url;
add_filter( 'get_site_icon_url', 'ea_large_favicon', 10, 2 );
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