web-dev-qa-db-ja.com

Appleタッチアイコンがホーム画面に表示されない

次のコードを使用して、モバイルデバイスのタッチアイコンを取得しています。これは、html5boilerplate/mobileの例に基づいています。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="Apple-touch-icon-precomposed" sizes="114x114" href="/img/touch/h/Apple-touch-icon.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="Apple-touch-icon-precomposed" href="/img/touch/l/Apple-touch-icon.png">
<!-- For nokia devices: -->
<link rel="shortcut icon" href="/img/touch/Apple-touch-icon.png">

<meta name="Apple-mobile-web-app-capable" content="yes">
<meta name="Apple-mobile-web-app-status-bar-style" content="black">

しかし、何らかの理由で、iPhoneがホーム画面のアイコンに問題を残しています。私が得るすべてはその迷惑なスクリーンショットのアイコンです。

他のメタタグが含まれているのは、なぜ機能しないのかを理解するためです。タグを並べ替えてみました。

誰もがアイコンの使用を停止する可能性のある何かを考えることができますか？

私はhtml5boilerplate/mobileをテストケースとして使用しました-彼らのサイトを閲覧し、iPhone（4S iOS5）のホーム画面にアイコンを追加することができます。コード、フォルダ構造、アイコンを自分のサイトにコピーしてみましたが、うまくいきませんでした。

何か案は？

htmliphoneios5apple-touch-icon
31
gpr

同じページとアイコンを他の2つのサイトに配置し、それが完全に機能したので、私が作業していた元の2つのテストサーバーがパスワードで保護されていた可能性があります。なぜそれが問題になるのか、完全にはわかりません。しかし、結果はこれが事実であることを示唆しているように見えます。

12
gpr

私も同じ問題を抱えていました。解決策は、Webサイトのパスワード保護を削除することです。

64
Ccx

私はまったく同じ問題を抱えていましたが、問題の原因は私のサイトにパスワード保護が設定されたhtaccessファイルがあったため、この問題を解決するためにWebclipアイコンが機能せず、パスワード保護がまだあるため、このコードを追加する必要があります：

SetEnvIf Request_URI "(/Apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any

そうすれば、パスワードを必要とせずに http://www.example.com/Apple-touch-icon.png に完全にアクセスできます。

それでも問題が解決しない場合は、完全なhtaccessファイルの例を次に示します。

AuthUserFile /home/mysite/.htpasswds/.htpasswd
AuthType Basic
AuthName "Password Protected"
Require valid-user
SetEnvIf Request_URI "(/Apple-touch-icon\.png)$" allow
Order allow,deny
Allow from env=allow
Satisfy any

これで問題が解決します。

乾杯！！

6
innovaciones

Apple Safari Web Content Guide では、アイコンを「ルートドキュメントフォルダ」に置くことを提案しています。

Webサイト全体（Webサイトのすべてのページ）のアイコンを指定するには、アイコンファイルをPNG形式でApple-touch-icon.pngまたはApple-touch-icon-precomposed.pngというルートドキュメントフォルダーに配置します。

私はこれを試してみましたが、ようやくアイコンを「img」フォルダに移動してそこにリンクするまで機能しません。

ただし、html5boilerplateアイコンが機能し、それが機能しなかった理由は、次のような仮想ディレクトリを使用しているためと思われます。

http://localhost/myvirtualdirectory/Apple-touch-icon.png

一方、iOSのデフォルトの動作は、仮想ディレクトリ外でホストしている場合でもルートドメインを調べることです。

http://localhost/Apple-touch-icon.png

うまくいけば、他の人がこれを確認できます。

6
Chad Pavliska

サイトがパスワードで保護されていなくても、アイコンがui/imgフォルダーにあるときに同じ問題が発生しました。それらを私のルートフォルダーに移動（およびキャッシュをクリア）すると、機能し始めました。

1
patad

外部画像ホスティングにアイコンを配置し、 "href"の値としてURLを追加することは、私にとって魅力的に機能しました。

1
Artem Mishukov