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