WordPress(Cocoon)でサイトURLにアイコンを表示させる方法

ブログ運営

サイトアイコン(ファビコン)は、Webサイトブラウザのタブの端に
表示されるアイコンで、ブックマークの先頭、アドレス欄の端などに
表示されます。

サイトアイコンは、「ブラウザのブックマーク」として利用される
サイトの顔みたいなもので設置しておきましょう!

サイトアイコン(ファビコン)って何

ファビコンは、ウェブサイトを「お気に入り」英語で(favorite)に登録したときに
表示されるアイコン(icon)という意味で、favorite icon(フェイバリット+アイコン)
を簡略し、favicon(ファビコン)になったというのが名前の由来のようです。

ファビコン(サイトアイコン)実際の表示場所

お気に入りに追加した場合に表示

Webサイトブラウザのタブの端に表示されるアイコン

下記画像の例では、おなじみGoogleとYahoo!JAPANの表示例とWordPress(Cocoon)で設定
してない状態の表示例です。

WordPress(Cocoon)設置アイコン(ファビコン)を準備する

サイトアイコン(ファビコン)を設定するにはサイトの顔となる
アイコンを準備する必要があります。

表示されるサイトアイコン(ファビコン)は、小さいアイコンなのでシンプルで
わかりやすいものが好ましいかと思います。

サイトアイコンのサイズは?

Cocoonでサイトアイコン(ファビコン)のサイズは設定画面を開くと
「サイトアイコン512×512ピクセル以上の正方形にしてください。」
とあるので512×512ピクセルのアイコン画像を準備しましょう。

サイトアイコンを一から作る?

おすすめは、ブラウザ上で動作して無料で使える「x-icon editor」ファビコン作成サイトです。
ブラウザ上で動作するたので手軽にサイトアイコン(ファビコン)を作成することが可能です。

画像を準備しサイトアイコン(ファビコン)にする

GoogleとかYahoo!のようなインパクトのある画像が準備でできればいいのですが?

画像がない場合は、無料素材サイトから探してくる

おすすめは、イラストACです。

イラストACはイラストが無料!商用利用もOK!

最近このサイトに登録しました。

アフィリエイター用無料素材集の「アフィピク」イラストや画像がフリーで使えます。

おすすめポイント
無料で利用可能
商用利用OK
クレジット表記が不要

WordPress(Cocoon)にサイトアイコン(ファビコン)を設定する方法

外観 → カスタマイズ → サイト基本情報 → サイトアイコンの順で設定します。

カスタマイズをクリックすると、サイト基本情報の設定項目がありますので
ここをクリック!

「サイトアイコンを選択」をクリックし準備したアイコンを
アップロードします。

サイトアイコンをアップロードすると
下記のような画面が表示されますので更新を保存するため
公開をクリックし反映させます。
設定はこれで完了です。

Cocoon関連記事

コメント