FaviconX

WordPress

Add Apple Touch Icons in WordPress

By Alex Rivera, Web Developer Published: August 21, 2026 Updated: August 21, 2026 4 min read

TL;DR

To add a favicon, upload a 32×32 (or 16×16) PNG and an ICO file to your site root and add <link rel="icon" href="/favicon.ico"> inside your <head>. For best results on every platform, also add a 16×16 and 32×32 PNG, an Apple touch icon and a web manifest — the snippet below does all of it.

Add Apple Touch Icons in WordPress

In the digital age, having a visually appealing website is crucial for branding and user experience. One of the essential elements of a well-branded website is the Apple Touch Icon. This icon is particularly important for users who bookmark your site on iOS devices, as it represents your website on their home screens. In this guide, we will explore how to add Apple Touch Icons in WordPress effectively.

What is an Apple Touch Icon?

An Apple Touch Icon is a specific image that iOS devices use when users save a webpage to their home screen. This icon can significantly enhance your site's branding and ensure your website stands out among other apps and shortcuts. By default, iOS uses a screenshot of your webpage, but having a custom icon gives you more control over how your site is represented.

Why Use Apple Touch Icons?

  • Improved Branding: A custom icon helps establish your brand identity on iOS devices.
  • User Recognition: Users can easily recognize your website among other apps on their home screen.
  • Enhanced User Experience: A professional-looking icon can enhance the overall look of a user's device.

Steps to Add Apple Touch Icons in WordPress

Adding Apple Touch Icons to your WordPress site is a straightforward process. Follow these steps to ensure your icons are properly integrated:

  1. Create Your Icon: Use a favicon generator like FaviconX to create your Apple Touch Icon. Ensure the icon is at least 180x180 pixels for optimal resolution across different devices.
  2. Upload Your Icon: Once your icon is ready, log in to your WordPress dashboard. Navigate to Media > Add New and upload your icon file.
  3. Get the URL: After uploading, click on the icon in the Media Library to get the URL. You will need this link for the next step.
  4. Edit the Header: You need to add the icon to your website's header. Navigate to Appearance > Theme Editor. Open the header.php file.
  5. Add the Link Tag: In the <head> section of your header.php file, add the following line:
<link rel="apple-touch-icon" sizes="180x180" href="YOUR_ICON_URL">
  1. Save Changes: After adding the link tag, save your changes to the header.php file.
  2. Test Your Icon: To ensure everything is set up correctly, visit your website on an iOS device. Save your site to the home screen and check if the Apple Touch Icon appears as intended.

Best Practices for Apple Touch Icons

  • Use a transparent background to make the icon look more professional.
  • Ensure the icon is visually appealing and represents your brand effectively.
  • Test the icon on different devices to ensure it displays correctly across various screen sizes.

Conclusion

Adding Apple Touch Icons to your WordPress site is a simple yet effective way to enhance your branding and user experience. By following the steps outlined in this guide, you can ensure that your website leaves a lasting impression on visitors who save your site to their home screens. Remember to keep your icons updated and aligned with your brand identity for the best results!