ァビコンを作る

ファビコンを作るWebデザイン・テンプレート集ファビコンとはWebブラウザのウインドウや、ブックマーク(お気に入り)一覧のアイコンに使用される画像です。

さまざまなファビコン

Webブラウザでの表示サンプルです。
タブやURLの窓に表示されたりします。(下の画像はクリックで拡大します。)
Windowsのブラウザのファビコンに注目!!

Internet Explorer 10のURL欄のアイコンを、デスクトップにドラッグ&ドロップするとファビコンがアイコンになったショートカットができます。
Windowsのデスクトップにできたファビコンがアイコンになったショートカット
 
 

作り方!

簡単に作ることができます。

  1. 画像作成ツールを用意
    別記事の「ロゴ画像を作るのにオススメのツール」で紹介した、画像作成ツールを用意します。
  2. ファビコンサイズの画像をつくる
    画像編集ソフトで16px*16pxと32px*32pxの画像を作りましょう。書き出しフォーマットはPNG32(Fireworks)、PNG-24・透明部分にチェック(Photoshop)が、透明部分が生かせるファビコンができるのでおすすめです。
  3. icoフォーマットに変換
    ファビコンにするには作った画像をicoフォーマットに変換します。
    便利なサイトがありますので利用させていただきます!

    Screenshot of ao-system.net

    透過タイプの場合はこちら

    Screenshot of ao-system.net
  4. HTMLにファビコンへのリンクを書く
    書籍付属データの「Chapter 1 写真をたくさん使うWebサイト」の01、index.htmlを例にファビコンへのリンクコードの挿入例を紹介します。

    「favicon.icoまでのパス」がfavicon.icoを置いた場所によって変わります。
    よく設置される場所はサイトの一番上の階層ですので、index.htmlなどと同じ階層に置いた場合は「href=”favicon.ico”」とするとよいでしょう。
    サイトのルートに「favicon.ico」のファイル名で置くとファビコンへのリンクの記述がなくても表示されます。

  5. 完成です!
    設置したURLにアクセスするとファビコンが表示されます。

補足情報

画像作成ツールの拡張機能でもファビコンが作れます。

外部サービスを使わないで画像作成ツールに拡張機能を追加するだけでファビコンを仕上げることもできます。

Fireworks

Screenshot of blog.webcreativepark.net

こちらで詳しく紹介されています。
Fireworksのページ機能で複数サイズのアイコンを作ります。

Photoshop

Screenshot of www.kigurumi.asia

複数のサイズをまとめることはできないようですが、32pxのサイズを作っておいて16pxの表示は自動で縮小表示されるもので対応するようです。

ファビコンを作るときに便利!複数ウインドウ

FireworksとPhotoshopでできる手法です。
同じ画像を複数のウインドウで開いて編集します。
片方のウインドウは原寸表示、もう片方は拡大してそちらを編集、とするととても作業しやすいです。
複数ウインドウ(Photoshop)

複数ウインドウの出し方

Fireworks
メニューのウインドウ > ウインドウを複製
複数ウインドウの開き方(Fireworks)
Photoshop
メニューのウインドウ > アレンジ > “ファイル名”の新規ウインドウ
複数ウインドウの開き方(Photoshop)

ファビコンを作ることができるアプリケーション

Web上のアプリケーションではなく、マシンにインストールするタイプのものでもファビコンを作ることができます。

Windows
@icon変換@icon変換
日本語のアプリケーションなのでとても使いやすいです。
2007年から開発が止まっていますが、Windows 8でも問題無く動作しました。

Screenshot of www.towofu.net
Mac
Icon ComposerIcon Creator
App Storeで350円で販売しています。こちらを利用するのもいいでしょう。
App Store
Icon ComposerIcon Composer
ちょっと前までMacの開発ツールXcodeの中に入っていたのですが、最近は入っていないみたいです。
Xcodeを使っている方は簡単に使えるようになりますので、次の項目で説明します。

Xcodeを入れてIcon Composerを利用する方法

XcodeXcodeのインストールは省略します。
10.7以前の方は「control + space」でSpotlightの検索窓が右上に出ますのでそこで「Icon Composer」と入れるとアプリケーションの候補に出てきます。普通のアプリケーションとはパスが変わっていますので、立ち上げてドックに表示したあとに副ボタンクリックで「オプション」>「Dockに追加」または「Finderに表示」でエイリアスを作ってみたり便利なようにしてください。

10.8以降のXcodeにはIcon Composerは入っていません!!!
驚きでした。私は過去バージョンのXcodeからIcon Composerをコピーして使うなどしていたのですが、もっとちゃんとした方法を紹介してるサイトがありました!

Screenshot of golbitz.com

XcodeにIcon Composerが同梱されなくなったのは最近のMacの巨大なサイズのアイコンにIcon Composerが対応していないから、とのことです。ファビコンを作るには全く問題ありません。

他のソフトを探すときは「ファビコン」ではなく「アイコン」作成のソフトを探すと大体ファビコンも作れるようになっています。
※icoフォーマットは元々ファビコン専用のフォーマットではなく、Windowsのアイコンの規格だからです。
 
 
以上です!
読んでいただいてありがとうございます。