【WordPress】ファビコンとスマホ用アイコンの作成

シェアする

  • このエントリーをはてなブックマークに追加
  • 12

【2014/4/27:追記】
この記事を書いた後にブログのロゴを変えました。

—————————–

このブログのスマホのホーム画面用のアイコンと、ファビコンを作成してみました。

スマホのホーム画面用のアイコンは、ホーム画面にブックマークを置いたときに表示されるやつで、ファビコンとは、PC上で見たときに、タブの部分に表示されているアイコンのことです。(画像の赤い四角の部分。)

画像:ファビコンの場所

いまこちらのブログのテンプレートを作成している最中なんですが、ロゴを作成したのでそれをベースに作成。

■ブログのロゴ

まずロゴはこんな感じ。

画像:ブログロゴ

マスキングテープの上にタイトル文字、そしてメモっぽさを出すためにえんぴつを。

マスキングテープについては、実物のテープはやや透け感があるのでその感じを出すために80%透過させていますが、えんぴつもそれに合わせてやや透過させています。(100%だと鉛筆だけ濃くてヘンな感じになってしまった。)

ちなみにこのえんぴつは自分でフォトショを使って描いたものなんですが、長方形(えんぴつのボディの部分)・六角形(断面の部分)・楕円(断面の中の芯の部分)、三角形(えんぴつの先の部分),三角形と1px × 1pxの四角形の組み合わせ(えんぴつの先の芯の部分)…と、いろんなパーツを組み合わせたので、小さいアイコンながら地味に時間がかかりました。笑

■スマホのホーム画面用のアイコン

画像:スマホ用ホーム画面のアイコン

ロゴをぎゅっと小さくした感じで作りました。
何が書いてあるかわかりやすいように、テープとえんぴつの透明度を100%に戻しました。また、文字も太字にしています。

アイコンのサイズについて調べたところ、iPadのアイコンサイズが144px × 144pxで、iPhoneが114px × 114px(※)ということだったので、iPadのサイズの144px × 144pxで作成しました。

※サイズについて
上記はRetinaディスプレイの場合。Retinaでないものの場合はもっとサイズが小さいようです。
iPad・iPhoneのアイコンとして表示される時に、作成した画像はそのサイズに拡大・縮小されるので、大きめのサイズに合わせて作成しました。(小さい画像が拡大されてしまうと画像が荒くなるので…。)

実際に自分のiPhoneのホーム画面に置いてみるとこんな感じ。

画像:iPhoneホーム画面

ちょっと背景がごちゃごちゃしていて見にくいのですが…一番最後のアイコンです。

■ファビコン

画像:ファビコン

他の画像と比較するとちっちゃ!って感じですね。笑

ファビコンは16px × 16pxで作成。
さすがに文字は入らないので、えんぴつだけにしています。こちらも透明度は100%にしてあります。

と、こんな感じのちまちましたモノたちを作っていました。

で、作ったあとは「Favicon Rotator」というプラグインを利用して、画像を追加して完了♪

さてさて、これからまたテンプレートの作成を進めていきたいと思います~。

No tags for this post.

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメント

  1. […] ※wordpressでファビコンを設定したときの記事はこちら […]