WordPressに「ファビコン」を作成して表示させるまでの方法

16830809199_ccaa390cd2_z

photo by haru__q

今回ファビコンについてのお話をします。ファビコンって普段あまり馴染みのないものですよねちなみに似ていますがファ○コンではありません。

ファビコンって何?

ファビコン(favicon)とはブラウザのタブ上に表示されるアイコンやブックマーク一覧でも表示される小さい画像の事です。

WordPressでファビコンに何も設定していない状態だと使っているテーマのファビコンが表示されます。

↓こちらがChromeを開いている時に表示されているファビコン

fabicon1b

画像はAndroidですがスマホでもこのように表示されます。

fabicon3

このようにブログの看板とも言える大事なイメージ画像なのでブログオリジナルのファビコンが有ると無いとで印象の面で大きな違いがあります。

ファビコンを作成するメリットとしては?

・サイトの完成度が高まるので信頼度が違う

・ブックマークからも見つけやすくなるのでアクセスされやすくなる

・パソコン、スマホで複数のタブを開いてネットを閲覧している場合でも後から見つけやすくなる

またWordPressでデフォルトのファビコンのままだとテーマのファビコンになっています。

とても小さいので余り細かい画像だと何の画像だか分からなくなりますのできるだけシンプルにブログのロゴ画像の一部やブログタイトルの頭文字なんかがいいかもしれません。

ファビコンを保存する上での最適な画像の形式は「ico」です。
なぜ「jpg」や「png」でもなく「ico」かというとIEでは「ico」形式しか対応していなくブラウザでは表示されません。

IEを普段から使っている方は沢山居ると思うのでIEでも表示されるようにします。

また「ico」形式なら複数のサイズのファビコンを格納できます。

■ファビコンの作成サイズ一覧

・16×16
IEのアドレスバー

・24×24
chrome、firefox、safari

・32×32
IE

・48×48
Windowsのサイトアイコン

・57×57
iOSのホームアイコン

・64×64
Windowsのサイトアイコン(高解像度)

・72×72
iPadのホームアイコン

・96×96
GoogleTVのアイコン

・114×114
RetinaのiPhoneアイコン

・128x128px
Chrome

・152×152

スマホ・タブレット

等と色々種類がありどのサイズを作っていいのか分からないかもしれませんしサイズによってはあまり使う事のないものもあります。

サイズの無いアイコンが表示される場合は自動的に拡大・縮小されるらしいのでとりあえず「16×16」「32×32」「48×48」があれば十分だと思います。

早速ですが作ってみましょう。

実際の流れとしては

「ファビコンになる元の画像を用意」→「元画像をicoに変換する」→「WordPressにicoファイルをアップロード」→「header.phpの記述を変更する」となります。

■画像を用意する

まず「16×16」「32×32」「48×48」はpngで作り、ファイル名は任意の名前でかまいません。

今回GIMP2で作りました。

fabicon11b

ファビコン作成方法

「ico」を無料で作成できるツールがあるのでコチラを利用します。

・「ファビコン favicon.icoを作ろう!」

ファビコン(ファブアイコン)faviconを作ろう!。16x16と32x32と48x48ピクセルのマルチアイコンが簡単に作れます。作成したファビコンの画像はプレビューで確認できます。プロ仕様の詳細データ表示付き。

・通常バージョンになります。「16×16」「32×32」「48×48」と3種類のPNGファイルをアップロードできます。

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

半透過マルチアイコン作成。無料で半透明マルチアイコンやファビコン(favicon.ico)が作れます。ギザギザの無い美しい影を持ったアイコンが作成できます。

・こちらは半透過バージョンです。透過の他11パターンから背景色も選べます。3種類以上のPNGファイル画像をアップしたい場合はこちらです。

作った元が画像をそれぞれにアップロードし「アイコン作成」を押します。

fabicon5b

「アイコンダウンロード」をクリックする。ちなみにコチラのバージョンだと背景色が選べます。

fabicon6b

■作成したファビコンファイルをアップロードする

WordPressに直接ファビコンファイルをアップロードして「header.php」ファイルに記述を追加します。

つくった「favicon.ico」をWordPressにアップロードします。「メディア」→「新規追加」→「ファイルを選択」すると作成したファビコンが表示されるので「編集」を押すます。
fabicon8b

右側の「ファイルのURL」をコピーします。こちらはこれから「header.php」を記述する時に使います。

・「header.php」を変更する

「外観」→「テーマの編集」→「header.php」をクリック。

<link rel=”shortcut icon” href=”<?php echo get_template_directory_uri(); ?>/images/logo.ico” />

という記述部分があるのでコチラを

<link rel=”shortcut icon” href=”「ファイルのURL」”>
へ変更すれば完成です。

すぐにアップされるので確認してみましょう。

fabicon10b

■複数サイトでファビコンを使い分ける方法

8273051393_b9d5649dd3_zphoto by Shunichi kouroki

二つ目以降のブログ・サイト用のicoをダウンロードすると「favicon.ico (1)」「favicon.ico (2)」などとなると思います。
このままだと使えないのでこの場合はファイル名を変更するだけです。

「favicon.ico (1)」→二つ目のブログファビコン「fa1.ico」、三つ目のブログファビコン「fa2.ico」

後は同じ流れでWordPressのメディアからアップロードしファイルのURLを「header.php」に記述すればOKです。

小さい画像なのでサイズや画質の解像度が思っていたイメージと違う場合もあります。

その場合はサイズや背景色を変更したりして、修正したphg画像をicoへ変換しまたダウンロードして微調節をてみるといいでしょう。

関連記事




この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでめちゃログをフォローしよう!