How to Resolve Apple Touch Icon png 404 Errors in WordPress

From creating touch icons in various sizes and uploading them, to implementing HTML link tags and automating icon linking with WordPress functions, we cover everything you need to manage apple-touch-icon.png effectively.

Chance M

Step-by-step guide on resolving Apple Touch Icon png 404 errors in WordPress.

When managing a WordPress site, encountering an apple-touch-icon.png 404 error can be a common issue, especially if you haven’t explicitly set up an Apple touch icon for your website. This error occurs when Apple devices and some Android devices look for a specific icon file to display as a bookmark or on the home screen, but can’t find it on your server. Not only can this lead to a poor user experience by displaying a generic icon, but it can also negatively impact your site’s SEO by increasing 404 error rates.

When dealing with apple-touch-icons in WordPress, a variety of .png 404 errors can arise, typically due to devices searching for specific filenames that might not exist on your server. Here’s a list of common filenames that devices may look for, leading to 404 errors if they’re not found:

  • apple-touch-icon.png – The default file that devices look for.
  • apple-touch-icon-precomposed.png – A version without automatic styling like gloss and rounded corners.
  • apple-touch-icon-57×57.png – Specifically for older iPhone and iPod Touch models.
  • apple-touch-icon-57×57-precomposed.png – Precomposed version for older iPhone and iPod Touch models.
  • apple-touch-icon-72×72.png – For the first and second-generation iPad.
  • apple-touch-icon-72×72-precomposed.png – Precomposed version for the first and second-generation iPad.
  • apple-touch-icon-76×76.png – For newer iPad models.
  • apple-touch-icon-76×76-precomposed.png – Precomposed version for newer iPad models.
  • apple-touch-icon-114×114.png – For iPhone 4, 4S, and other devices with Retina displays.
  • apple-touch-icon-114×114-precomposed.png – Precomposed version for iPhone 4, 4S, and other devices with Retina displays.
  • apple-touch-icon-120×120.png – For iPhone 5, 5C, 5S, 6, 6S, SE, and other similar devices.
  • apple-touch-icon-120×120-precomposed.png – Precomposed version for iPhone 5, 5C, 5S, 6, 6S, SE, and similar devices.
  • apple-touch-icon-144×144.png – For iPads with Retina displays.
  • apple-touch-icon-144×144-precomposed.png – Precomposed version for iPads with Retina displays.
  • apple-touch-icon-152×152.png – For iPad Air, iPad Mini, and later models with Retina displays.
  • apple-touch-icon-152×152-precomposed.png – Precomposed version for iPad Air, iPad Mini, and later models with Retina displays.
  • apple-touch-icon-180×180.png – For iPhone 6 Plus, 6S Plus, 7 Plus, 8 Plus, X, and later models.
  • apple-touch-icon-180×180-precomposed.png – Precomposed version for iPhone 6 Plus, 6S Plus, 7 Plus, 8 Plus, X, and later models.
  • apple-touch-icon-192×192.png – Primarily for Android devices that also request apple-touch-icons.
  • apple-touch-icon-192×192-precomposed.png – Precomposed version primarily for Android devices.

Creating and correctly linking these Apple Touch Icons in your WordPress site can significantly reduce the occurrence of these errors.

Understanding apple-touch-icon.png 404 Errors

At the core of apple-touch-icon.png 404 errors lies the concept of web customization and optimization for mobile devices. When a user bookmarks your website or adds it to their home screen on an Apple device, iOS looks for a specific file named apple-touch-icon.png to use as the icon. If this file isn’t present or correctly referenced in your website’s code, the device will fail to find the icon, resulting in a 404 error. This issue isn’t just limited to Apple devices; some Android devices also look for this file under certain circumstances.

Screenshot showing Apple Touch Icon png 404 errors in WordPress backend error logs.

What Triggers These Errors?

  • Absence of Icon File: The most common cause is simply not having an apple-touch-icon.png file in your website’s root directory.
  • Incorrect Path: Even if the file exists, an incorrect path in your site’s HTML head section can lead to these errors.
  • Lack of HTML Link Tag: Forgetting to include a tag in your website’s head section that specifies the location of your apple-touch-icon.

Why It Matters

  • User Experience: A correct icon ensures a polished, brand-consistent appearance on users’ home screens, enhancing the overall user experience.
  • SEO Impact: Search engines may consider 404 errors as a detriment to your site’s overall health and user experience, potentially affecting your rankings.

How Devices Search for Icons

  • iOS Devices: By default, if no specific HTML link tag is provided, iOS devices will automatically search for an apple-touch-icon.png file at the root of the website.
  • Android Devices: Some Android devices might also request this file when a user adds a bookmark to the home screen, though behavior can vary based on browser and device version.

Addressing these 404 errors, you can improve your site’s user experience and maintain its SEO health, making it a critical task for webmasters and developers managing WordPress sites.

How to Resolve apple-touch-icon.png 404 Errors

To effectively resolve apple-touch-icon.png 404 errors on your WordPress site, you’ll need to ensure that your website has a properly named and sized icon file, and that it’s correctly referenced in your site’s HTML.

Ensuring your WordPress site’s apple-touch-icon appears crisply across different Apple devices involves creating and referencing icons in several sizes. This approach caters to the specific resolutions of various iPhone and iPad models, optimizing your site’s appearance when bookmarked to the home screen. Here’s an in-depth guide to managing these icons effectively.

Step 1: Creating Icons in Various Sizes

Design icons to match the specifications of different Apple devices:

  • iPhone Standard: 180px × 180px (60pt × 60pt @3x)
  • iPhone X/Plus: 120px × 120px (60pt × 60pt @2x)
  • iPad Pro: 167px × 167px (83.5pt × 83.5pt @2x)
  • iPad, iPad mini: 152px × 152px (76pt × 76pt @2x)
Guidelines for designing Apple Touch Icons for optimal website performance.

Ensure your apple-touch-icon files are correctly named and sized according to the different device specifications. You should have files like apple-touch-icon-180×180.png, apple-touch-icon-120×120.png, etc. Each icon need to saved in PNG format for transparency and compatibility.

Step 2: Uploading Icons to Your WordPress Website

To ensure that devices can find and display your custom apple-touch-icons when users bookmark your site or add it to their home screen, you need to upload your icon files directly to the root directory of your WordPress site.

Using your FTP client like FileZilla or File Manager, upload each of your icon files to the root directory of your WordPress site. Make sure not to place them in a subdirectory, as devices will look for these icons in the root by default. If available, use SFTP (Secure File Transfer Protocol) instead of FTP for a more secure connection when uploading your files.

Before uploading, ensure you have your icon files ready and named correctly according to the sizes you’ve decided to support (e.g., apple-touch-icon-180×180.png, apple-touch-icon-120×120.png, etc.). These should be in PNG format for the best compatibility and quality.

Method 1: Using an FTP Client

Guide on using FileZilla to upload Apple Touch Icons for enhanced mobile experience.
  1. Connect to Your Website via FTP/SFTP:
    • Download and install an FTP client like FileZilla.
    • Obtain your FTP or SFTP credentials from your web hosting provider. SFTP is preferred for its secure encrypted connection.
    • Open your FTP client and enter your host (often your website’s URL), username, and password. The port is usually 21 for FTP and 22 for SFTP. Click “Connect” or “Quickconnect”.
  2. Navigate to the Root Directory:
    • Once connected, you’ll see your local files on one side of the window and your website’s files on the other. Navigate to the root directory of your WordPress site on the server side. This is often named public_html, htdocs, or simply the domain name of your site.
  3. Upload Your Icon Files:
    • Locate your prepared icon files on your local system. Drag and drop them into the root directory on your server. Ensure not to place them in any subdirectories.
  4. Set Correct File Permissions:
    • Right-click on each uploaded icon file in the FTP client, and select “File Permissions”.
    • Set the numeric value to 644 and confirm. This setting allows the server to read and serve the files, while keeping them safe from public write access.

Method 2: Using cPanel File Manager

Tutorial on uploading Apple Touch Icons to a website via cPanel.
  1. Accessing File Manager:
    • Log in to your hosting account and open cPanel.
    • Look for the “File Manager” icon and click on it.
  2. Navigating to the Root Directory:
    • In the File Manager, navigate to the root directory of your website, which, similar to the FTP method, is often named public_html or htdocs.
  3. Uploading Icon Files:
    • Locate the “Upload” icon at the top menu of the File Manager.
    • Click “Upload”, and a new tab will open. Here, you can drag and drop your files or click to select them from your computer.
    • Ensure each file uploads successfully.
  4. Verifying File Permissions:
    • Once your files are uploaded, return to the File Manager window.
    • Right-click on each icon file and select “Permissions” or “Change Permissions”.
    • Check that the permissions are set to 644. Adjust if necessary and save the changes.

Incorporate specific HTML link tags within the section of your site’s theme to reference each icon size. The sizes mentioned (180×180, 120×120, 167×167, and 152×152 pixels) are some of the most common, but you may include other sizes based on your target devices’ requirements.

Just before the closing tag, insert the link tags for each of your apple-touch-icons. Replace /apple-touch-icon-XXXxXXX.png with the actual paths to your icon files. If you’ve placed the icons in the root directory, the path would be as shown below:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">

This ensures devices can find the most appropriate icon size, improving display quality.

Alternative: Using Functions.php or a Custom Code Plugin

If you prefer not to edit header.php directly or if you want these icons to be theme-independent, you can insert these link tags using the wp_head action hook in your theme’s functions.php file or through a plugins such as “Insert Headers and Footers” or “Code Snippets”.

function add_apple_touch_icons() {
    echo '<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">';
    echo '<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">';
    echo '<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">';
    echo '<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">';
}
add_action('wp_head', 'add_apple_touch_icons');

Step 4: Using WordPress Functions to Automate Icon Linking

To automate the addition of apple-touch-icon link tags for various device sizes to your WordPress site, you can leverage custom PHP functions. While directly adding code to your theme’s functions.php file is one method, using a plugin designed for managing and inserting custom PHP code offers a more flexible and safer approach.

function add_custom_apple_touch_icons() {
    $icon_sizes = [
        '180x180',
        '120x120',
        '167x167',
        '152x152'
    ];

    foreach ($icon_sizes as $size) {
        echo '<link rel="apple-touch-icon" sizes="' . $size . '" href="/apple-touch-icon-' . $size . '.png">' . "\n";
    }
}
add_action('wp_head', 'add_custom_apple_touch_icons');

This PHP snippet dynamically adds the appropriate link tags for each icon size to the head of every page on your WordPress site, ensuring that all devices can access the best icon resolution available.

Adding custom PHP code to your WordPress site, such as the function to automate apple-touch-icon linking, can be safely and effectively done in a few different ways. Directly adding your code to the functions.php file of your active theme is possible but not recommended.

Method 1: Use a Child Theme

If you don’t already have one, create a child theme for the theme you’re using. This involves creating a new folder in /wp-content/themes/, creating a style.css file with proper header information, and optionally, a functions.php file.

Add custom code to the child theme’s functions.php file. This ensures that your customizations are not lost when the parent theme is updated.

Method 2: Use a Custom Plugin

Create a simple plugin: If your customizations are functionality related and you plan to use them across multiple themes, creating a custom plugin might be the best approach.

  1. Create a new PHP file in the /wp-content/plugins/ directory.
  2. Add a PHP header comment to the file to describe your plugin.
  3. Place your custom PHP code below the header comment.
  4. Activate your plugin from the WordPress dashboard.
<?php
/**
 * Plugin Name: Custom Apple Touch Icons by Digitap
 * Description: Automatically adds custom apple-touch-icon link tags.
 * Version: 1.0
 */

function add_custom_apple_touch_icons() {
    // Custom function content
}
add_action('wp_head', 'add_custom_apple_touch_icons');

Method 3: Use an Existing Plugin

Utilizing an existing plugin designed to add custom PHP code to your WordPress site is a convenient and safe method, especially if you’re not comfortable creating a child theme or your own plugin.

  1. Code Snippets: Code Snippets provides a GUI interface in the WordPress admin for adding custom snippets of PHP code to your site, effectively functioning like a custom plugin manager but without needing to create an actual plugin.
  2. Snippet: Similar to Code Snippets, Snippet allows you to add custom PHP code snippets to your site through an easy-to-use dashboard interface. It also provides options for running snippets everywhere or conditionally.
  3. Insert PHP Code Snippet: This plugin lets you create shortcodes corresponding to PHP code snippets. You can insert the shortcodes in your posts, pages, or widgets, and the plugin executes the PHP code where the shortcode is placed.
  4. My Custom Functions: This plugin allows you to easily add custom PHP code to your WordPress site without editing your theme’s functions.php file. It checks your code for syntax errors before saving to prevent potential site errors.

Alternative Methods to Manage apple-touch-icon.png 404 Errors

Aside from the direct approach of creating and linking multiple sizes of apple-touch-icons within your WordPress site, there are alternative strategies you can employ. These methods can streamline the process, reduce errors, and ensure compatibility across a wide range of devices.

1. Using Plugins

WordPress offers plugins that can simplify the management of apple-touch-icons, eliminating the need to manually edit theme files or upload icons to your server. Plugins such as “All In One Favicon” or “Real Favicon Generator” allow you to upload your icon through a user-friendly interface, and they automatically handle the creation of different sizes and the insertion of the appropriate HTML tags. This can be particularly useful for those who prefer not to delve into code.

2. Dynamic Icon Generation Services

Using RealFaviconGenerator for creating Apple Touch Icons for website branding.

Online services like Real Favicon Generator (Real Favicon Generator) go a step further by not only creating all the necessary icon sizes but also generating comprehensive HTML code that you can insert into your WordPress site’s head section. These services often provide detailed instructions for various platforms, ensuring that you cover all bases for both Apple and Android devices.

3. .htaccess Redirects for Simplification

For those who prefer a more hands-off approach to managing specific icon requests, configuring redirects in your site’s .htaccess file is a viable alternative. By redirecting all requests for apple-touch-icon variations to a single, default icon file, you minimize the risk of encountering 404 errors. This method, however, might not offer the same level of customization and optimization as providing specific icons for different devices but is a solid choice for quickly addressing the error logs.

# Redirect all apple-touch-icon requests to a default icon

RedirectMatch 301 /apple-touch-icon(-precomposed)?.png /path/to/your-default-icon.png
RedirectMatch 301 /apple-touch-icon(-\d+x\d+-precomposed)?.png /path/to/your-default-icon.png
RedirectMatch 301 /apple-touch-icon-\d+x\d+.png /path/to/your-default-icon.png

Replace /your-default-icon.png with the path to your chosen default icon. This setup ensures that any request for an apple-touch-icon, regardless of the device or resolution, is satisfied with your default icon, cutting down on 404 errors significantly.

4. CSS Media Queries

A less common but creative approach involves using CSS media queries to specify icons for different devices. This method embeds the icons directly into your CSS file, using base64 encoded images. However, this approach is more experimental and may not be supported across all browsers and devices. It’s worth noting for those looking to explore every possible avenue.

Step 1: Convert Your Icons to Base64

Illustration of converting Apple Touch Icons to Base64 encoding for web optimization.

Convert each of your apple-touch-icons to base64 encoded strings. Online tools like Base64 Image Encoder can do this conversion. You’ll get a string that starts with something like data:image/png;base64,.

Step 2: Add the CSS to WordPress

To incorporate the CSS code for apple-touch-icons into your WordPress site, you have two straightforward options: using the Additional CSS feature in the WordPress Customizer or employing a plugin designed for custom CSS and scripts.

Plugins like “Simple Custom CSS and JS” or “WP Add Custom CSS” offer an easy way to add custom CSS to your WordPress site.

/* Default icon for general use */
html {
    background-image: url(data:image/png;base64,PLACEHOLDER_BASE64_ENCODED_IMAGE_180x180);
}

/* iPhone 6, 6s, 7, 8, SE */
@media only screen and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
    html {
        background-image: url(data:image/png;base64,PLACEHOLDER_BASE64_ENCODED_IMAGE_120x120);
    }
}

/* iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus */
@media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
    html {
        background-image: url(data:image/png;base64,PLACEHOLDER_BASE64_ENCODED_IMAGE_180x180);
    }
}

/* iPhone X, XS, 11 Pro, 12 mini */
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    html {
        background-image: url(data:image/png;base64,PLACEHOLDER_BASE64_ENCODED_IMAGE_180x180);
    }
}

/* iPhone XR, XS Max, 11, 11 Pro Max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2),
       only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    html {
        background-image: url(data:image/png;base64,PLACEHOLDER_BASE64_ENCODED_IMAGE_180x180);
    }
}

/* iPad Mini, Air */
@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
    html {
        background-image: url(data:image/png;base64,PLACEHOLDER_BASE64_ENCODED_IMAGE_152x152);
    }
}

/* iPad Pro 10.5" */
@media only screen and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) {
    html {
        background-image: url(data:image/png;base64,PLACEHOLDER_BASE64_ENCODED_IMAGE_167x167);
    }
}

/* iPad Pro 12.9" */
@media only screen and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) {
    html {
        background-image: url(data:image/png;base64,PLACEHOLDER_BASE64_ENCODED_IMAGE_167x167);
    }
}

Choosing the right method to manage and resolve apple-touch-icon.png 404 errors depends on your specific needs, technical comfort level, and the complexity of your WordPress site. Whether you opt for the simplicity of plugins, the comprehensive approach of dynamic icon generation services, the broad catch-all of .htaccess redirects, or even experimental CSS techniques, the goal remains the same: to enhance your site’s mobile user experience and maintain its SEO standing by ensuring that your apple-touch-icons are correctly implemented and accessible.

Resolving Apple Touch Icon Errors and Enhancing Your WordPress Site

Addressing the apple-touch-icon.png 404 errors in WordPress by creating and implementing icons of varying sizes not only enhances your site’s appearance on home screens across different Apple devices but also contributes to a polished, professional brand image. Taking the time to tailor your apple-touch-icons to specific device requirements is a testament to your dedication to quality user experience and technical SEO best practices.

Additional Resources:

  1. RealFaviconGenerator: For generating favicons that are compatible across all devices and platforms, ensuring a consistent appearance of your website’s icon. RealFaviconGenerator
  2. WordPress Codex and Developer Resources: For guides on editing theme files like functions.php and understanding WordPress action hooks. WordPress Developer Resources
  3. Base64 Image Encoder: To convert your icons into base64 format for embedding within CSS. Online tools are available for this purpose. Base64 Image Encoder
  4. CSS Tricks – Media Queries: For in-depth explanations and examples of CSS media queries, which can be useful for embedding icons directly in CSS. CSS-Tricks
  5. Apache .htaccess Guide: For learning how to set up redirects, including redirecting requests for apple-touch-icon variations to a single icon file. Apache’s official documentation can be a start. Apache .htaccess Guide