This is a WordPress function you can use output apple touch icons in the head of your template without having to add them in manually. You can add the following code into the functions.php file and it will search your websites root directory and theme directory for both normal & precomposed Apple touch icons and output them within the head of your theme. This saves you from manually adding them yourself and also tidies up your code a bit.
You will want to name your icons like so ‘apple-touch-icon-57×57’ and so on through the different sizes to make the function work. You can re-write this function to make it better and if you do, please comment with the changes you have made so that I can update/improve this function.
<?php
/**
* Adds a apple touch link to the page head
*/
function appleTouchLink(){
// list of directories to check for icons
$directories = array(
rtrim(get_stylesheet_directory(), '/') . '/' => rtrim(get_stylesheet_directory_uri(), '/') . '/', // theme directory
rtrim(ABSPATH, '/') . '/' => rtrim(site_url(), '/') . '/' // web root
);
/**
* Add references to any existing IOS icons
*/
$iconName = 'apple-touch-icon%s%s.png'; // the icon name convention
$iconSizes = array( // available icon sizes
'',
'57x57',
'72x72',
'114x114',
'144x144'
);
foreach($iconSizes as $size){
$hasSize = $size != ''; // check whether we actually have a size defined or if it is empty (default)
$files = array(
'apple-touch-icon' => sprintf($iconName, $hasSize ? '-' . $size : '', ''),
'apple-touch-icon-precomposed' => sprintf($iconName, $hasSize ? '-' . $size : '', '-precomposed')
);
foreach($directories as $dir => $url){
foreach($files as $rel => $file){
if(file_exists($dir . $file)){
// we have an icon file
echo '<link rel="' . $rel . '"' . ($hasSize ? ' sizes="' . $size . '"' : '') . ' href="' . $url . $file . '">' . "\n";
break 2; // break out of the file and directories loop
}
}
}
}
}
// add apple icon link call
add_action( 'wp_head', 'appleTouchLink');
?>