Select Page

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.