おしゃれなファビコン・アップルタッチアイコンの作り方&Simplicityで簡単に設定する方法。

ブログを開設してしばらくするとブログアイコン（ファビコン・アップルタッチアイコン）を作ってみたくなりますよね。

「でも絵心ないし、サイズとかファイル形式とか設定とか、色々めんどくさそう…」と思う方も多いかもしれません。 そんなあなたでも大丈夫。 無料配布のアイコンを使えば、誰でも簡単にハイクオリティなブログアイコンを作れてしまいます。

今回は、簡単におしゃれなアイコンを作る方法と、Simplicityで設定までする方法をイチから解説していきます。

目次

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

今回は、

1. 無料のアイコンをダウンロード
2. アイコンに文字（サイト名など）を入れる

という手順で作っていきます。

iconmonstrへアクセス

まずはアイコンを手に入れます。

ファビコンやアップルタッチアイコンはそもそもの表示領域が小さいので、できるだけシンプルでわかりやすいものを作る必要があります。

アイコン画像をダウンロードできるサイトは沢山ありますが、そんな要望を満たしてくれるサイトがこちら。

Recommendiconmonstr – Free simple icons for your next project

まずはiconmonstrにアクセスします。

トップページ左上の検索ボックスに、自分のイメージするアイコンのキーワードを入れます。

英語で検索しなければならないのですが、英訳がわからなければ「〇〇　英語」と言った感じでググればすぐに出てくるかと思います。

好きなアイコンが見つかったら、クリックするとダウンロード画面に遷移します。  

上の方で画像形式を選べます。 アップルタッチアイコンは、Simplicityでは「PNG推奨」となっています。 また、現在ほぼ全てのブラウザに対応できるファビコンの形式はPNGになります。

IE10以下のみico形式なのですが、2017年現在のシェアは1%未満なので無視してしまっても良いかと思います。 というわけで、形式は「PNG」を選んでください。

今回は、 『架空の 「SWEETSholic」という「ひたすらお菓子や美味しいスイーツが食べられるお店を紹介するブログ」 のファビコン・アップルタッチアイコンを作る』 という想定で作っていきます。

  ダウンロード前にここで色々といじることができます。

単純にドーナツが好きなので、ドーナツっぽいアイコンを選んでみました。

特に加工しない場合は、下の方のライセンスのところにチェックを入れ、「Download」をクリックすればすぐにダウンロードが始まります。

色を変更

カラーコードの入力欄をクリックすると、カラーパレットが出てきますので、ここで色を変えることができます。 （もちろん、直接カラーコードを入力してもOKです。）

今回はポップなイメージにしたかったので水色にしてみました。

もちろん、「背景が黒くなってしまっても問題ないし、文字を入れなくてもいい」という方は一つ作成すれば良いかと思いますが、2種類作りたい方も多いかと思いますので、今回は２つ作っていきたいと思います。

ファビコンバージョン

ファビコンの場合は、背景の枠いっぱいの大きさにしたいので、「0px」にしておきます。

サイズを確定したら、下の方の「I agree to the License Agreement」にチェックを入れ、「Download」をクリックします。 ファビコンの方の画像作成はこれで終了です。

アップルタッチアイコンバージョン

アップルタッチアイコンは、文字を入れるためのスペースを作りたいので、アイコンを小さくします。 バーをドラッグで動かして（矢印キーでも動かせます）、サイズを変更します。

今回の場合は40pxくらいでちょうどいい感じになりました。 加工が終わったら、ダウンロードしてください。

次はアイコンに背景をつけ、文字を入れていきましょう。

PIXLR EDITORで文字を入れる（アップルタッチアイコン）

すでに何かしらの画像加工ソフトをお使いの方は、そちらで作成していただければと思います。 ここでは、普段あまり画像はいじらないという方でも作れるように、登録やインストールが不要な「PIXLR」というWEBツールを使って説明していきます。

まずはOnline Photo Editor | Pixlr Editorにアクセスします。

一番上の、「新しい画像を作成」をクリックしてください。

ダウンロードしたアイコンに合わせて、幅と高さを240ずつにします。変更したら、右下の「OK」を押してください。

次に背景を用意します。 左下の長方形をクリックするとカラーパレットが出てきますので、色を選択して「OK」を押してください。

これで白い背景ができました。 続いて、先程作成した画像を挿入します。 上部のリボンから「レイヤー」→「新しいレイヤーとして開く」の順にクリックします。

作った画像を選択してEnterを押せばさきほどのアイコンが挿入されます。

このまま文字を入れても良いのですが、アイコンを少しずらして余白を作ります。

メニューバーの一番右上をクリックするとアイコンを移動できるようになりますので、マウスでドラッグして位置を調節してください。（今回は上にずらしました。）

余白を作ったら、メニューバー右下の方の「A」の文字をクリックして文字を入れます。 フォントや太さもある程度選ぶことができます。 位置はマウスでドラッグすれば動かせます。

こんな感じに出来上がりました。 アイコンが完成したら、「フォーマット」をPNGにして「OK」を押してください。

これでアップルタッチアイコンも完成です。

Simplicityでファビコン・アップルタッチアイコンを設定

いよいよ作ったアイコンを設定していきます。

ファビコンについて検索すると、「色々なサイズのアイコンを用意しなければならない」といった情報が出て来るのですが、僕は今回の240px × 240pxの画像だけで大丈夫でした。

WordPressの標準のカスタマイザーだと１種類しか設定できないのですが、Simplicityでは素晴らしいことに、テーマカスタマイザーで２種類とも簡単に設定できます。

ダッシュボードから、「外観」→「カスタマイズ」→「その他」と進み、「ファビコンを有効」「アップルタッチアイコンを有効」にチェックを入れます。 あとは画像をテーマにアップロードしてそれぞれ設定すれば完了です。

ブラウザを再読み込みし、設定してしばらくするとファビコンが反映されます。

なお、Chromeでファビコンが上手く反映されない場合はこちらの記事が参考になるかと思います。

参考Chromeでファビコンが表示されないときの解決法 | みるくのデザイン覚書。　～ときどき、雑談～

完成見本

iPhoneのChromeアプリのブックマーク。

iPhone版Safariのお気に入り。

iPhoneのホーム画面。

僕も実際に２種類作ったのですが、我ながら良い感じに仕上がりました。 気に入ったので、Twitterのアイコンもこれにしてしまいました笑。 「作り方」のところではアイコンの下に文字を入れましたが、アイコンによってはこのように文字を重ねても良いかもしれません。

まとめ

やはりオリジナルのブログアイコンが表示されるとテンションが上がりますね。

ファビコン・アップルタッチアイコンの作り方は色々あると思いますが、今回は比較的簡単におしゃれなアイコンを作る方法を紹介させていただきました。

Simplicityをお使いの場合は、サイズもあまり気にすることなく、設定もとても簡単です。 是非自分だけのブログアイコンを作ってみてください。