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

ブックマーク アイコンを作成&設定してiPhoneやAndroidでも表示させよう
(YouTube, AdSense, Play 公認エキスパート)
2021年03月04日 in Web・IT
記事内にPR・広告が含まれる場合があります

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

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

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

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

広 告

アイコンを作成する

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

launcher-icon-3x

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

アイコンの設定方法

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

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

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

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

執筆者情報
2004年から当サイト「iscle」を始めた管理者。Google 公認のプロダクトエキスパートとして、YouTube、Google AdSense、Play の公式コミュニティで活動中。スマホアプリ、Web ツールの使い方や最新情報を中心に発信しています。