サイトアイコン(favicon)を設定しよう

ハミングバード、アルバトロスでは、プラグインなどを利用することなく管理画面からサイトアイコン(favicon[ファビコン])を設定することが可能です。

現在ご利用中の方でもこのサイトアイコンを設定されていない方が多いようですので、改めて使い方を解説させていただきます。

サイトアイコン(ファビコン)の設定方法

サイトアイコンは、管理画面の【外観 > カスタマイズ > サイトアイコン】より設定可能です。

テーマによって多少名称が異なります。
ストーク・ハミングバード→「サイトロゴ・アイコン」
アルバトロス→「サイトアイコン」

①ファビコン(.png)をアップロード

管理画面では画像が引き伸ばされて荒れたようになりますが、サイト上では問題なく作動します

管理画面では画像が引き伸ばされて荒れたようになりますが、サイト上では問題なく作動します

png形式でつくったサイトアイコンをアップロードします。推奨は32px × 32pxで、背景付きでも透過pngでもどちらでもかまいません。

 

管理画面では画像が引き伸ばされて荒れたようになりますが、サイト上では問題なく作動します

②IE用ファビコン(.ico)をアップロード

.ico形式のアイコンはプレビューされませんが、アイコンがうまく作れていれば問題なく動作します。

.ico形式のアイコンはプレビューされませんが、アイコンがうまく作れていれば問題なく動作します。

IE用にico形式のサイトアイコンをアップロードします。ただし、png形式に比べico形式のファイルはつくるのが面倒なので、上でつくったpngファイルをつかって、ico形式に変換してくれるWEBサービスがあるので、そちらを利用するといいかと思います。

ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます

ファビコン作成 favicon.icoの使い方

  • 16px角、32px角の2種類のpng形式のサイトアイコンを作成
  • ファビコン作成 favicon.ico にてそれぞれアップロード
  • 「favicon.icoを作成」ボタンを押せばファイルをダウンロードできる

あとはダウンロードしたfavicon.icoを管理画面のカスタマイザーの【IE用ファビコン(.ico)をアップロード】にアップロードするだけです。

③アップルタッチアイコンをアップロード

iPhone/iPad用のホーム画面用のアイコン

iPhone/iPad用のホーム画面用のアイコン

iPhoneやiPadでホーム画面にサイトをブックマークした時に表示されるアイコンを設定できます。

推奨サイズは144px角のpng画像となります。

こちらはAndroid端末では表示されません。

まとめ

サイトアイコンはブランド力を高めるために非常に重要となりますので、面倒くさがらずに設定しておいた方が無難です。ちょっとしたことですが、ご自身のサイトでサイトアイコンがどのように表示されているかも確認してみましょう。

新作!究極のモバイルファースト
WPテーマ「ストーク」

「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。

インパクトのあるアニメーション
WPテーマ「ハミングバード」

インパクトのあるアニメーションでブログを演出します。

誰が使っても美しいデザイン
WPテーマ「アルバトロス」

シンプルかつ正統派のブログテーマです。