ファビコンの作り方~ブックマークやタブで個性を出そう~

   2017/04/14   icon-clock-o読了時間:約14分7秒

どこかのサイトを閲覧しているときや、
お気に入りに登録したサイトを一覧から探しているとき、
こんな感じの気になる小さなアイコンが無いでしょうか。
   ↓ 
タブのファビコン
お気に入りのファビコン
これは横に並んだ複数タブや、お気に入り一覧の中でも自分のサイトを見分けてもらいやすいように
サイト運営側がサイト独自のカラーやマークを表示させているもので、通称『 ファビコン 』と呼ばれています。

 目次 

ファビコンとは
ファビコンの作り方
  ∟ファビコンのサイズ
  ∟元になる画像の作り方
    ∟塗りつぶしで背景色をつける
    ∟文字をアイコンにする
画像を『 .ico 』ファイルに変換する
  ∟補足;圧縮ファイルと解凍
ファビコンを設定する
反映を確認する
ファビコンが表示されない時は

ファビコンとは

favorite icon(フェイバリット・アイコン)を略した俗称がファビコン(favicon)です。
お気に入り(favorite)サイトを表現したシンボルマーク(アイコン)、という意味ですね。

これは通常は空白の状態なのですが、サイト運営者がファビコン用の画像を準備して、
「 この画像をファビコンとして読み込んで表示させてね! 」 とブラウザにお願いしたら
タブの中や、ブックマークメニューの中で表示してくれるようになるものです。

例えば弊社サイトのファビコン
ファビコン01
ついでにこのブログのアイコン
ファビコン02

ちょっぴり違うのがお分かりいただけますか?
これは私がサイトとブログで違うファビコン画像を作って設定しているためです。
パソコンのPCと、エヌシステムのN、修理を表すスパナを組み合わせているのですが
小さくなるとやっぱり良く分からないですよね (*´・ω・;ゞ
作り直すべきかな~と思いつつ、いいデザインも思いつかないのでこのままになっています。

このように、表示される際にはかなり小さくなるので
最初から出来るだけシンプルで見やすい画像を準備していただくと良いと思います。

ファビコンの作り方

ファビコンの作り方はとても簡単で、基本的には正方形の画像を描くだけです。

ファビコンのサイズ

タブやお気に入りに使われるサイズが16×16です。
タブのファビコン
お気に入りのファビコン
主に使われるのがこれですね。
更にデスクトップのショートカットアイコンに使われるのが32×32サイズです。

あとはInternet Explorer 9 のピン留め機能に使われる24×24サイズもあるのですが・・・
どうせならやっておこう、という方は24×24サイズもご用意いただく必要があります。
でもそれも物凄く限られた用途なので今回はちょっとまるっと無視をして
16×16と32×32の2種類のアイコンを用意する方法をご説明します。

元になる画像の作り方

アイコンの元にする画像は何でもかまいません。
自分やペットの写真を正方形に切り抜いて使っている方もいますね。
画像編集ソフト・素材サイト と
商用利用OKな無料素材の記事も合わせてご覧ください。

イチから画像を用意する場合に一番簡単なのはやっぱり
Windowsに最初から入っているペイントソフトを使う方法でしょうか。
画面左下のWindowsメニューのボタンを押していただくと、各種ソフトなどが表示されます。
Windowsボタン
【 すべてのプログラム 】⇒【 アクセサリ 】⇒【 ペイント 】の順でペイントソフトを起動してください。
ペイント起動
ペイントが開くと新規作成用の状態になっていますが、アイコンよりも大きいサイズになっています。
左上のファイルメニューをクリックして【 プロパティ 】を選んでください。
ペイント01
ペイント02
プロパティの幅と高さを、作りたいサイズに合わせて入力してください。
この場合は16×16にしていますが、大きさでアイコンを分ける予定が無いのであれば32×32にしておいてください。
ペイント03

このままでは小さすぎて絵も描きづらいので、表示拡大しましょう。
ペイント画面の右下にあるバーで拡大・縮小ができます。
ペイント表示拡大
簡単な図形やアルファベットのほうがファビコンになったときに見やすくなります。
例えばこの場合、
ペイント使い方
描き方は
・図形でハートを選ぶ
・塗りつぶしで【 単色 】を選ぶ
・線の幅を一番細いものにする
・色1:線の色をピンクに
・色2:内側・塗りつぶしの色を赤に
設定した上で、マウス操作で適当にハートを描きます。
更に
・図形で直線を選ぶ
・色1、色2をともに赤にして
マウス操作で右と下に直線を引きました。
キーボードの【 Shift 】を押したままマウスを動かすとまっすぐな線を引くことができます。

間違えたら【 元に戻す 】で戻せば大丈夫です。
サイト名の頭文字を入れてみたり、目立つ色にしてみたり、お好みで自分だけのアイコンを作ってみてください。

塗りつぶしで背景色をつける

まるまる塗りつぶした後に文字や絵を入れることもできます。
ペイント塗りつぶし

文字をアイコンにする

テキスト選択した後、文字を入れるテキストボックスの大きさを決めます。
文字入れ01

ボックス内に入力したテキストを選択した状態で
文字サイズ、文字フォント、カラーなどを変更することができます。
文字入れ02

画像を『 .ico 』ファイルに変換する

複数サイズの画像をひとまとめのファイルとして扱い、アイコンとして使うためには
拡張子を『 .ico 』という専用のものに変換しなければなりません。
画像を『 .ico 』ファイルにしてくれるサイトさんも色々あるのですが、
私はこちらのサイト FavIcon from Pics を使わせていただいています。
(2017年4月14日追記)
 現在サイトがエラーで表示されないようです。
 しばらくすると修正されるかもしれないので、
 現状のままリンクを掲載させていただきます。
 お急ぎの方は別の変換サイトをご利用ください。
  icon-bookmark ういすぷ様が運営する アイコン コンバータ など。

まず【 参照 】をクリックして、ご自分のPCフォルダの中から使いたい画像を選択してください。
次に【 Generate Favicon.ico 】をクリックします。
ファビコン作り方01

変換が完了したら、プレビュー画像の下にある【 Download FavIcon Package 】をクリック。
圧縮ファイルを保存するか、お使いの解凍ソフトで直接開いてください。
ファビコン作り方02
※どこに画像が保存されたか分かるように気をつけておいてください。
※ファイル名は自分が分かりやすいように『 favicon01.ico 』のように変更していただいて構いません。

補足;圧縮ファイルと解凍

何らかのファイルをダウンロードした際に、そのままの形ではなく
圧縮されたアーカイブ(書庫)の状態でダウンロードされることがあります。
これは、そのままの形だとデータ容量が大きく、ダウンロードや保存に時間や負荷が掛かるため
保存の形式を変更して出来るだけデータ容量を少なくしている状態です。
小さな箱にギュッとデータを詰めて冷凍保存しているようなものなので
解凍して箱から出してあげないと何もできません。
そこで必要になるのが、圧縮ファイルを解凍するための電子レンジ代わりのソフトです。
圧縮ファイルの解凍
フリーソフトで使いやすいソフトが色々出ているのでお好みで選んでいただくと良いと思います。
また、ファイル形式の対応可能範囲がソフトによって異なったり、
相性によって同じファイル形式でも開けるソフト、開けないソフトがあったりするので
いざという時のために2つくらい解凍ソフトをインストールしている方も多いですね。

まだ解凍ソフトをインストールしていない方は
・お使いのOS(WindowsやMac)のバージョンに対応しているか
・途中の使用許諾同意説明などに余計なフリーソフトや広告が入ることを許可する項目が無いか
 (そういった項目があったら許可しないようにご注意ください)
・使用説明を事前によく確認する
などにご注意いただいてインストールしてください。

以下にご紹介するものは、私がWindows XPを使っていた頃からずっと使っているものなので
今ではちょっと古いソフトかもしれません。
新しく使いやすいソフトが出来ているかもしれませんので、評判などを検索してみてくださいね。
Lhaplus
+Lhaca
解凍レンジ
WinRAR(40日間無料)

ファビコンを設定する

パソコンの中にある『 .ico 』ファイルを、FTPソフトを使ってサーバー側にアップロードします。
 ⇒FTPソフトについて詳しくは Webサイトを作ろう! 【 2 】必要なソフトを準備する をご覧ください。
この時にファイルのURLも確認しておいてください。
URLは置いてあるフォルダにもよりますがhttp:/自分のドメイン/image/favicon.icoのようになっているはずです。

それではいよいよファビコンの設置です。
htmlファイル内に「 ファビコン置いてあるから、このURLにある画像を見に行ってね! 」という指示を記述します。
といってもサイトのhtmlファイル内、<head>と</head>の間にファビコン指定のタグを書くだけです。

URLで指定する場合は http:/自分のドメイン/image/favicon.ico 、
ディレクトリ指定なら image/favicon.ico のようになります。
これはフォルダ名やアイコンファイル名によって異なります。
ディレクトリ指定する場合は、記述先のhtmlファイルとの階層関係を間違えないようにご注意ください。

また、最後の type=”image~ の部分は、間違いなくファビコンをブラウザに
表示してもらえるように唱えるおまじないのようなものです。
あまり深く考えず、念のためにと思って書いておいてください。

これをファビコンを表示させたいページ全てに記述します。
トップページだけファビコン出せたらいいや、という場合にはトップページのhtmlファイルにだけ記述を、
逆に全てのページに適用させたいなら全てのページに記述を追加しなければなりません。

反映を確認する

設置が終わったら、実際のサイトで表示されているかを確認してみましょう。
この時、ブラウザによっては表示の感じが異なっていたり、表示されなかったりするかもしれません。
これはブラウザの種類やバージョンによってファビコンへの対応・非対応に差があるためです。
基本的に現在使われている著名なブラウザであればファビコンは標準対応してくれているはずなので、
Internet Explorer、Firefox、Google Chrome、Safariの4つで
普通に表示されているなら特に問題はないと思います。

例として上で作ったアイコンを使ったページを用意してみましたのでテストページからご覧ください。
ちなみにテストページの本文中に置いてある弊社アイコンのように
アニメーションで動くファビコンを設置することもできるのですが、
タブの中でうごうご動かれると鬱陶しい、閲覧の邪魔だと感じる方もいらっしゃるので
アニメーションアイコンにする際には注意が必要です。

ご説明が長くなってしまいましたが、実際の作業としてはそんなに難しくないので
ご自分のブログやサイトをお持ちの方は是非オリジナルファビコンを設定してみてください(*^▽^)

ファビコンが表示されない時は

特にブラウザがFirefoxの場合に、ファビコンの名称もタグ指定も間違っていないのに
反映されずにファビコンが表示されないことがあります。

その場合は、まずファビコン(favicon.ico)のディレクトリが
index.htmlと同じになっていないか確認してください。
もし同じディレクトリにファビコンを置いていた場合は、下の階層のどこかに移動させ、
タグのディレクトリも合わせて書き直してから反映を確認してみてください。

【 表示されない場合の例 】ディレクトリが同じ階層
index.html
favicon.ico

この時のタグ表記はこちら。

【 修正後 】favicon.icoを下の階層に移動する
index.html
imageフォルダ
 ∟favicon.ico

タグ表記はこうなります。





(2015/06/10修正)
某サイトさんの記事と記事タイトルが全く同じだと気づいたため、
何かご迷惑をお掛けしてはいけないと思い、記事タイトルを変更しました。
旧『 お気に入りアイコン(ファビコン)の作り方 』
⇒ 新『 ファビコンの作り方~ブックマークやタブで個性を出そう~ 』

 良かったら押してみてください♥

  • このエントリーをはてなブックマークに追加
  • Pocket