【初心者向け】ファビコンを簡単に作成。アップルタッチアイコンも設定~Simplicityをカスタマイズ~04

ちょこちょこと、サイトをカスタマイズしております。

今回は、ファビコンとアップルタッチアイコンを作成、設定してみました。

その方法を簡単にまとめます。

ファビコン設定のメリット

ファビコンとは、ブラウザのタブや、お気に入りの設定のときに表示されるアイコンのこと。

ファビコンが設定してあると、「お、しっかりしたサイトだな」と思います。

FC2ブログやアメブロなどの無料ブログの場合、ファビコンが予め設定してありますが、

Simplicityテーマを使ったり、他のWordPressテーマを使って一からブログを立ち上げたときは、ファビコンがありません。

ただの、白いファイル画像になってしまいます。

個人的に、このファビコン、大変活用しております。

というのも、普段ブラウザはChromeを使っているのですが、お気に入りのサイトをブラウザのブックマークバーに並べています。

よく使うサイトは、いつでもワンクリックでアクセスできるからです。

しかし、このブックマークバーに表示できるサイト数は限られています。

ブラウザの幅をはみ出した分は、一度矢印ボタンを押してリストを表示させないと出てこないんです。

このワンクリックが面倒くさい。

そのため、お気に入り登録する際は、ブークマークの名前を消してファビコンだけ表示させるようにしています。

画像は左から順にGmai, YouTube, GoogleMap, Yahooのファビコンです。

よく使うサイトを、こんな風にファビコンだけ、何十個も並べているんです。

ちょっとでも作業を効率化するために^^

なので、お気に入りのブログや頻繁にアクセスするサイトにファビコンが設定していないと、とっても探しづらいのです。

当サイトも、ファビコンを設定していなかったので、分かりづらかったんですね。

ファビコンの有る無しで、サイトの信用度も変わります。

ファビコンのデザインがサイトのイメージを左右することだってあると思います。

Simplicityテーマは、ファビコンを作ってしまえば、その設定はものすごく簡単でした！

まだ設定していない方は、ファビコンを作ってみることをオススメします。

ファビコン作成１：デザインを決める

まずは、ファビコンのデザインを作ります。

私は画像加工やイラスト作成はものすごーく苦手なので、フリー素材を利用させてもらいました。

現在のファビコンはこちら。

虫眼鏡のイメージでファビコンを作ろうと思ったので、「虫眼鏡　イラスト　フリー」で検索。

こちらのサイトから画像をダウンロードしました。

GATAG｜フリーイラスト素材集

ダウンロードした画像サイズは1024×1024ピクセル。

ファビコンは縦横のサイズが同じ必要があるので、元画像が正方形のものを選ぶのがオススメです。

ファビコン作成２：画像の加工と修正

ダウンロードした画像を、少し加工していきます。

普段から画像加工に使っているのは「Pixlr」という無料画像加工ツール。Pixlr Editor

ちなみにファビコンはこんな感じ。

ブックマークバーの一軍選手です。

インターネット上で動作し、Photoshopのような加工機能も豊富にあるので、重宝してます。

画像加工はどんなツールを使っても良いと思います。

ただし、ファビコンの背景を透過型にしたい場合は、pngファイルが作れるものを選びましょう。

正方形のファビコンなら透過型の必要はないですが、大手のサイトはほぼ100%、透過型のファビコンを作っています。

また、画像サイズが異なる複数の画像を作ることになるので、画像のサイズ設定（縦と横のピクセル数の変更）が簡単にできるツールが良いでしょう。

先ほどダウンロードしたイラストはjpgファイル。

背景が白いので、pixlrで背景を透明にし、pngファイルに変換。

さらに、黒い虫眼鏡を水色とピンク色に塗り直しました。

これで、ファビコンのイラストは完成。

ちなみに、フリー素材であっても、ライセンスはサイトや素材によって違います。

商用利用可能か、加工して利用しても大丈夫か、などは確認しましょう。

ファビコン作成３：画像サイズを縮小

デザインが完成したら、サイズを縮小します。

ファビコンには、複数サイズを準備する必要があります。

これは、

・LIGさんの綺麗なfavicon（ファビコン）作成の基本的なコツ・アイデアまとめ

・ホームページ制作スタイルさんの複数サイズも一つのファイルで！マルチアイコンの「favicon（ファビコン）」作成方法

を参考にさせていただきました。

今回は、1024×1024ピクセルのファイルから、

・16×16ピクセル

・32×32ピクセル

・64×64ピクセル

・128×128ピクセル

の４種類のサイズに縮小した画像を作りました。

このとき、縮小した画像のファイルを保存するときは、サイズがいくつなのかわかるようにファイル名を決めると便利でしょう。イラスト自体は、一緒ですからね。

ファビコン作成４：ファビコン用の.icoファイルに変換

作成した４種類のサイズの画像をひとつにまとめます。

ファビコンのファイルは、「.ico」の拡張子を持つファイルです。

.icoファイルの作成には、以下のサイトを利用しました。

半透過マルチアイコンfavicon.icoを作ろう!

画像ファイルを選択の欄をクリックし、４種類のサイズの画像をそれぞれアップロード。

アイコン作成ボタンを押します。

これで、アイコンがどう表示されるのかわかります。

背景色のラジオボタンを切り替えると、背景がグレーだったり、黒色の時の見栄えも確認できます。

出来栄えに満足したら、アイコンダウンロードボタンで、変換済のicoファイルをダウンロードできます！

とっても簡単♪こんな便利なツールを無料で提供してくださっているのが嬉しいですね。

ちなみに、透過型のファビコンでなくても良いなら、もっと簡単なツールもあります。

X-Icon-Editorという海外の無料ツールです。

ファイルをインポートし、ブラウザ上で微修正するだけで、一気にicoファイルが出来上がります。

いちいちファイルサイズの異なる画像を用意する必要がないので便利です。

操作方法も直感的に分かりますし、プレビュー機能があって、ファビコンの見栄えも簡単に確認できました。

背景が白いファビコン、もしくは正方形のファビコンを作るなら、断然オススメのツールです！

ファビコン作成５：アップルタッチアイコンの作成

ファビコン以外に、もう一つ設定しておきたいのが、ウェブクリップアイコン(webクリップアイコン)。

スマホでサイトをお気に入り登録したときに、ホーム画面で表示されるアイコンです。

iPhoneやiPadなど、アップル製品のデバイスに関しては、アップルタッチアイコン（apple-touch-icon）と言うようです。

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

当サイトもアクセスの８割はスマホから。

ありがたいことに、ブックマークしてくれる人数も増えているため、ウェブクリップアイコンも設定しました。

iPhoneで見た時の、設定前はこちら。

設定後は、こんな感じに。

画像ファイルのサイズは144×144ピクセルで作成しました。

ファビコンのときと同じで、1024×1024ピクセルの画像をpixlrで縮小しています。

ちなみに、アップルタッチアイコンですが、透過している部分は黒くなってしまいます。

それを知らずに透過型のまま設定したら、こんな黒い背景になってしまいました。

なので、pngファイルを一度jpgファイルに変換。

透過部分が白くなるので、それを再びpngファイルとして保存しました。

【2016/02/11追記】
みけCATさんに、コメント欄からこの方法は良くないとご指摘いただきました！

GIMPなどの画像編集ツールで白い背景と合成し、アルファチャンネルを消すと良いそうです！

ファビコン作成６：Simplicityのファビコンとして設定。

icoファイルも、ウェブクリップアイコン用のpngファイルも、Simplicityの場合、簡単に設定できます。

メディアにアップロードし、外観　→　カスタマイズ　→　その他の設定　と進むだけ。

具体的な手順は、公式サイトSimplicityでファビコンなどサイトイメージを変更する方法にて。

以上、ファビコンやウェブクリップアイコンの作成方法とSimplicityの設定でした！

できるだけ、作業内容がイメージしやすい記事・ブログにしたいと思っています。

もし、疑問や感想があれば、お気軽にコメントください！疑問を送ってくださることで、後で読む方にとっても役に立つはずです。

最後までお読み下さりありがとうございました！