ファビコン（favicon.ico）の作り方と設置のメモ

WEBサイト用のファビコン（favicon.ico）の作成と設置方法のメモ。
iPhoneやAndroidにも対応。

3つのサイズのPNG画像を準備

PNG24で3つのサイズのアイコン画像を作成しておく。

• 48×48 px
• 32×32 px
• 16×16 px

3つの画像を統合して「favicon.ico」を作成

「半透過マルチアイコン、favicon.icoを作ろう！」http://ao-system.net/alphaicon/
ここのサイトを利用して3つの画像を統合。

PNG8の場合は、http://ao-system.net/favicon/ で「favicon.ico」を作成。
※透過はできるが、アルファ値は白くなるので、準備する画像をドットで用意。


サーバーへファビコンを設置、適用

1. ファビコン（favicon.icon）をWEBサイトのルートに設置。
2. <header>内に
   <link rel=”shortcut icon” href=”http://XXXXXXX/favicon.ico” />
   を追加（http～から始まるフルパスで記述）

wordpressの場合は[テーマ編集]ページへ進んで、header.phpを編集。
「shortcut icon」の記述された箇所を探して編集する。
<link rel="shortcut icon" href="<?php echo bloginfo('url'); ?>/favicon.ico" />


iphone、Androidに対応させる

1. 144x144pxのサイズで、 apple-touch-icon.png をファイル名とした画像を作成
2. <header>内に
   <link rel=”apple-touch-icon” href=”http://XXXXX/apple-touch-icon.png” />
   を追加（http～から始まるフルパスで記述）

wordpressの場合は[テーマ編集]ページへ進んで、header.phpを編集。
「apple-touch-icon」の記述された箇所を探して編集する。
<link rel="apple-touch-icon" href="<?php echo bloginfo('url'); ?>/apple-touch-icon.png" />


iphoneでアイコンの光沢効果を避けたい場合

<link rel=”apple-touch-icon” href=”http://XXX/apple-touch-icon.png” />
ではなく、
<link rel=”apple-touch-icon-precomposed” href=”http://XXX/apple-touch-icon.png” />

photo credit: pasukaru76 via photopin cc