favicon（ファビコン）の代表的なサイズと基本的な作成方法

こんにちは！デザイナーのサリーです。

ブックマークしたサイトのfaviconを眺めるのが好きです。小さくて細かいものが並んでいるときゅんとします。

今日はファビコン作成時に悩みがちなファビコンのサイズ、マルチアイコン(.ico)への変換方法など、基本的な作成方法を紹介します。ファビコン作成時に使えるアイデアについても紹介するので、参考にしてください。

ファビコンのサイズ

ファビコンを作成するときにまず迷うのが、サイズですよね。ファビコンは表示される場所がたくさんあるため、一つのサイズに絞ることが難しく、どのサイズで作成すればいいのか悩んでしまいます……。

そこで、代表的なファビコンのサイズを整理しました。現在では20種類以上のfaviconサイズがあると言われていますが、その中でも押さえておきたいものをピックアップしています。

各ブラウザのファビコン表示サイズは16px × 16px が一般的ですが、表示される場所によっては表示サイズがこれより大きい場合があります。

そのため作成するときは、32px × 32px で作るか、上記表で示したサイズのファビコンを作りマルチアイコン（※）にする人も多いです。

※複数のサイズのアイコンをico形式で1つのファイルにまとめたアイコン画像のこと

ウェブクリップアイコンについては、こちらの「スマホ対策！faviconを設定するなら「ウェブクリップアイコン」も忘れずにね！」を参考にしてみてください。

その他

さらには、ショートカットアイコンで 48px × 48px、64px ×64px、128px ×128px、258px ×258px を使用するOSもあり…きりがなくなってきました。

	ショートカットアイコンはfaviconが使用されます。

たくさんのサイズのアイコンを毎回用意するのは正直大変ですよね。大きなサイズでひとつ作って縮小して使いまわすこともできますが、思うように綺麗に縮小してくれなかったり、古いブラウザは対応していないこともあるようです。

個人的なおすすめ

個人的には 16px × 16px 、32px × 32px のふたつをマルチアイコンにすれば充分だと思っています。32px × 32px ひとつでもいいですが、16px × 16px になったときにブラウザによって見え方が違ったり、思うように綺麗に縮小されないことがありました。

きっちり完璧に作りたい方は、すべてのサイズをマルチアイコンにするのも手ですが、ファイルサイズが大きくならないように気をつけましょう。

ファイル形式について

favicon画像は「.png」や「.gif」でも表示できますが、古いブラウザは対応していないものもあるので、マルチアイコンにもできる「.ico」が一番好ましいです。

「.ico」への変換方法

Webサービス・ツールでもgifやpngからicoへの変換ができますが、Photoshopにプラグインを入れることでもico形式で書き出しができるようになります。

https://www.telegraphics.com.au/sw/product/ICOFormat#icoformat

ダウンロードしたプラグインファイルをPhotoshopの「Plug-ins > File Formats」のフォルダに入れればOKです（OSやPhotoshopのバージョンによってファルダの場所は違いあり）。

ただ、Photoshopからそのままマルチアイコン化する方法がわからず……。
というわけで、マルチアイコンにする場合はpngで書きだしてから下記サービスを利用しています。

• 複数マルチアイコンを作ろう！

  https://ao-system.net/multiicon/

透過させる

かわいいfaviconを見つけても、背景が白いままで透過されていないとちょっと残念に感じます。すごく簡単なことですが、デザインに含まれていなければ背景は透過させたほうが手間がかかっているように見えます。

綺麗に透過されたfaviconのサイト

Twitter
https://twitter.com/

Dropbox
https://www.dropbox.com/ja/

ドットを意識する

本当に16px？と疑うほど細かく綺麗なアイコンは、よくよく見るとぼやけた部分が少なく、かなりドットを意識して作られています。
ドットを打って作られたアイコンははっきりしていて綺麗ですが、モチーフを縮小して作る場合でも少し調整してあげるとわかりやすくいい感じになります。

ドットを意識したfaviconのサイト

任天堂
https://www.nintendo.co.jp/

Chrome ブラウザ
https://www.google.com/intl/ja/chrome/browser/

アニメーションにしてみる

faviconにはアニメーションGIFも使えます！目立たせたいときにはいい方法ですね。ただし、残念ながら現在はFirefoxにしか対応していません……。

アイコンは通常のものとアニメのものを2パターン用意する必要があります。以下のように両方指定すると対応ブラウザ以外は通常のものが表示されます。

<link rel="SHORTCUT ICON" href="hogehoge/images/favicon.ico">
<link rel="icon" href="hogehoge/images/favicon.gif" type="image/gif">

アニメーションのfaviconのサイト

面白法人カヤック
https://www.kayac.com/

マイ・フェイバリット関西
https://www.my-fav.jp/

※上記faviconは2013年3月14日時点のものです。

モチーフがないときは……

マークがない、ロゴもfaviconにしづらい、モチーフがなにもない！というとき。
無理に何かを探すより、サイトのカラーだけでシンプルに作ってもオシャレです。枠をつけたり丸にしたりするだけで意外と個性が出ますよ。

シンプルなfaviconのサイト

Rhizomatiks
https://rhizomatiks.com/

Webpark
http://weboook.blog22.fc2.com/

おまけ

おまけで、上記で例で出した他にも私の好きなfaviconのサイトをご紹介。
細かい仕事にうっとりです。

Marble.co
https://www.marble-co.net/portfolio

華恵オフィシャルサイト｜ORIHIME
http://hanae-orihime.com/

Firebug
https://getfirebug.com/

【favicon作成をお助け】
※ 【2021】無料で商用利用可なフリーアイコン素材サイト12選

※ スマホ対策！faviconを設定するなら「ウェブクリップアイコン」も忘れずにね！

※ 最近お世話になったWEB制作に関するお役立ちツール＆プラグイン

※ Photoshopでゲームのようなドット絵を描く方法と設定＆おすすめツール

※ TwitterやFacebookユーザーにオススメ！アイコン作成サイトまとめ16選