自分の Web サイトに iPhone 用のアイコンを付けるにはどうすればよいですか?
-
08-06-2019 - |
質問
に適切に表示されるアイコンを設定するにはどうすればよいですか? iPhone
私が作成した Web サイト用ですか?
解決 3
を参照してください。 Web クリップの Web ページ アイコンの指定 のセクション Web アプリケーションの構成 のページ Safari Web コンテンツ ガイド の中に Safari リファレンス ライブラリ...
Web クリップの Web ページ アイコンの指定
iPhone OS 注: Webクリップ機能は、iPhone OS 1.1.3以降で利用できます。の
apple-touch-icon-precomposed.png
ファイル名はiPhone OS 2.0以降で利用できます。ユーザーがホーム画面にWebアプリケーションまたはWebページリンクを追加できるようにすることができます。アイコンで表されるこれらのリンクは、Webクリップと呼ばれます。これらの簡単な手順に従って、iPhone OSのWebアプリケーションまたはWebページを表すアイコンを指定してください。
ウェブサイト全体(ウェブサイト上のすべてのページ)のアイコンを指定するには、アイコンファイルをPNG形式で配置します。
apple-touch-icon.png
またはapple-touch-icon-precomposed.png
. 。使用する場合apple-touch-icon-precomposed.png
ファイル名として、iPhone OSのSafariはアイコンに効果を追加しません。単一のWebページのアイコンを指定するか、WebサイトアイコンをWebページ固有のアイコンに置き換えるには、次のようにWebページにリンク要素を追加します。
<link rel="apple-touch-icon" href="/custom_icon.png"/>
上記の例では、次のように置き換えます。custom_icon.png
アイコンファイル名で。iPhone OSのSafariがアイコンにエフェクトを追加したくない場合は、交換してくださいapple-touch-icon
とapple-touch-icon-precomposed
.見る 「Web アプリケーションまたは Web ページのアイコンを作成する」 で Web アプリケーションのための iPhone ヒューマン インターフェイス ガイドライン Webページアイコンのメトリクス用。
他のヒント
完全を期すために、Scott Hanselman の投稿へのリンクを貼っておきます。これには追加のヒントも含まれています。
Apple Developer Connection iPhone 用 Safari Web コンテンツ ガイドのページより Web クリップの Web ページ アイコンの指定...
ユーザーは、ホーム画面にWebアプリケーションまたはWebページリンクを追加できます。アイコンで表されるこれらのリンクは、Webクリップと呼ばれます。これらの簡単な手順に従って、iPhoneでWebアプリケーションまたはWebページを表すアイコンを指定してください。
Webサイト全体(Webサイト上のすべてのページ)のアイコンを指定するには、Apple-Touch-Icon.pngというルートドキュメントフォルダーにPNG形式のアイコンファイルを配置します。
単一のWebページのアイコンを指定するか、WebサイトアイコンをWebページ固有のアイコンに置き換えるには、次のようにWebページにリンク要素を追加します。
<link rel="apple-touch-icon" href="/custom_icon.png"/>
上記の例では、custom_icon.pngをアイコンファイル名に置き換えます。
iPhone Human Interfaceガイドラインの「WebアプリケーションまたはWebページのアイコンの作成」を参照してください。WebページアイコンメトリックのiPhone Human Interfaceガイドラインガイドライン。
注記:Webクリップ機能は、iPhone 1.1.3以降で利用できます。
これを head セクションに追加します。<link rel="icon" href="/your-icon-url"/>
私は、Stack Overflow に apple-touch-icon を実装することを提案しました。