ブックマーク アイコンを作成＆設定してiPhoneやAndroidでも表示させよう

Webサイトにブックマークアイコンは忘れずに設定していますか？パソコン向けサイトであれば「ファビコン」と呼ばれるもので、スマホでは「ウェブクリップアイコン」とも呼ばれています。

例えばパソコンであれば、ブラウザでサイトを開いている時に表示されるアイコンです。

スマホであればホーム画面にブックマークをした時に表示されるこれです。

パソコンであれスマホであれ、ブックマークされた時にあなたのサイトだとすぐに分かるアイコンがあれば選択に迷いません。またスマホの場合、Webサイトをホーム画面に追加した時にアイコンが無いのは収まりが悪いです。ということで大切なサイトであればアイコンを作成＆設定しておきましょう！

アイコンを作成する

アイコンの大きさは 144px × 144px 以上の正方形で作成するのがお勧めです。最低でも 57px × 57px の大きさにしてください。ファイル形式は「png」です。

昔だとわざわざ「.ico」形式で作成して設定していましたが、今はパソコンでも「png」形式でOKのようです。※「.ico」でも可能。

アイコンの設定方法

設定も超簡単！下記のコードを head タグ内に入れるだけです。

<link rel="shortcut icon" href="/images/icon.png" />
<link rel="apple-touch-icon-precomposed" href="/images/icon.png" />

画像までのURLはご自身の環境に合わせて変更してください。

なお、スマホサイトをもっとアプリっぽく見せたりする方法は下記記事をご覧ください。