Creating an Apple Touch Icon for Your Website

creating an apple touch icon for your visitorsCreating an Apple Touch icon for your website ensures that your visitors can add an identifiable icon representing your website to their device’s home screen. Paying attention to your website’s details shows your visitors that you care about the little things.

Looking for a quicker way to create an Apple touch icon?

We explain a quicker way to set an Apple touch icon and favicon for your WordPress site here. The method described there is quicker and simpler than the method outlined below. However, your image may not look as sharp on a high resolution retina display, and you can’t include separate versions of your image to use based on the device chosen.

To ensure you have the best quality image for all screens, keep reading to learn how to create an Apple touch icon for your website.

Choose your image

Most often, your Apple touch icon should be your logo. Since this icon can be larger than a favicon, most logos fit here even if they aren’t the right size for a favicon.

Creating an Apple touch icon

If you need to adjust your image, try using Photoshop or Photoscape X on your computer, or PicResize online. Make sure your image is cropped to a square shape; add space if required.

We recommend:

  • Making your image 512 x 512 pixels square
  • Including a background color – not a transparent background
  • Including some space around the image.

Using this size and a background color will ensure your image displays well on all devices.

Tell your website to use your Apple touch icon

In your child theme functions.php file, add the following code to tell WordPress to use your favicon on the front end of your website.

// Apple Touch icon for the website
function apple_touch_icon() {
    echo '<link rel="apple-touch-icon" href="' . get_bloginfo('wpurl') . '/apple-touch-icon.png" />';    
}
add_action('wp_head', 'apple_touch_icon');

Did you already create your favicon?

If not, read on to learn how to create your favicon.

Looking for a quicker way to add your site icon?

If this sounds too complicated or time-consuming, WordPress includes a quicker way to add your site icon. If you’d rather have us add your Apple touch icon and favicon so your site’s brand is recognizable in every detail, get in touch.

Like it? Share it!

FacebooktwitterredditlinkedinmailFacebooktwitterredditlinkedinmail

Alisa Cognard

Alisa was one of the first team members to join Red Earth Design, Inc. in early 2004. From data entry, she progressed to MySQL database manipulation and PHP coding. Alisa is responsible for all kinds of odds and ends: installing new websites, adding features to them, programming databases, PHP coding, website troubleshooting, website security, and organizational tasks for Red Earth Design.

Leave a Reply

Your email address will not be published. Required fields are marked *