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

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

サリー

サリー

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

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

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

※この記事は、2013年3月14日に公開された記事を再編集したものです。

ファビコンのサイズ

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

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

16px × 16px Edge、Chrome、Firefox、Safariなどブラウザのタブ
24px × 24px IE9の「ピン留め機能」
32px × 32px ブックマークのアイコン
48px × 48px Windowsホーム画面のサイトアイコン
64px × 64px 高解像度のWindowsサイトアイコン
180px × 180px iOS、Androidなどのスマホのホーム画面アイコン

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

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

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

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

その他

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

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

 

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

個人的なおすすめ

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

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

ファイル形式について

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

「.ico」への変換方法

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

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

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

透過させる

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

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

Twitter
twitter https://twitter.com/

Dropbox
favicon-vflk5FiAC https://www.dropbox.com/ja/

ドットを意識する

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

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

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

Chrome ブラウザ
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
Rhizomatiks https://rhizomatiks.com/

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

おまけ

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

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

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

Firebug
Firebug https://getfirebug.com/

 

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

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

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

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

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

「ググってわからないこと」が一瞬で解決するかも?

Webデザインを効率的に学びたい転職・就職を目指している誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGのスクールでは、現役デザイナーがマンツーマンで指導します!

▼少しでも気になる方は、ぜひ公式サイトをご覧ください!
デジタルハリウッドSTUDIO by LIG

この記事のシェア数

523

サリー
サリー デザイナー / 岩崎 沙織

LIGのデザイナーです。ウェブデザイナーの頂点を目指すために東京に来ました。立ちはだかる敵は全てなぎ倒してきました。これからもそうやって歩いて行くつもりです。