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

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

新規登録して質問してみよう
ただいま回答率
85.42%
HTML5

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

iPhone

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

Q&A

解決済

1回答

20403閲覧

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

Don

総合スコア13

HTML5

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

iPhone

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

1グッド

2クリップ

投稿2015/06/03 01:13

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

![イメージ説明]WIDTH:600

出典: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で実行した結果です。
他に情報があまりなかったのでこちらで質問させていただきます。
わたしはこれでできた!などご経験がある方がいらっしゃいましたらぜひ教えていただければ幸いです。

ikuwow👍を押しています

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんにちは。

公式ドキュメント 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に

lang

1<link rel="apple-touch-icon" href="touch-icon-iphone.png"> 2<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> 3<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> 4<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 04:00

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Don

2015/06/03 04:41

ご親切にご回答頂きましてありがとうございます。 大変参考になります。 こちらを拝見し、ルートディレクトリに 「apple-touch-icon.png」というファイル名で配置したのですが やはりiPhoneホーム画面にはアイコンが表示されませんでした。。 何かやり方がいけないのかもしれません。。 少し時間がある際にお教えいただきました公式ドキュメントを確認してみたいと思います。 ありがとうございました。
退会済みユーザー

退会済みユーザー

2015/06/03 04:56

Donさん、コメント(返信)をいただきありがとうございます。 そうですか。上記が公式ドキュメントによる設置方法ですので、なにが原因なのかわかりませんね。 念のため確認させていただきますが、iPhoneでの操作ですが、Safariでサイトを開き、下部中央の共有ボタンを押して「ホーム画面に追加」を選択していますでしょうか。 なお、試してみる方法としては、 アイコンの名前を「webclip.png」などとしてルートディレクトリに配置し、 HTMLに <link rel="apple-touch-icon" href="http://サイトのURL/webclip.png" /> と記述するといったこともあるのですが……
退会済みユーザー

退会済みユーザー

2015/06/03 05:03

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

2015/06/04 01:26

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

2015/09/10 11:17

GeorgeCohta様 こちらお教え頂いた方法で時間を置いて確認したところ解決いたしました! ありがとうございました。 apple-touch-icon.pngと命名したアイコンファイルをルートディレクトリに設置し、 かつ、webclip.pngと命名したファイルもルートディレクトリに設置&<link rel="apple-touch-icon" href="http://サイトのURL/webclip.png" />を記述しかなり時間をおいて確認したところ表示がされていました。
退会済みユーザー

退会済みユーザー

2015/09/11 00:55

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問