These Shortcut Icons Code Snippets will add Shortcut Icons, Apple Touch Device Icons, iOS Start-up Icons, iOS Safari UI Components and iOS Safari Status Bar Appearance to WordPress websites, utilizing the Genesis Framework and to basic HTML websites.
PHP Code Snippet – Genesis Framework
Copy/Paste the PHP code below, to the Genesis Framework functions.php file:
[php]
//* Bamajr included Shortcut Icons
remove_action(‘wp_head’, ‘genesis_load_favicon’);
function bamajr_shortcut_icons() {
echo ‘
<!– ******************************************************* –>
<!– BEGIN: SHORTCUT ICONS –>
<!– see: http://webdevrobert.com/go/shortcut-icons/ –>
<!– ******************************************************* –>
<!– BEGIN: APPLE ICONS –>
<link rel="apple-touch-icon" sizes="57×57" href="/apple-touch-icon-57×57.png">
<link rel="apple-touch-icon" sizes="114×114" href="/apple-touch-icon-114×114.png">
<link rel="apple-touch-icon" sizes="72×72" href="/apple-touch-icon-72×72.png">
<link rel="apple-touch-icon" sizes="144×144" href="/apple-touch-icon-144×144.png">
<link rel="apple-touch-icon" sizes="60×60" href="/apple-touch-icon-60×60.png">
<link rel="apple-touch-icon" sizes="120×120" href="/apple-touch-icon-120×120.png">
<link rel="apple-touch-icon" sizes="76×76" href="/apple-touch-icon-76×76.png">
<link rel="apple-touch-icon" sizes="152×152" href="/apple-touch-icon-152×152.png">
<link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon-180×180.png">
<meta name="apple-mobile-web-app-title" content="BAMAJR">
<link rel="apple-touch-startup-image" href="/startup.png"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!– END: APPLE ICONS –>
<!– BEGIN: FAVICONS –>
<link rel="icon" type="image/png" href="/favicon-192×192.png" sizes="192×192">
<link rel="icon" type="image/png" href="/favicon-160×160.png" sizes="160×160">
<link rel="icon" type="image/png" href="/favicon-96×96.png" sizes="96×96">
<link rel="icon" type="image/png" href="/favicon-16×16.png" sizes="16×16">
<link rel="icon" type="image/png" href="/favicon-32×32.png" sizes="32×32">
<!– END: FAVICONS –>
<!– BEGIN: MICROSLOP LIVE TILE ICONS –>
<meta name="msapplication-TileColor" content="#0099ff">
<meta name="msapplication-TileImage" content="/mstile-144×144.png">
<meta name="application-name" content="BAMAJR">
<!– END: MICROSLOP LIVE TILE ICONS –>
<!– ******************************************************* –>
<!– END: ICONS –>
<!– ******************************************************* –>
‘;
}
add_action( ‘genesis_meta’, ‘bamajr_shortcut_icons’ );
[/php]
HTML Code Snippet
Copy/Paste the HTML code below, to the <head> section of your website:
[html]
<!– ******************************************************* –>
<!– BEGIN: SHORTCUT ICONS –>
<!– see: http://webdevrobert.com/go/shortcut-icons/ –>
<!– ******************************************************* –>
<!– BEGIN: APPLE ICONS –>
<link rel="apple-touch-icon" sizes="57×57" href="/apple-touch-icon-57×57.png">
<link rel="apple-touch-icon" sizes="114×114" href="/apple-touch-icon-114×114.png">
<link rel="apple-touch-icon" sizes="72×72" href="/apple-touch-icon-72×72.png">
<link rel="apple-touch-icon" sizes="144×144" href="/apple-touch-icon-144×144.png">
<link rel="apple-touch-icon" sizes="60×60" href="/apple-touch-icon-60×60.png">
<link rel="apple-touch-icon" sizes="120×120" href="/apple-touch-icon-120×120.png">
<link rel="apple-touch-icon" sizes="76×76" href="/apple-touch-icon-76×76.png">
<link rel="apple-touch-icon" sizes="152×152" href="/apple-touch-icon-152×152.png">
<link rel="apple-touch-icon" sizes="180×180" href="/apple-touch-icon-180×180.png">
<meta name="apple-mobile-web-app-title" content="BAMAJR">
<link rel="apple-touch-startup-image" href="/startup.png"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<!– END: APPLE ICONS –>
<!– BEGIN: FAVICONS –>
<link rel="icon" type="image/png" href="/favicon-192×192.png" sizes="192×192">
<link rel="icon" type="image/png" href="/favicon-160×160.png" sizes="160×160">
<link rel="icon" type="image/png" href="/favicon-96×96.png" sizes="96×96">
<link rel="icon" type="image/png" href="/favicon-16×16.png" sizes="16×16">
<link rel="icon" type="image/png" href="/favicon-32×32.png" sizes="32×32">
<!– END: FAVICONS –>
<!– BEGIN: MICROSLOP LIVE TILE ICONS –>
<meta name="msapplication-TileColor" content="#0099ff">
<meta name="msapplication-TileImage" content="/mstile-144×144.png">
<meta name="application-name" content="BAMAJR">
<!– END: MICROSLOP LIVE TILE ICONS –>
<!– ******************************************************* –>
<!– END: ICONS –>
<!– ******************************************************* –>
[/html]
Shortcut Icons – NOTABLE ITEMS:
- The Icon and Image files listed above, should be stored in the root directory of your website.
- More information about Configuring Web Applications for iOS can be found at http://bamajr.us/1u4StSW.
- A Favicon Generator for all platforms can be found at http://bamajr.us/1Li1TQa.
- Do not confuse inclusion of “Live Tile” code with endorsement of Microsoft products and/or services. I do NOT think favorably about any Microsoft branded product or service (thus the MICROSLOP reference in my Code Snippets).
Shortcut Icons – DISCLAIMER:
Code Snippets are not posted until they have been tested and verified to work. In most cases, the Code Snippets are in use on this website or a client’s websites. However, all Code Snippets come without any warranty of functionality.