Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Apple Touch icon for websites in HTML
Apple Touch Icons are custom icons that appear when users add your website to their iPhone or iPad home screen. These icons replace the default website screenshot with a professional-looking app-style icon.
Basic Apple Touch Icon
To add a basic Apple Touch Icon, include this in your HTML <head> section:
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
This creates a bookmark icon when users tap the share button and select "Add to Home Screen" on iOS devices.
Multiple Sizes for Different Devices
Different Apple devices require different icon sizes. Use the sizes attribute to specify multiple icons:
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
Complete Example
Here's a complete HTML document with Apple Touch Icons:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Website</title>
<!-- Apple Touch Icons -->
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Add this page to your home screen to see the custom icon!</p>
</body>
</html>
Recommended Icon Sizes
| Device | Size (pixels) | Description |
|---|---|---|
| iPhone (older models) | 120x120 | Standard resolution |
| iPad | 152x152 | Standard iPad resolution |
| iPad Pro | 167x167 | High resolution iPad |
| iPhone (newer models) | 180x180 | Retina display resolution |
Key Points
- iOS automatically selects the most appropriate icon size for the device
- If no size matches exactly, iOS will scale the closest size
- Icons should be PNG format for best compatibility
- Place icon files in your website's root directory
Conclusion
Apple Touch Icons enhance your website's appearance on iOS devices when users bookmark your site. Include multiple sizes to ensure optimal display across different Apple devices.
Updated on: 2026-03-15T23:18:59+05:30
2K+ Views
Advertisements