ファビコンを作ろう

ファビコンって何

ファビコン (favicon)とは、サイトのシンボルマークのことです。
favorite icon（お気に入りアイコン）の意味からファビコン (favicon)と呼ばれています。

ブラウザのタブの部分に、小さなマークが出てくることがありますよね。
その小さな画像がファビコン (favicon)です。

有名なサイトのファビコン (favicon)を思い出しませんか？
有名サイトのタブのところを見てください。
見慣れたファビコン (favicon)が表示されているでしょう。
家紋みたいなイメージですね。

ファビコン (favicon)はそのサイトのイメージを定着させることに役立っています。
今回はこのファビコン (favicon)を作ってみましょう。
設置はとても簡単です。

ファビコンの画像づくり

ファビコン (favicon)用の画像をどうやって準備するか

①フリー素材の写真から画像を準備する
自分で作れないなぁと思う人はフリー素材を使うと良いでしょう。
小さくなっても見えやすい画像が良いでしょう。

②自分で画像を作ってみよう
画像ソフトでまずファビコン用の画像を作ります。
PCに元から入っているペイントソフトでも作成できます。
スマホのペイントアプリでも構いません。

マンガのコマを描いているペイントソフト（クリップスタジオ）がPCに入っているので、今回はそのクリップスタジオ（CLIP STUDIO）というソフトでファビコン用画像を作成してみました。
無料のお絵かきソフト（ペイントソフト）もあります。
詳しくは、予算10万円でデジタル絵の道具を揃えよう～ペイントソフトで紹介しています。

まず、画像ファイルの大きさです。
ファビコン用は16×16（ピクセル）と32×32（ピクセル）の大きさがあれば大丈夫です。
しかし画質は後から落とす事もできるので、とりあえず大きめで作成します。
600×600pxで作成しましょう。

なぜこのサイズで作るかというと、ワードプレスでファビコンやアイコンを設定する場合512px以上の画像ファイルが要るからです。
インスタグラムやツイッターのプロフィール画像でも400pxが必要ですから、600pxで作っておけば他にも使い回すことができます。
必要に応じてサイズダウンできるので、元の画像は大きめで作っておきましょう。

画像を小さく作って大きく引き伸ばすと、元のドットが少ないため画像が荒くなります。
画像は大きく作っておいて、必要に応じて縮小するほうが綺麗な画像ができます。
大は小を兼ねるけれど、小は大を兼ねません。

PNG形式で画像を作っておけば、拡大縮小を繰り返しても画像は荒くならないし、背景を透過にもできます。
ぜひPNG形式で画像を保存しましょう。

ファビコンの画像作ろう

正方形のファイルを作って、さぁファビコンの画像作りを始めましょう。

ファビコンやアイコンは小さいので、複雑な画像よりも視覚的に分かりやすい単純な画像を考えましょう。

ぱっと見て分かりやすいデザインをお勧めします。

とりあえずファビコンの画像例集をネットで検索します。

同じようなファビコンを作らないためと、ファビコン作りの参考のためです。

ロゴの例集も参考にしてみましょう。

デザインが浮かばなくて、なかなかファビコン作りに取りかかれませんでした。

絵を描いてみても、イマイチわかりにくいデザインになってしまいます。

シャープな線のほうが見栄えがしそうです。

描画用ソフトでも、パス線を使ったデザインや図形を作ったほうが綺麗な線が引けます。

図形の組み合わせで作る方法が一番上手くできる感じでした。

例集にも図形を使ったファビコンも多いです。

もう一つ考えた方法がフォントを使って作る方法でした。

文字のフォントを元にしてデザインを考えました。

フォントはもともとデザイン性を持っているので、ファビコン作りには効果的です。

文字の後ろを透明にして、文字をデザインした模様に色を付けるか。

後ろを色付きにして、模様を白抜きにするか。

どのようなデザイでも構いませんが、
小さな表示でも分かるので、簡単なデザインのほうが良いと思います。

画像の形は、角丸もしくは丸の形で。

正方形のままでも大丈夫です。

iPhoneやiPadのアイコンの場合は、自動的に角丸アイコンになります。

なお、丸の形で作ると、背景を透明にしていると背景部分は黒色になります。

例えば、元から入っている時計アプリの背景は黒色です。

丸の形で画像を作った場合、背景を黒にしたくない時は四角で背景を作り好きな色をつけておきましょう。

例えば、設定の背景は灰色になっています。

ファビコンの形はデザイン性から円にしてみました。

アイコンみたいなデザイン画像が出来上がりました。

そこから再度アレンジして、ファビコンが決まりました。

また、ファビコン (favicon)用の背景は透過にしました。

丸いファビコンなので、このままだとiPhoneやiPadでアイコンを設定すると背景は黒になります。

iPhoneのアイコン用として、正方形の画像にするために背景を白にした画像も別に作りました。

画像の保存形式にはPNGをお勧めします。

さぁファビコン (favicon)用の画像が出来上がりました。

自分のサイトにファビコン (favicon)を設定してみましょう。

 

ワードプレスでファビコンを登録するのは超簡単

ワードプレスではファビコンは一発登録

オリジナルのブログサイトを作る場合、ワードプレスをお勧めしています。
なぜかというと、無料ブログサイトのように広告が勝手に入らない。
デザイン形式も自分で選択できる。
作ったコンテンツがすべて自分の所有になる。

これだけでも十分メリットがありますが、もっとオススメしたいポイントがあります。
それは、ワードプレスはさまざまな設定が楽なのです。
プログラムが書けなくても、好きなプラグインを入れればどんどん機能を追加できます。

そして、ワードプレスではこのファビコンも一発で登録できるのです。
後に通常のファビコン作りの方法も書きますが、ファビコン用の形式にしたりアップロードしたりという面倒な作業をしなければなりません。
ワードプレスではその面倒な作業がありません。

512×512px以上の正方形で画像を用意しましょう。
事前の準備はこれだけです。
600×600pxの画像をすでに準備していますから、すぐに登録に取りかかれます。
さぁファビコンを登録しましょう。

ワードプレスでファビコンを登録する方法

①ワードプレスにファビコン登録をする場合
ワードプレスにログインをして、
「外観」→「カスタマイズ」→「サイト基本情報」→画像選択
作業はこれだけです。

②Cocoon(コクーン）でのファビコン設置方法は、
「外観＞カスタマイズ」から「サイト基本情報＞サイトアイコンを選択」を選び、ファビコン画像を選択して「公開」をクリックします。

作業はこれだけです。

ファビコンは背景が透過の画像を設定して、丸いファビコン。
iOSのアイコン用（アップルタッチアイコン）では、背景を白に塗った四角い画像を設定しました。角丸アイコンが出来上がりました。
同じデザイン画像を使っていますが、それぞれ丸と角丸の画像で表示されました。

出来上がりについては、このサイトのURL部分ののファビコンを見てください。
iOSのアイコンの出来上がりについては、サイトをホーム画面に貼ってみてください。
背景が透過の丸いファビコンと、背景が白の角丸アイコンの違いが確認できるでしょう。

ワードプレスで「外観」→「カスタマイズ」に入れないことがある

なお、WP-Copyright-Protectionというコピー防止のプラグインを入れている場合、「外観」→「カスタマイズ」に進めない状態になりました。
そのため、作業中はWP-Copyright-Protectionを停止してください。

最初の頃、いきなり「カスタマイズ」に入れなくなって困りました。
プラグインが邪魔をしていたのです。
WP-Copyright-Protectionを停止すれば「外観」→「カスタマイズ」に入ることができます。
プラグインの一覧の中でWP-Copyright-Protectionを探して、停止ボタンを押すだけです。
作業が終われば、また有効のボタンを押します。

ワードプレスの変更がエラーになり効かない場合

ワードプレスの変更を行って保存ボダンを押しても、エラー表示が出る場合は、

サーバー側のWAF(Web Application Firewall)の無効化を行ってみましょう。

WAFの無効化を行ってもすぐには反映されないので、10分ほど待てばワードプレスの変更の変更が効きます。

変更が終わった後は再度、サーバー側のWAF(Web Application Firewall)を有効化しておきましょう。

アップロードしてファビコンを登録する場合（ワードプレス以外）

ファビコンに使える画像形式に変換する

通常でファビコンを設定する場合は少し手間がかかります。
画像ファイルの拡張子を「.ico」にする必要があります。

Photoshopでは「.ico」に変換する機能がありますが、通常のペイント系ソフトにはこの機能がありません。
無料のファビコン作成できるツールがあり、そのサイトを「.ico」の拡張子に変換できます。
ファビコン用の画像を作ってみましょう。

その前に、まず作りたいサイズの画像を準備します。
自分で作った画像でも、フリー素材のサイトからの画像でも、気に入った画像のサイズを変換します。

先ほど作った600pxの画像をリサイズします。
PCに入っているペイントを開いて画像を変換してみましょう。
「サイズ変更」のところで変換できます。
せっかくですから5つほどサイズを作りましょう。
16×16、32×32、48×48、64×64、152×152（px）の５つです。

なぜこのサイズかと言うと、
16×16はWindowsのIEやChromeのサイズ。
32×32はその他のブラウザのサイズ。
48×48はwindowsのデスクトップのサイズ。
それ以外は、スマホ用のホーム画面アイコンのサイズはいろいろです。
とりあえず64×64、152×152（px）も作っておく。
作るなら一気にこの5サイズを作ってしまいましょう。
実際のファビコン（favicon）に使うのは、16×16、32×32で十分なので、16×16、32×32（px）の2サイズだけでも構いません。

画像ソフトで作った元画像をリサイズします。
16×16、32×32、48×48、64×64、152×152（px）の画像を作成しました。

無料サイトで「.ico」の形式ファイルを作る

では、「.ico」の形式ファイルの作成開始です。
まず下記のサイトにアクセスします。
https://ao-system.net/alphaicon/index.php

作ったそれぞれサイズの画像ファイルを選んでクリック。
そして「アイコン作成」をクリック。
一覧表が出てくるので、「アイコンダウンロード」をクリック。
完了です。
「.ico」の形式ファイルが出来上がりました。

また、リサイズした画像をそれぞれ用意しなくても、1つの画像を色々なサイズに一発変換してくれる方法もこのサイトにはあります。
自分で画像をリサイズするのが面倒だと思う人は、この一括生成ボタンをクリックしてください。
たくさんできてしまうので、必要なサイズを使用しましょう。

あとは自分のサイトに画像をアップロードします。

ファビコンができると、オリジナル感が増す

作ってよかったファビコン（アイコン）

「.ico」の形式ファイルの画像を作ってみましたが、結局ワードプレスでは元の600×600pxの画像を登録するだけでした。
ファビコン用画像を作る手間だけで、オリジナルファビコンが出来ました。

サイトのコンテンツを増やすことを優先して、ファビコン作りになかなか手が出せませんでした。
しかしついにファビコン完成。
デザイン性は別にして、なんだか自分サイトのシンボルができたと実感します。

はじめてのデザインはちょっと楽しくて、ちょっと苦しい作業でした。
デザイン系の作業は、アイデアやセンスが必要な分野だと思いました。
下手くそでも、自分が作ったファビコン。
これこそがfavorite icon（お気に入りアイコン）の醍醐味なのかもしれません。

専用ソフトがあるとデザインが楽

クリップスタジオ（CLIP STUDIO）を入れていたので、画像処理が楽でしたし、楽しかったです。
ラスターレイヤーとベクターレイヤーの2種類の作画レイヤーがあります。
レイヤーは層という意味で、パーツや作業ごとに分けて作画していきます。
ラスターレイヤーはペイント系で塗りつぶしができます。イメージとしてはPhotoshop 。
ベクターレイヤーは線データで、イメージとしてはIllustrator。
Photoshopは月額制になってしまいましたが、クリップスタジオ（CLIP STUDIO）は買い切りのソフトです。
手頃なお値段でIllustratorのような線データの加工作業もできるので、今回のファビコンデザインづくりでもとても便利でした。

自分のファビコンの意味は

以前のサイトのアイコンは、フォントをベースにデザイン化しました。

しかしサイトの再構築を行ったので今は絵のアイコンに作り替えました。

青色を使ったのは、太平洋のイメージです。

ファビコン作りは手間がかかりましたが、結構楽しめました。

なくても困らないけれど、あってよかったファビコン。