質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.61%

  • HTML5

    3903questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • iPhone

    965questions

    iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。

【iPhone】ウェブクリップアイコンが表示されない

解決済

回答 1

投稿

  • 評価
  • クリップ 2
  • VIEW 10K+

Don

score 5

制作したサイトをスマートフォンでアプリのように表示させたく
ウェブクリップアイコンを制作しました。

イメージ説明> 出典:https://sin-space.com/html/332/

調べたところ、head内に以下を記載し、index.htmlと同じ階層にアイコン画像を設置すると
アイコンが表示されるとのことで実行してみましたが、iPhoneのみ表示されません。。
(ウェブクリップアイコンが表示されず、トップページの画像がアイコンのように表示されます)
Androidは表示されます。

<link rel="apple-touch-icon-precomposed" href="サイトのURL/webclip.png" />

「apple-touch-icon-precomposed.png」という画像名にしてサーバーにアップしておくと勝手に反映される
というのも実行してみたのですが、表示されませんでした。

iPhoneはiPhone 6 PlusとTouchで実行した結果です。
他に情報があまりなかったのでこちらで質問させていただきます。
わたしはこれでできた!などご経験がある方がいらっしゃいましたらぜひ教えていただければ幸いです。
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

こんにちは。

公式ドキュメント iOS Developer Library(リンク)には、Web Clipについて下記のとおりの記述があります。

To specify an icon for the entire website (every page on the website), place an icon file in PNG format in the root document folder called apple-touch-icon.png
(Webサイト全体(Webサイト上のすべてのページ)のアイコンを指定するには、apple-touch-icon.png と命名したPNG形式のアイコンファイルをルートディレクトリに配置してください)

つまり、ルートディレクトリに apple-touch-icon.png を置いておけばいいということです。

厳密に iPhone、iPhone Retina、iPad、iPad Retina それぞれに対応させたい場合は、複数のサイズ(リンク)のアイコンをルートディレクトリに配置したうえで、HTMLに
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
と記述します。

ただし、公式ドキュメントには

If there is no icon that matches the recommended size for the device, the smallest icon larger than the recommended size is used. If there are no icons larger than the recommended size, the largest icon is used.
(デバイスの推奨サイズに一致するアイコンがない場合は、推奨サイズよりも大きな最小サイズのアイコンが使用されます。それがアイコンがない場合は、最大のアイコンが使用されます。※一部意訳)

とありますので、152x152(6 plusを考慮した場合は 180x180)のアイコンだけを作成し、
apple-touch-icon.png というファイル名でルートディレクトリに配置しておけばいいことになります。

今回の回答でリンクさせていただいた公式ドキュメントには開発の際に遭遇する問題を解決へと導く多くのことが書かれています。お時間があるときにでも、全文をご一読いただければと思います。

以上、ご参考いただければ幸いです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/03 13:41

    ご親切にご回答頂きましてありがとうございます。
    大変参考になります。

    こちらを拝見し、ルートディレクトリに
    「apple-touch-icon.png」というファイル名で配置したのですが
    やはりiPhoneホーム画面にはアイコンが表示されませんでした。。

    何かやり方がいけないのかもしれません。。
    少し時間がある際にお教えいただきました公式ドキュメントを確認してみたいと思います。
    ありがとうございました。

    キャンセル

  • 2015/06/03 13:56

    Donさん、コメント(返信)をいただきありがとうございます。
    そうですか。上記が公式ドキュメントによる設置方法ですので、なにが原因なのかわかりませんね。

    念のため確認させていただきますが、iPhoneでの操作ですが、Safariでサイトを開き、下部中央の共有ボタンを押して「ホーム画面に追加」を選択していますでしょうか。

    なお、試してみる方法としては、
    アイコンの名前を「webclip.png」などとしてルートディレクトリに配置し、
    HTMLに
    <link rel="apple-touch-icon" href="http://サイトのURL/webclip.png" />
    と記述するといったこともあるのですが……

    キャンセル

  • 2015/06/03 14:03

    追記
    iOS 7 以降の Safariでは、「-precomposed」つきのファイルは扱わなくなったようですのでご注意ください。

    キャンセル

  • 2015/06/04 10:26

    GeorgeCohta様
    ご返信ありがとうございます。

    お教え頂いたものも全て実施しているのですが、iPhoneのみ表示されません。。(泣)
    Androidは表示されます。
    まだiPhone 6 Plusでしか試せていないのですが、他の環境でも確認してみたいと思います。
    ありがとうございました。

    キャンセル

  • 2015/09/10 20:17

    GeorgeCohta様
    こちらお教え頂いた方法で時間を置いて確認したところ解決いたしました!
    ありがとうございました。

    apple-touch-icon.pngと命名したアイコンファイルをルートディレクトリに設置し、
    かつ、webclip.pngと命名したファイルもルートディレクトリに設置&<link rel="apple-touch-icon" href="http://サイトのURL/webclip.png" />を記述しかなり時間をおいて確認したところ表示がされていました。

    キャンセル

  • 2015/09/11 09:55

    Donさん、コメントをいただきありがとうございます。
    無事に解決できてよかったです。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML5

    3903questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

  • iPhone

    965questions

    iPhoneとは、アップル社が開発・販売しているスマートフォンです。 同社のデジタルオーディオプレーヤーiPodの機能、電話機能、インターネットやメールなどのWeb通信機能の3つをドッキングした機器です。