favicon(ファビコン)を作成しました。

以前よりブラウザのアドレスバーや、ブックマークのURLの左に表示されている小さなアイコンが気になっていました。

このアイコンはfavicon(ファビコン)と言うそうです。

faviconの作り方は、ネットを検索すれば色々と出てきます。

僕は2xup.orgさんの「Photoshopで背景透明の美しいfaviconを作成する」を参考にさせてもらいました。

faviconはwindows ico(.ico)形式のファイルで作られており、Photoshopでも開く事が出来ません。

しかしPhotoshop icoformatICO (Windows Icon) Format Pluginを使用すれば、Photoshop で .ico 形式のファイルを開いたり、保存したり出来るようになります。

このプラグインをインストールしたPhotpshopで、32px四方の画像を作成します。

Photoshopなので、背景を透明にする事も簡単です。

完成すれば、Windows icon (.ico) 形式で保存します。

ファイル名は、favicon.icoとします。

私はTwitterのアイコンで使用している

を使いました。解りにくいですが、四隅が丸く加工されておりまして、そこが透明です。

山本忠敬の世界には、山本先生が時々サインとして使用していた

の字にしました。こちらは文字の背景が透明です。

このfavicon.icoを、ブログを展開しているフォルダにアップロードします。

そして、html ファイルの head 要素ブロックの中に

<pre><link rel="icon" href="./favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
</pre>

と挿入して完成です。

ブックマーク(お気に入り)には

このように表示されます。

尚、Photoshopを使用せずに作る方法はAnchanさんの「Favicon(ファビコン)を作成しました」に解り易く解説されています。

Sponsored Links