How to modify the FavIcon links of the function wp_site_icon in WordPress?

Since version 4.3 WordPress introduces the ability to add a Icon automaticly to your site through the Customizer / Site Identity module. In fact this icon is known as the FavIcon and it is based in a very fuzzy and changing specification that, in addition, depends on the devices to what the favicon is prepared for, so WordPress developers team has logically opted for an very standard HTML output for favIcons. This standard HTML output works but perhaps you want to improve, extend or adapt it to other devices or programmes that are going to read it and use it. (See the next examples).

New Gmail favicon

favicons

Favicon for the Birdies 100 blog

There are several methods for changing this HTML FavIcon output and include improved sentences for its definition, ones more radicals, ones more WordPress code friendly, but in this example I’m going to propouse one method based on the conservative approaches so I’ll use a filter instead of redefine the list of actions attached to the wp_head action –that it’s also an option–.

This method can be used for changing completly the output of the function wp_site_icon (see wp_site_icon official documentation) but in this example we’ll simply add the HTML attribute type to the sentences that can need it and to make this change we’re going to use the filter called site_icon_meta_tags that it’s called inside the function wp_site_icon just before the function returns its output. (for a further reference of the use and meaning of WordPress filters you can see this article).

First we’re going to see an example of a standard wp_site_icon function output…

<link rel="icon" href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" sizes="32x32" />
<link rel="icon" href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" />
<meta name="msapplication-TileImage" content="http://site.com/wp-content/uploads/2016/04/MyLogo.png" />

And now, we’re going to show what is our goal.

<link rel="icon" type="image/png" href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" sizes="32x32" />
<link rel="icon" type="image/png" href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://site.com/wp-content/uploads/2016/04/MyLogo.png" />
<meta name="msapplication-TileImage" content="http://site.com/wp-content/uploads/2016/04/MyLogo.png" />

The proposed solution for today’s problem has two parts, firstly an instruction for attaching the function to the filter site_icon_meta_tags and secondly, the filter function itself, so that our code will have an structure like this.

<?php
// the filter function
function our_filter_function ( $metaTags ) { 
    // here the code for filtering
}
// here we attach the function to the filter
add_filter ('site_icon_meta_tags', 'our_filter_function', 10, 1); 
?>

and we’ll develop our filter function, taking into account two things:

  • the filter site_icon_meta_tags receives an array of the HTML meta tags so we have to treat individualy each of the elements of the array.
  • we need to find out the type of the image of each meta tag because each kind of image has a different HTML attribute type so that, we have to develope an additional second function to treat individually each kind of image extension

So, the code of the solution could be like this:

<?php
// For expanding and simplify the code we create a separate function for treating the URL of the images
function get_favicon_image_extension_type_attribute ( $t ) {
        
   $base = strtolower( substr ( $t, -4 ) );
   switch ( $base ) {
       case '.ico' :
          $type = 'image/x-icon';
          break;
       case '.jpg' :    
       case 'jpeg' :    
          $type = 'image/jpeg';
          break;
       default :
          $type = 'image/' . substr ( $base, 1, 3 );
   }
   return apply_filters ( 'get_favicon_image_extension_type_attribute', $type, $t, $base );        
        
}

// Here the filter function itself
function filter_default_wp_icon_module_literals ( $literals ) {

   // using the next filter we can decide which elements of the array of meta tags want to treat.
   $lines_to_change = apply_filters ( 'lines_of_favicon_metas_to_change', array ( 0, 1 ) );

   foreach ( $lines_to_change as $i ) {
       // extracting the URL of the image
       preg_match_all ( '/href=\"([^\"]*)\"{1}/', $literals[$i], $matches );

       // get the mime image type and creating "image/type" or whatever associated with its extension
       $type = get_favicon_image_extension_type_attribute ( $matches[1][0] );

       // Introducing type="image/type" the HTML code
       $literals[$i] =  str_replace ( '"icon" href', '"icon" type="' . $type . '" href', $literals[$i] );
   }
   return $literals;
        
}
// here we attach the filter function to the WP filter
add_filter ( 'site_icon_meta_tags', 'our_filter_function', 10, 1 ); 
?>

Well, this is the example, you can use it for adding more attributes, suppressing or adding new lines to the array of meta tags, etc. I hope this code becomes useful for you.

One last thing, I suspect that there are more elegant and sophisticated solutions (some of them probably in just one line of code using the PHP function preg_replace_callback, I suppose) but for the purpose of this article I prefer to show a solution with a very clear code. Thanks for your understanding.

Have a nice WordPressing!

6 Comments on How to modify the FavIcon links of the function wp_site_icon in WordPress?

Leave a Reply to Joan Miquel Viadé Cancel Replay

   Mandatory field
You can use these HTML tags inside the commment.
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>