0

The question: How can I use a custom iPhone home screen icon while securing my website with .htaccess?

The setup:

  • PHP PaaS
  • Rudimentary password protection using .htaccess and .htpasswd
  • Simple website built using Wikitten

The problem: I would like to see my custom "apple-touch-icon" when I put a bookmark of my website onto my iPhone home screen using the "Add to Home Screen" function in mobile Safari. Unfortunately, when I enable "require valid-user" in the .htaccess file, the iPhone does not see the icon and instead uses a generic image. When I disable password protection in .htaccess, the icon is recognized, but I really need some sort of password protection and I hope to continue using the current method.

Any help is appreciated; thanks,
Mitch

mdwittenberg
  • 21
  • 3

2 Answers2

1

I followed this guide which had me add the following lines of code to the bottom of my .htaccess file:

SetEnvIf Request_URI "(path\to\file\.ext)$" allow
Order allow,deny
Allow from env=allow
Satisfy any

I assume this method requires the icon to be named apple-touch-icon.png since Safari won't have access to any linking in the HTML. Ergo, for my site I specifically used:

SetEnvIf Request_URI "(apple-touch-icon\.png)$" allow

Where in the root of my website lives a 180px version of my desired icon.

mdwittenberg
  • 21
  • 3
  • Normally name is `apple-touch-icon-180x180.png`. The browser tries with sizes would like to use in order of preference. the element’s size defaults to 60 x 60 – Croises Nov 28 '14 at 16:42
0

Do not protect the whole site, but all that is in a directory (Even if almost all of the site).

This way, you can show a home page, with explanations for those wishing to access the site. And apple-touch-icon...

Croises
  • 18,570
  • 4
  • 30
  • 47
  • You're welcome, glad it worked out. By the way, you must offer more than one icon for different Apple devices: https://developer.apple.com/library/iad/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html – Croises Nov 25 '14 at 14:39