Favicons in your <head>

I’m updating my site a bit and came across http://realfavicongenerator.net/, which enables the generation of every possible icon you would need for your website: favicons, Apple Touch, Android and Windows’ mstile.

I like to keep this stuff in a separate function that will be fired in the wp_head; I also like to keep things ordered, highly legible and add escaping, so I gravitate toward the use of printf.

A straight-forward, quick solution would be something like this:

printf('
  <link rel="apple-touch-icon" sizes="57x57" href="%1$s">
  <link rel="apple-touch-icon" sizes="60x60" href="%2$s">
  <link rel="apple-touch-icon" sizes="72x72" href="%3$s">
  <link rel="apple-touch-icon" sizes="76x76" href="%4$s">
  <link rel="apple-touch-icon" sizes="114x114" href="%5$s">
  <link rel="apple-touch-icon" sizes="120x120" href="%6$s">
  <link rel="apple-touch-icon" sizes="144x144" href="%7$s">
  <link rel="apple-touch-icon" sizes="152x152" href="%8$s">
  <link rel="apple-touch-icon" sizes="180x180" href="%9$s">',
    esc_url( get_stylesheet_directory_uri() . '/apple-touch-icon-57x57.png' ),
    esc_url( get_stylesheet_directory_uri() . '/apple-touch-icon-60x60.png' ),
    esc_url( get_stylesheet_directory_uri() . '/apple-touch-icon-72x72.png' ),
    esc_url( get_stylesheet_directory_uri() . '/apple-touch-icon-76x76.png' ),
    esc_url( get_stylesheet_directory_uri() . '/apple-touch-icon-114x114.png' ),
    esc_url( get_stylesheet_directory_uri() . '/apple-touch-icon-120x120.png' ),
    esc_url( get_stylesheet_directory_uri() . '/apple-touch-icon-144x144.png' ),
    esc_url( get_stylesheet_directory_uri() . '/apple-touch-icon-60x60.png' )
);

This leaves a lot to be desired as we’re duplicating every line and essentially hard-coding it in anyway. A better solution would be to abstract the pattern and create a nice re-usable set of loops.

What I’ve decided to use, in full:

function favicon_touchicon() {
  // Generate Apple Touch Icons - assuming all are square, only need one number
  $apple_touch = [ '57', '60', '72', '76', '114', '120', '144', '152', '180' ];

  foreach ( $apple_touch as $size ) {
    printf( '<link rel="apple-touch-icon" sizes="%1$s" href="%2$s">',
      esc_attr( "{$size}x{$size}" ),
      esc_url( get_stylesheet_directory_uri() . "/apple-touch-icon-{$size}x{$size}.png?v=nggWoj3zRN" )
    );
  }

  // Generate Favicons - assuming all are square, only need one number
  $favicon = [ '32', '194', '96', '192', '16' ];

  foreach ( $favicon as $size ) {
    printf( '<link rel="icon" type="image/png" href="%1$s" sizes="%2$s">',
      esc_url( '192' === $size ?
        get_stylesheet_directory_uri() . esc_url( "/android-chrome-{$size}x{$size}.png?v=nggWoj3zRN" ) :
        get_stylesheet_directory_uri() . esc_url( "/favicon-{$size}x{$size}.png?v=nggWoj3zRN" )
      ),
      esc_attr( "{$size}x{$size}" )
    );
  }

  // Print the rest without a loop.
  printf('
    <link rel="manifest" href="%1$s">
    <link rel="mask-icon" href="%2$s" color="#3d4860">
    <link rel="shortcut icon" href="%3$s">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="msapplication-TileImage" content="%4$s">
    <meta name="theme-color" content="#3d4860">',
      esc_url( get_stylesheet_directory_uri() . '/manifest.json?v=nggWoj3zRN' ),
      esc_url( get_stylesheet_directory_uri() . '/safari-pinned-tab.svg?v=nggWoj3zRN' ),
      esc_url( get_stylesheet_directory_uri() . '/favicon.ico?v=nggWoj3zRN' ),
      esc_url( get_stylesheet_directory_uri() . '/mstile-144x144.png?v=nggWoj3zRN' )
  );
}
add_action( 'wp_head', 'favicon_touchicon', 0 );

Leave a Reply Cancel reply