(仮)Rocket-Field

いろいろ書けばその内に方向性が見えてくるよね

ファビコン(favicon)って何?って人へ贈るWordPressでの設定方法

      2015/12/16

F178_boroboronopandanonorimono500

ファビコンとは何でしょう。

初めて聞いたときはファミリーコンピューターことファミコンみたいだなという印象を持ってしまう(?)このファビコンについて説明していきます。

ファビコンの概要を説明

ファビコンとは

「favorite icon」の略=「favicon」

お気に入りアイコンってことですね。

wikipediaを見てみましょう。

Favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。Favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したものである。
参照元:wikipedia

ネット利用してるとよく見る下のようなやつですね。
お気に入りのところにも表示されます。

2014-02-24_14h41_44

これがあるのと無いのとでは印象が変わってきます。
ちゃんとしてるなって感じませんか?

大抵のちゃんとしたサイト(企業とか、有名どころ)はこのファビコンが設定されています。
なので設定されているといい印象を持つのかもしれませんね。

ということは、自分のブログも設定しておくべきなのです。

Favicon設定までの流れ

アイコンを作成する

自分のサイトを表すアイコンを作成もしくは探します。
漢字やアルファベット一文字とか簡単な絵だったり考えてみましょう。
色で印象も変わるのでどんどん試しましょう。

自分で作成する技術がない人はとりあえず無料素材から探してくるのも手です。

参考:
≫Faviction
世界から集めたファビコンを展示しています

ファイル形式を変換する

ファイル形式をicoに変換します。
png等でも表示されるブラウザもありますが、とりあえずicoにしとくと間違いがないです。

参考:
≫favicon.ocoを作ろう!

変換したファイルをサーバーにアップロード

できたらサーバーにアップロードします。

設定する

次に設定をしていきます。
本編です。

設定方法はこちら

head要素の中に以下のように記入します。

<link rel="shortcut icon" href="ファビコンの保存先" type="image/vnd.microsoft.icon" />

ファビコンの保存先を「wp-content/themes/[テーマ名]/images/」とした場合

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/images/ファビコンのファイル名.ico">

としてもいいかな。

参考:
≫WordPressサイトにファビコン(favicon)を設置する方法(TECHMEMO)
≫WordPressブログにファビコン(シンボルマーク)を設置する方法(WPナビ)

まとめ

設定することでまた一つブログがかっこよくなります。
必ずやっておきたい設定の一つです。

ただ画像のデザインが変だと逆効果になることも…。

ということで、本当は画像ってどうやって作るの?という悩みを持つ人も多いはず。

これに関してはまた別の機会に。
というより、自分に技術がついてきたらってことで。


おすすめ

1
スマホで暇つぶしするならdTVがおすすめ。移動時間も有意義に

暇つぶしといえばスマホ。 最近は、電車での移動時もスマホをいじっている人を多く見 ...

 - WordPress