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

ぴょん

13年前

以前よりブラウザのアドレスバーや、ブックマークの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 要素ブロックの中に

&amp;amp;lt;pre&amp;amp;gt;&amp;amp;lt;link rel=&amp;amp;quot;icon&amp;amp;quot; href=&amp;amp;quot;./favicon.ico&amp;amp;quot; type=&amp;amp;quot;image/x-icon&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;link rel=&amp;amp;quot;shortcut icon&amp;amp;quot; href=&amp;amp;quot;./favicon.ico&amp;amp;quot; type=&amp;amp;quot;image/x-icon&amp;amp;quot;&amp;amp;gt;
&amp;amp;lt;/pre&amp;amp;gt;

と挿入して完成です。

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

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

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