HTML5で作ったアプリのアイコンがiphoneやandroidで正しく表示されるか少し検証してみました![](https://stat100.ameba.jp/blog/ucs/img/char/char2/193.gif)
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/193.gif)
Webクリップアイコンというのですが、htmlのhead内に以下の記述をすればアイコン設定可能です![](https://stat100.ameba.jp/blog/ucs/img/char/char2/089.gif)
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/089.gif)
<!-- Webクリップアイコン(iOSのみ) -->
<link rel="apple-touch-icon" href="images/icon/IconName.png" />
「apple-touch-icon」とある通り、iOSだけ有効でAndroidではブックマークアイコンしか表示されないと聞いていましたがAndroidでも有効でした![](https://stat100.ameba.jp/blog/ucs/img/char/char2/039.gif)
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/039.gif)
やっぱ本に書いてある事を信じるのではなく、やってみる事が大事ですね![](https://stat100.ameba.jp/blog/ucs/img/char/char2/038.gif)
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/038.gif)
ちなみにこんなかんじです。
「SmashSyuriken」というアプリが144x144で
「株式会社イン」というのは100x100でスマホ対応させたHPです。
HPの方はfaviconサイズだったのでAndroidだと変な表示ですね~![](https://stat100.ameba.jp/blog/ucs/img/char/char2/028.gif)
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/028.gif)
iphoneもAndroidも角丸アイコンにしてくれるようです![](https://stat100.ameba.jp/blog/ucs/img/char/char2/131.gif)
![](https://stat100.ameba.jp/blog/ucs/img/char/char2/131.gif)