How to add apple-touch-icons in WordPress

 — 

Are you looking to add apple-touch-icons in WordPress? Yet need to remove the default apple-touch-icon from WordPress too? Here’s an easy guide.

Adding apple-touch-icons in WordPress

In order to add your apple-touch-icons, please follow the steps below.

  1. Open your functions.php file and paste in the code below. This code will help to add the apple-touch-icons to your website.
  2. You’ll then need to create each icon in the specific sizes (please see the specific sizes attribute within the code below).
  3. Finally, you’ll need to replace your icon paths to where you have stored your icons accordingly.
function wpza__add_apple_touch_icons() {
?>
     <link rel="apple-touch-icon" href="<?php echo get_template_directory_uri(); ?>/images/favicons/touch-icon.png" />
     <link rel="apple-touch-icon" sizes="57x57" href="<?php echo get_template_directory_uri(); ?>/images/favicons/touch-icon-57x57.png" />
     <link rel="apple-touch-icon" sizes="72x72" href="<?php echo get_template_directory_uri(); ?>/images/favicons/touch-icon-72x72.png" />
     <link rel="apple-touch-icon" sizes="76x76" href="<?php echo get_template_directory_uri(); ?>/images/favicons/touch-icon-76x76.png" />
     <link rel="apple-touch-icon" sizes="114x114" href="<?php echo get_template_directory_uri(); ?>/images/favicons/touch-icon-114x114.png" />
     <link rel="apple-touch-icon" sizes="120x120" href="<?php echo get_template_directory_uri(); ?>/images/favicons/touch-icon-120x120.png" />
     <link rel="apple-touch-icon" sizes="144x144" href="<?php echo get_template_directory_uri(); ?>/images/favicons/touch-icon-144x144.png" />
     <link rel="apple-touch-icon" sizes="152x152" href="<?php echo get_template_directory_uri(); ?>/images/favicons/touch-icon-152x152.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="<?php echo get_template_directory_uri(); ?>/images/favicons/touch-icon-180x180.png" />
<?php
}
add_action( 'wp_head', 'wpza__add_apple_touch_icons' );

Remove the default apple-touch-icon in WordPress

Add the code below to your functions.php file, in order to remove the default apple-touch-icon on your WordPress website.

function wpza__apple_touch_icon_filter( $string ) {
     return strpos( $string, 'apple-touch-icon' ) === false;
}

function wpza__apple_touch_icon_remove_default( $meta_tags ) {
     return array_filter( $meta_tags, 'wpza__apple_touch_icon_filter' );
}
add_filter( 'site_icon_meta_tags', 'wpza__apple_touch_icon_remove_default' );