- Create logo icons using recommended size:
– 57x57px (Default)
– 72x72px
– 76x76px
– 114x114px
– 120x120px
– 144x144px
– 152x152px
– 180x180px - Upload images to /public_html/wp-content/themes/xxx/images. See image.
- Those will need to go in the, which will most likely be in your theme header.php see image
- On Safari searching the root directory of a site you can also explicitly specify the icon files to use in a link element added to the head section of the web page.
- Using the same filenames as before a full set of links would look as follows:
– Default : <link rel=”apple-touch-icon” href=”images/apple-touch-icon/apple-touch-icon.png” />
– Other size : <link rel=”apple-touch-icon” sizes=”114×114″ href=”images/apple-touch-icon/apple-touch-icon-114×114.png” /> - For completeness if you do not want Safari to add any image effects the links would be as follows:
– Default : <link rel=”apple-touch-icon-precomposed” href=”images/apple-touch-icon-precomposed/apple-touch-icon-precomposed.png” />
– Other size: <link rel=”apple-touch-icon-precomposed” sizes=”114×114″ href=”images/apple-touch-icon-precomposed/apple-touch-icon-precomposed-114×114.png” /> - When a user saves your page to their home screen in iOS or add bookmark, see image.
