Translate:

Blog13. ファビコンを作ろう

ファビコン favicon とさくら Tosakura 高知 マンガ ブログ

ファビコンって何

ファビコン (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の画像をすでに準備していますから、すぐに登録に取りかかれます。
さぁファビコンを登録しましょう。

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

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

②ワードプレスにSimplicityを使っている場合
「外観」→「カスタマイズ」→「その他」→「ファビコンを有効」「アップルタッチアイコンを有効」にチェックを入れて、それぞれに画像選択をします。
作業はこれだけです。

WordPressの子テーマにSimplicity(Simplicity2)を入れている場合は、ファビコンとアップルタッチアイコン(iOSのホーム画面のアイコンのこと)が別々に設定できます。
PNGで背景が透過の場合、背景部分が黒色になりますから、それが嫌な場合は背景を透過にしない画像でアップルタッチアイコンを設定をしましょう。

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

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

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

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

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

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

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

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

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

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

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

なぜこのサイズかと言うと、
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のような線データの加工作業もできるので、今回のファビコンデザインづくりでもとても便利でした。

CLIP STUDIO PAINT PRO

新品価格
¥5,997から
(2018/6/2 15:20時点)

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

サイトのアイコンは、フォントをベースにデザイン化しました。
横から鳥が羽を広げているような感じにしています。
もう少しデフォルメしたかったのですが、デフォルメの仕方が分からないので、いじると余計にすっきり感がなくなってしまう。
最初のひらめきのままに戻しました。

使った文字は「く・ら・し」です。
とさくらの意味は土佐の暮らしでしたから、「く・ら・し」を加工してみました。
青色を使ったのは、太平洋のイメージです。

ファビコン作りは手間がかかりましたが、結構楽しめました。
なくても困らないけれど、あってよかったファビコン。

国内最大級の個人向けレンタルサーバー『ロリポップ!レンタルサーバー』は、
月額100円(税抜)~で容量最大400GB!しかも安いだけじゃなく 大人気WordPressの簡単インストール/ウェブメーラーなど 機能も満載!共有/独自SSLもバッチリ対応でセキュリティ対策も万全!
もちろん、オンラインマニュアルやライブチャットなど、
充実したサポートで初心者の方でも安心です。
無料のお試し期間が10日間ありますので、
まずはお気軽にご利用してみてくださいね!

▼ロリポップ!レンタルサーバーはこちら