Recognize "apple-touch-icon" with htaccess password protection

Question

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

Answer 1

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...

Answer 2

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.