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

黒を塗り直し

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

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

ファビコン設定してみた

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

スポンサーリンク

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

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

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

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

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

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

ファビコン未設定時

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

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

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

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

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

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

お気に入りのアクセスの一手間

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

左からgmail

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

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

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

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

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

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

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

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

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

ファビコン作成1:デザインを決める

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

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

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

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

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

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

ダウンロードした元画像

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

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

ファビコン作成2:画像の加工と修正

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

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

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

pixlrのファビコン

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

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

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

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

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

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

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

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

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

黒を塗り直し

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

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

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

ファビコン作成3:画像サイズを縮小

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

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

これは、

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

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

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

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

16×16ピクセル

32×32ピクセル

64×64ピクセル

128×128ピクセル

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

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

ファイル名の工夫

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

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

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

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

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

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

アップロードのファイルを選択

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

アイコン作成ボタン

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

アイコンのプレビュー

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

背景色も変更できる

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

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

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

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

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

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

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

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

ファビコン作成5:アップルタッチアイコンの作成

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

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

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

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

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

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

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

アップルタッチ前

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

アップルタッチ後

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

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

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

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

アップルタッチ背景黒

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

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

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

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

ファビコン作成6:Simplicityのファビコンとして設定。

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

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

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

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

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

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

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

いつも応援クリックありがとうございます♪
にほんブログ村 教育ブログ 幼児教育へにほんブログ村 子育てブログ 2015年4月~16年3月生まれの子へにほんブログ村 子育てブログ 2017年4月~18年3月生まれの子へ

スポンサーリンク

ツイッターのフォローボタン
記事更新のお知らせなどをツイートしています。
  • このエントリーをはてなブックマークに追加

スポンサーリンク

コメント

  1. みけCAT より:

    透過部分を白くするためにPNGをJPGに変換するなんてひどいです!
    素直にGIMPかなんかで白い背景と合成し、アルファチャンネルを消しましょう!

    • ちゃこ より:

      みけCATさん

      こんにちは。ご指摘ありがとうございます!

      そうなのですね。PNGをJPGに変換するのは良くないのですね。簡単に背景が白くできるから楽ちん♪と思っていましたが、後々トラブルの原因になったりするのでしょうか?

      アルファチャンネルというのも初耳でした(^_^;)

      もう少し勉強してみます!

      むむ??という点がありましたら、是非、また教えてください!

感想・質問をお書きください

名前の欄はニックネームで構いません。また、コメントはスパム防止のため、承認制となっています。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)