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

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

ファビコン・アップルタッチアイコンの完成図

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

「でも絵心ないし、サイズとかファイル形式とか設定とか、色々めんどくさそう…」と思う方も多いかもしれません。

そんなあなたでも大丈夫。

無料配布のアイコンを使えば、誰でも簡単にハイクオリティなブログアイコンを作れてしまいます。

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

スポンサーリンク

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

今回は、

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

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

iconmonstrへアクセス

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

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

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

iconmonstrのアイコン一覧画面

Recommendiconmonstr – Free simple icons for your next project

おすすめポイント

  • おしゃれでシンプルなアイコンが多い
  • 種類が豊富
  • 無料
  • 商用利用可
  • 登録不要
  • ファビコン・アップルタッチアイコンに最適な画像形式に対応
  • 色や大きさを変更できる

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

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

iconmonstrでアイコンを検索

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

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

上の方で画像形式を選べます。

アップルタッチアイコンは、Simplicityでは「PNG推奨」となっています。

また、現在ほぼ全てのブラウザに対応できるファビコンの形式はPNGになります。

IE10以下のみico形式なのですが、2017年現在のシェアは1%未満なので無視してしまっても良いかと思います。

というわけで、形式は「PNG」を選んでください。

PNG形式を選ぶ

今回は、

『架空の

「SWEETSholic」という「ひたすらお菓子や美味しいスイーツが食べられるお店を紹介するブログ」

のファビコン・アップルタッチアイコンを作る』

という想定で作っていきます。

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

アイコンのカスタムの仕方

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

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

色を変更

カラーコードの入力欄をクリックすると、カラーパレットが出てきますので、ここで色を変えることができます。

(もちろん、直接カラーコードを入力してもOKです。)

iconmonstr上で色を変更できる

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

アイコンを水色に変更

ブログアイコンを作る上でのちょっとしたポイントなのですが、以下の理由からファビコンとアップルタッチアイコンで別々の画像を用意した方が良いと思います。

  • ファビコンは背景が透明な方が良い(多くのサイトが透明)
  • アップルタッチアイコンは背景を透明にすると黒くなってしまう(つまり、アップルタッチアイコンは背景に色をつけた方が良い)
  • ファビコンは表示領域が非常に小さいので、アイコン自体をなるべく大きくして、文字はあまり入れない方がわかりやすい
  • アップルタッチアイコンは文字を入れた方がオリジナリティが出る
  • アップルタッチアイコンは背景に対して少し小さめにして、余白を設けたほうが綺麗に見える

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

ファビコンバージョン

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

アイコンと背景との余白を0pxに

サイズを確定したら、下の方の「I agree to the License Agreement」にチェックを入れ、「Download」をクリックします。

ファビコンの方の画像作成はこれで終了です。

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

アップルタッチアイコンは、文字を入れるためのスペースを作りたいので、アイコンを小さくします。

バーをドラッグで動かして(矢印キーでも動かせます)、サイズを変更します。

アイコンのサイズを小さくして余白を作る

今回の場合は40pxくらいでちょうどいい感じになりました。

加工が終わったら、ダウンロードしてください。

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

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

すでに何かしらの画像加工ソフトをお使いの方は、そちらで作成していただければと思います。

ここでは、普段あまり画像はいじらないという方でも作れるように、登録やインストールが不要な「PIXLR」というWEBツールを使って説明していきます。

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

PIXLRのトップ画面

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

「新しい画像を作成」を選択

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

背景の幅と高さを指定

次に背景を用意します。

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

背景の色を指定

これで白い背景ができました。

続いて、先程作成した画像を挿入します。

上部のリボンから「レイヤー」→「新しいレイヤーとして開く」の順にクリックします。

レイヤーの作成手順

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

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

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

余白を作ったら、メニューバー右下の方の「A」の文字をクリックして文字を入れます。

フォントや太さもある程度選ぶことができます。

位置はマウスでドラッグすれば動かせます。

アイコンの位置をずらして文字を入れる

こんな感じに出来上がりました。

アイコンが完成したら、「フォーマット」をPNGにして「OK」を押してください。

形式をPNGにして保存

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

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

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

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

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

ダッシュボードから、「外観」→「カスタマイズ」→「その他」と進み、「ファビコンを有効」「アップルタッチアイコンを有効」にチェックを入れます。

あとは画像をテーマにアップロードしてそれぞれ設定すれば完了です。

Simplicityでのファビコンとアップルタッチアイコンの設定手順

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

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

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

完成見本

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

iPhoneのChromeアプリのブックマークでの「About LIfe」のアイコン

iPhone版Safariのお気に入り。

iPhone版Safariのお気に入りでの「About LIfe」のアイコン

iPhoneのホーム画面。


iPhoneのホーム画面での「About Life」のアイコン

僕も実際に2種類作ったのですが、我ながら良い感じに仕上がりました。

気に入ったので、Twitterのアイコンもこれにしてしまいました笑。

「作り方」のところではアイコンの下に文字を入れましたが、アイコンによってはこのように文字を重ねても良いかもしれません。

まとめ

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

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

Simplicityをお使いの場合は、サイズもあまり気にすることなく、設定もとても簡単です。

是非自分だけのブログアイコンを作ってみてください。