Customize iPhone Icon on iPhone Home Page from their github repository #189206

paniaguai · 2026-03-11T08:35:59Z

paniaguai
Mar 11, 2026

Select Topic Area

Question

Body

Has anyone been able to customize the iPhone Icon on iPhone Home Page from their github repository ?

Here is my code on

https://paniaguai.github.io/gridlink/

The code call:

(I have tried many different formats, this is the simplest)

The icon:

https://paniaguai.github.io/gridlink/apple-touch-icon.png

The Icon still does not show up-

Why ? How to ficx it ?

I can´t put put the icon at the root:

https://paniaguai.github.io/apple-touch-icon.png

Thank you so much.

WattoX00 · 2026-03-11T14:30:58Z

WattoX00
Mar 11, 2026

Try to put this inside the head:

<link rel="apple-touch-icon" href="https://paniaguai.github.io/gridlink/apple-touch-icon.png">

If that fails then the path might be wrong...

0 replies

Nikhil9211 · 2026-03-11T18:04:04Z

Nikhil9211
Mar 11, 2026

When you use a custom path (like /gridlink/), iOS doesn't always "hunt" for the icon automatically. It expects a very specific handshake. Here is how to fix it:

1. The HTML "Handshake"

Since your icon isn't in the root directory, you must explicitly tell the browser where it is in the <head> of your index.html.

Add this line:
<link rel="apple-touch-icon" href="https://paniaguai.github.io/gridlink/apple-touch-icon.png">

Pro Tip: While Safari should handle relative paths, using the absolute URL (starting with https://) as shown above is the "nuclear option" that usually fixes pathing issues on GitHub Pages.

2. Common Technical "Gotchas"

Even with the right code, these three things often break the process:

Transparency: iOS icons cannot have transparency. If apple-touch-icon.png has an alpha channel (a transparent background), iOS will sometimes ignore it and just show a screenshot of the website instead. Ensure the background is a solid color.
Dimensions: The gold standard is 180x180 pixels. If it’s too small, iOS might reject it.
The Cache Monster: Safari is aggressive with caching. After you push your changes to GitHub, clear your Safari history/cache on your iPhone or open the link in a Private Tab before trying to "Add to Home Screen" again.

3. How to Verify

Before you try adding it to your home screen, you can check if the link is being seen correctly:

Open your site in Safari on your iPhone.
Wait for the page to fully load.
Tap the Share button (the square with the up arrow).
Look at the top of the Share Sheet next to your site title. If you don't see the icon there, it won't show up on the Home Screen.
Summary Checklist
| Format ---> PNG (No transparency) |
| Size ---> 180x180 px |
| Code -----> <link rel="apple-touch-icon" href="..."> |
| Location ----> Absolute URL preferred for GitHub Pages |

0 replies

Sudip-329 · 2026-03-11T18:47:19Z

Sudip-329
Mar 11, 2026

Hi,

On iOS, the home screen icon for a website is detected using the apple-touch-icon link tag in the HTML <head>. If the icon is not appearing, it is usually due to one of the following reasons:

1. Make sure the tag exists in the <head> section

<link rel="apple-touch-icon" href="https://paniaguai.github.io/gridlink/apple-touch-icon.png">

2. Use a recommended icon size
Apple recommends 180×180 px PNG for best compatibility. If the icon has a different size, iOS may ignore it.

3. Clear the cached icon on iPhone
iOS aggressively caches icons. If you previously added the site to the home screen, delete the shortcut and add it again:

Remove the icon from the home screen
Open the site again in Safari
Tap Share → Add to Home Screen

4. Check file accessibility
Make sure the icon URL opens directly in the browser and returns HTTP 200 without redirects.

5. Optional: provide multiple sizes

<link rel="apple-touch-icon" sizes="180x180" href="https://paniaguai.github.io/gridlink/apple-touch-icon.png">

If everything is correct, the icon should appear when the site is added to the home screen.

If this solved your issue, please consider marking the answer as accepted so it can help others facing the same problem.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

GitHub Community

Customize iPhone Icon on iPhone Home Page from their github repository #189206

Uh oh!

{{title}}

Uh oh!

Replies: 3 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

GitHub Community

Customize iPhone Icon on iPhone Home Page from their github repository #189206

Uh oh!

paniaguai Mar 11, 2026

Select Topic Area

Body

Replies: 3 comments

Uh oh!

WattoX00 Mar 11, 2026

Uh oh!

Nikhil9211 Mar 11, 2026

1. The HTML "Handshake"

2. Common Technical "Gotchas"

3. How to Verify

Uh oh!

Sudip-329 Mar 11, 2026

paniaguai
Mar 11, 2026

WattoX00
Mar 11, 2026

Nikhil9211
Mar 11, 2026

Sudip-329
Mar 11, 2026