LoginSignup
2
3

More than 5 years have passed since last update.

Android アイコン設定[web clip icon]

Posted at

AndroidでのWeb Clip設定方法です。

Web Clipとは、Webサイトへのショートカットを、ホーム画面上に追加できる機能のことです。(iPhoneやiPadだけでなく、Android搭載の端末でも機能します)

アイコンの設定方法

iPhoneの場合は、ルートディレクトリにアイコン画像をアップロードするだけで、オリジナルのアイコンが表示されるようになります。ただし、この場合はアイコン画像のファイル名を apple-touch-icon.png にしておく必要があります。

link要素を指定する場合は、任意のファイル名 + 任意の場所にアップロードすることができます。Androidの場合は、link要素でアイコン画像を指定しておく必要があります。(ルートディレクトリにアップロードしただけでは機能しません)

index.html
<link rel="apple-touch-icon" href="icon.png">

検索した記事ではこのような設定でiPhoneもAndroidも動く的なことが書いてあったのですが、うごかないパターンもあるようです。

iPhoneで動かない現象

href="" で指定したパスが絶対パスだと動かない。

Andoridで動かない現象

画像サイズが 120 * 120 でないと動かなかった(たぶん他のサイズでも動くけど、下限と上限の設定があると思う)

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3