Web事業部実績紹介_Webマーケティング
Web事業部実績紹介_Webマーケティング
2015.04.14

綺麗なfavicon(ファビコン)作成の基本的なコツ・アイデアまとめ

サリー

ドットを意識する

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

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

任天堂
任天堂 http://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のサイト

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

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

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

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

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

シンプルなfaviconのサイト

Rhizomatiks
Rhizomatiks http://rhizomatiks.com/

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

おまけ

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

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

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

Firebug
Firebug http://getfirebug.com/

 

【favicon作成をお助け】

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

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

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

TwitterやFacebookユーザーにオススメ!アイコン作成サイトまとめ16選
Web制作のご相談・料金のお見積りはこちらから

  • 1
  • 2