ファビコンと、iPhoneなどで使用されるサイトアイコンを設定する方法

ウェブサイト制作において、ページにファビコンや、iPhoneなどiOSで使用されるアイコンを設定したい場合があると思います。

今回はそのような場合に使用できるソースコードの例となり、ファビコンを設定する方法と、iOSで使用されるアイコンを設定する方法の紹介となります。

ファビコンを設定する例

ウェブページのファビコンを設定するソースコードの例は以下となり、ファビコンを設定したいページのhead要素内に記述します。

例では、サイトのルートディレクトリに設置した画像ファイルfavicon.icoを、ページのファビコンに設定しています。

<link rel="icon" href="/favicon.ico">

ソースコードについて

href属性について

hrefの値に指定したファビコン画像のURLは、絶対パスで指定することも可能です。

rel属性について

IE8以下に対応させる場合には、rel属性の値にshortcutを追加してください。

ファビコンの作成方法について

ファビコンで使用できる.icoの画像ファイルを作成するには、以下のサイト上で簡単に作成できます。

ファビコン作成 favicon.ico 

iPhoneなどiOSで使用されるアイコンを設定する例

iOSで使用されるウェブページのアイコンを設定する例は以下となり、アイコンを設定したいページのhead要素内に記述します。

例のソースコードでは、サイトのルートディレクトリに設置した画像ファイルicon_150.pngを、iOSで使用されるアイコンに設定しています。

<link rel="apple-touch-icon" href="/icon_150.png">

ソースコードについて

iOSで使用されるウェブページのアイコンについて

iOSでは、ウェブページのアイコンをlink要素のrel="icon"で設定できないため、rel="apple-touch-icon"で設定します。

href属性について

hrefの値に指定したアイコン画像のURLは、絶対パスで指定することも可能です。

まざまなデバイスに対応したアイコンの作成方法について

iPhoneなどのiOSで使用するアイコンなど、さまざまなデバイスに対応したアイコンを作成するには、以下のサイト上で簡単に作成できます。

様々なファビコンを一括生成。favicon generator

参考サイト、参考書籍

コメント投稿またはTwitterで返信

コメントは、以下の項目(*は必須項目)を入力し「コメントを送信」ボタンから送信お願いします。メールアドレスは公開されることはありません。
Twitterで返信する場合はコチラから。