creatersnest82

Faviconを作成するのに役立つ記事&ツールまとめ


Favicon(ファビコン)という言葉を聞いたことはありますか?
Webサイトを作成するにあたり、細部までこだわりたい!という方にもおすすめなのですが、
そもそもFaviconって何? どうやって作るの?
…と分からないことだらけだったりするのですが、そんな方のためにFaviconを作成する流れに沿ってまとめてみました。

Favicon(ファビコン)とは?

p3

”Favorite icon”の略で、ブラウザ上でそのウェブサイトのシンボルマークとして使用されているアイコンです。
タブやアドレスバー、お気に入り一覧の左部分に小さく表示されています。
もともとはInternetExplorerの機能のひとつでしたが、現在はほとんどのブラウザで利用できるようになっています。

Faviconを設置するメリット

Faviconを設置するのは、ただオシャレだから…ということではありません。
ちゃんと理由があります。
それはどういったものなのでしょうか?

信頼感が上がる
Faviconを設置しているサイトは大企業に多く、閲覧者からも「サイトに手抜きをしていない」というように見られます。
それだけでも、大きなメリットだと言えます。

お気に入りやブックマークから見つけやすく、アクセスも増える
サイトをたくさん閲覧される方は、それだけ多くのサイトをお気に入り登録していると思います。
その中でもFaviconが設置してあると閲覧者から目に留めてもらいやすくなります。

サイズについて

では実際にFaviconを作ってみましょう。
まず重要なのは、Faviconのサイズです。

Faviconの表示サイズは、基本的に16px × 16pxです。
保存サイズも16px四方で大丈夫ですが、近年はMacのRetinaディスプレイのようなppiが異なる環境にも対応できるよう、32px四方や64px四方で作成される方も増えてきています。
また、最近ではスマートフォンやタブレットのショートカットアイコンのために、152px四方のサイズも用意されると良いです。

保存形式について

Faviconを表示させるには、icoという保存形式を使用します。
gifやpngでも表示できないことはありませんが、InternetExplorerではサポートされていないようで、表示されない場合がありますのでご注意ください。
icoファイルで保存できない!という方でも大丈夫。
まずおなじみのjpg、gif、pngのいずれかで保存していただき、その後変換ツールでicoファイルに変換します。
その時の保存名は、favicon.icoとします。

オススメの変換ツールにつきましては、後ほどご案内させていただきます。

Favicon作成時の注意点

Faviconを作成するにあたり、注意していただきたいのは次の2点です。

1、必ず正方形で作成
2、表示サイズ16pxという小さな画像ですので、デザインはシンプルなものに

特に2に関しては、複雑すぎると印象も下がってしまいます。

マルチアイコンを作ろう

まず、マルチアイコンとは16px四方の保存サイズとは別に、32px四方、64px四方…と複数のアイコンを作成することです。
上記でも説明したとおり、16px四方での作成も可能ですが、ppiが異なるパソコンやスマートフォンなどでは荒く表示されている場合があるため、大きめでの作成をオススメします。

透過させよう

基本的にFaviconは正方形に作りますが、画像をpngファイルで作成してからicoファイルに変換することで、背景を透過させたFaviconを作成することができます。
オシャレなFaviconを作られたい方にオススメです。

アニメーションGIFのFaviconを作ろう

FaviconはアニメーションGIFも使えます。
Faviconを目立たせたい!という方にオススメです。
その場合、通常のicoファイルと、アニメーション用のgifファイルを準備します。
ただし、表示されるブラウザは限られますのでご注意ください。

アニメーションの作れるオススメツールもありますので、後ほどご案内させていただきます。

Faviconのアップロード

作成したicoファイルは、FTPにてサーバーへアップロードします。
アップロードする階層は通常、public.html内のindex.htmlが設置してある最上位のディレクトリーになります。
なお、ページごとに違うFaviconを設置したい場合は、ページごとのフォルダー内に設置してください。
同じ位置に設置してある場合は、icoファイル名をそれぞれ違う保存名でアップします。

タグの設定

htmlページの<head>タグ内に下記のタグを表示させます。

<link rel=”shortcut icon(またはicon)” href=”favicon.ico”>

icoファイルの名前が複数あるときは、「favicon.ico」とそれぞれの名前に変更してください。

なお、アニメーションの場合は<link rel=”icon” href=”アニメ GIF ファイルの URL” type=”image/gif” />と配置させてください。

おまけ ~オススメの作成・変換ツール~

ブラウザ上では、簡単にFaviconを作成できるツールが数多くあります。
その中でオススメのツールを紹介させていただきます。

 

favicon.icoを作ろう!

p4

http://ao-system.net/favicon/

画像を指定するだけで、簡単にicoファイルに変換してくれる便利なツールです。
3種類のマルチアイコンも作れます。
指定できる画像タイプは、png・gif・jpgです。

 

icoファイルフォーアット・プラグイン

p5

http://www.telegraphics.com.au/sw/icoformat.ja.html

Photoshopから直接icoファイルを作成することができるプラグインです。
Windows・Macのそれぞれに対応しています。
全バージョンに対応できるように記してありますが、念のため確認していただくことをおすすめします。

 

iconifier.net

p6

http://iconifier.net/

海外サイトになります。
1枚の画像からマルチアイコンを生成できます。
スマートフォンやタブレットにも使用できる大きなサイズにも変換してくれるので、とても便利です。

 

Favicon Generator

p7

http://antifavicon.com/

海外サイトになります。
文字や背景色、ボーダーなどを入力してFaviconを生成するサイトです。
文字が入ったFaviconを作りたい方におすすめです。

 

Favicon Icon Drawing Program Online Free

p8

http://www.somacon.com/p44.php

海外サイトになります。
1つ1つビットを塗りつぶして、Faviconを作っていくサイトです。
シンプルなデザインの場合にオススメです。

 

まとめ

今回は、Faviconを作成するのに役立つ記事&ツールをまとめてみましたが、いかがでしたでしょうか?
WebサイトにぜひFaviconを取り入れたいと思っていらっしゃる方、ぜひ参考にしていただけたらと思います。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【初心者向け】Illustratorでの作業を効率化できるショートカットまとめ