iphoneホーム画面にサイトのアイコン追加できるようにする方法

 

最近、スマホをandroidからiphoneにしました。そこで気がついたのは、safariで見ていたサイトをアプリのようにホーム画面にアイコンを追加できるということ。androidでもショートカットが作れるようでしたが、そのような機能を使う機会がなかったので、はじめて知った私でした。ブックマークだったり、pocketだったりでページを保存していたので…。

iphoneのホームにボタンアイコンを追加

IMG_0103

 

イメージはこんな感じです(設定が英語ですが)。safariのメニューを表示し、十字の+マーク(Add to Home Acreen)から追加することが可能です。

しかし、普通にアイコンを追加すると、画面をキャプチャーしたようなアイコンになってしまうのです。

IMG_0104

 

 

アイコンを設定する方法はとっても簡単!

①アイコンの画像を作成

アイコンを作成します。ウェブの実のアイコンは、144×144pxで作成しました。

apple_icon

 

作ったアイコンをボタン風に加工してくれたり、デバイスごとにサイズを加工してくれるサイトがあります。

Favicon Hosting and Icon Generator>>
iOSアプリのアイコンの一括リサイズをやってます>>

 

②head内に以下を追加

作成したアイコンのパスを指定し、以下の記述を追加します。

<link rel="apple-touch-icon-precomposed" href="画像のパス" />

記述を追加してから、ホームアイコンを設定してみると、こんな感じで仕上がりました。

 

IMG_0105

 

記述を追加してから、ホームアイコンを設定してみると、こんな感じで仕上がりました。
今更ながら、他で制作したコンテンツも同様に設定しようと思うのでした。

このアイコン設定をホームにできれば、よくサイトを利用してくれる方にとっても便利になりますね。

 

それでは、ごきげんよう。