ファビコンと、iPhoneなどで使用されるサイトアイコンを設定する方法
ウェブサイト制作において、ページにファビコンや、iPhoneなどiOSで使用されるアイコンを設定したい場合があると思います。
今回はそのような場合に使用できるソースコードの例となり、ファビコンを設定する方法と、iOSで使用されるアイコンを設定する方法の紹介となります。
ファビコンを設定する例
ウェブページのファビコンを設定するソースコードの例は以下となり、ファビコンを設定したいページのhead要素内に記述します。
例では、サイトのルートディレクトリに設置した画像ファイルfavicon.icoを、ページのファビコンに設定しています。
<link rel="icon" href="/favicon.ico">ソースコードについて
href属性について
hrefの値に指定したファビコン画像のURLは、絶対パスで指定することも可能です。
rel属性について
IE8以下に対応させる場合には、rel属性の値にshortcutを追加してください。
ファビコンの作成方法について
ファビコンで使用できる.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