Cocoonのサイトアイコン(favicon)の設定方法

ファビコン(favicon)とは、「Favorite icon(フェイバリットアイコン)」の略語で、Webブラウザを開いたときにタブに表示される画像またはWebページをブックマークした際に表示される画像などをいいます。ページのリピーター対策やブランディング効果等に期待できる“favicon（ファビコン）”について作成方法や設定方法について説明したいと思います。

favicon設定前

WordPressのテーマCocoonのアイコンが表示されています。

favivon設定後

ファビコンを設定することで、サイトが見つけやすく、覚えてもらいやすく、信頼感が高まる効果がありますので、是非、設定しましょう。

サイトアイコンは、画像があれば、サイトアイコンに設定するだけですので、すぐに完了します。画像がない場合は、画像を作成した後、設定するというステップとなりますので、ここでは、画像がある場合とない場合に分けて解説をします。画像がある場合は、後は読み飛ばしていただければ良いかと思います。

faviconは、google公式ガイドラインによれば、1つのサイトにつき1つだけですので、サイトを分けて説明しています。サイトアイコンの設定方法に変わりはありません。

サイトアイコン(favicon)の制定方法(動画)

「サイトアイコン(favicon)の設定方法(動画)」は、こちら

既存の画像をつかう

サイトアイコン(favocon)設定

カスタマイズの選択

WordPressの管理画面で、外観からカスタマイズを選択します。

サイト基本情報をクリック

「サイトアイコンを選択」をクリック

画像の選択

設定完了

これで設定が完了しましたので、最後に「公開」をクリックします。

サイトアイコン(favocon)の表示

faviconが表示されました。

ブックマークにも表示されました。

新規に画像を作成する

Canvaで画像を作成

Canvaにログインします。

CANVAの使い方は、こちら↓

CanvaでYouTubeの サムネイル画像を作成した。

CanvaはWebブラウザから利用できる為、パソコンのOSを問わずに作ることができます。「ブログのアイキャッチ画像」、「ロゴ」、「ポスター」、「チラシ」、「プレゼンテーション資料」等、無料版でも十分すぎるクォリティの高いデザインを作れます。

gungii.com

2020.11.10

アイコンサイズの入力

「カスタムサイズ」を選択して、画像のサイズを入力します。ここでは、faviconのサイズとして512x512pxと入力します。

サイトアイコンの作成

ファイル名の変更

デフォルトでは、「名称未設定」となりますので、ファイル名を変更しておきます。ここでは、「favicon512x512」とします。

画像の編集

素材の選択

左のメニューから「素材」をクリックして、「肉球」で検索して、表示された素材をキャンパスに貼り付けます。

大きさと色の変更

素材の大きさと色を変更します。

テキストの貼り付け

左側のメニューから「テキスト」を選択して、選択した文字デザインをキャンパスに貼り付けて、文字を「G」に変更します。

画像のダウンロード

画像の編集が完了しましたら、画像をダウンロードします。ファイルの種類は、ここではCocoonのfaviconとしてpngを選択して、「ダウンロード」をクリックします。

サイトアイコン(favocon)設定の手順

カスタマイズの選択

WordPressの管理画面で、外観からカスタマイズを選択します。

サイト基本情報をクリック

「サイトアイコンを選択」をクリック

画像の選択

設定完了

これで設定が完了しましたので、最後に「公開」をクリックします。

サイトアイコン(favocon)の表示

faviconが表示されました。

ブックマークに表示されました。