自分のブログのタブにアイコンを表示させたい!WordPressのファビコン表示設定

  • URLをコピーしました!

色々なブログを見ていると、タブのサイト名の左側にそれぞれアイコンが設置されています。

これらのアイコンをWEBサイトのシンボルマーク「ファビコン」と言います。

このファビコンは、小さいながらも瞬時にどのサイトのタブなのかを認識させることができ、リピーター獲得や、サイトやブログのブランディングに繋げることが出来ます。

ちなみにWordpressは初期のままですと「W」のマークです。

ぜひあなたもファビコンを作成して、他サイトとの差別化を図りましょう!

この記事を読んでわかること
  • ファビコンとは?
  • ファビコンの作り方
  • WordPressへファビコンのアップロード
目次

\本サイトで使用中のWordpressテーマ/

ファビコンとは?

ファビコン(favicon)は「favorite icon(お気に入りのアイコン)」の略語で、Webブラウザでタブにサイトを開いたときに表示されるWEBサイトのアイコンで、ブックマークやけスマホでのGoogleの検索結果画面など様々な場所で表示されます。

それでは、ファビコンを設置することで得られる効果を3つ紹介します。

サイトやブログの認知度をアップ

ファビコンは検索結果画面に表示されたり、サイト回覧中はブラウザのタブに表示されるなど、様々な場所で表示されます。

サイトにファビコンを設置しておくと、絵などのアイコンは文章よりも人間の記憶に残りやすいので、ファビコンを見ただけで「あっ、あのサイトだ!」と何のサイトか認識をすることが出来るようになります。

リピーターの獲得

例えば沢山開いてしまったブラウザのタブの中に開きたいページがある場合、ファビコンが表示されていればページを見つけることが出来ます。
ファビコンを見て「このブログの記事を読んで悩みが解決が出来た」という記憶があれば、また安心してサイトを回覧することが出来ます。
こうやって、ファビコンを色々な所で見せ、ユーザーの記憶に刷り込んでいくことがリピーター化に繋がっていきます。

サイトのブランディング化

小さなファビコンにサイトのイメージをシンボル化することで、ブログのブランディングができます。

ファビコンのファイル形式について

ファビコンはPCで使用する場合は「.ico」形式で、スマホで使用する場合は「.png」形式となります。

「.ico」形式で作成すると複数のサイズに1つのファイルだけで対応できるマルチアイコンとして活用できるようになります。

スポンサーリンク

ファビコンの作成方法とWordpressへのアップロード

WordPressのファビコンは512×512pxの画像を用意する必要があります。

ファビコンを作るには以下の方法があります

  • 自作する
    Photoshopなどの画像編集ソフトを使用
  • フリー素材サイトや作成サービスを利用する
    CanvaというWEBサービスを利用して作成する
  • 誰かに作ってもらう
    ココナラなどでデザイナーに頼む

テーマ「SWELL」でのファビコン設定方法

画像が用意出来たらWordpressにアップロードします。
この記事ではテーマ「SWELL」での設定手順を解説します。

作成手順

  1. 画像編集ソフトで512×512pxの画像を作成
  2. ジェネレーターを使って変換する
    STEP
    512px×512pxの画像を用意する

    これはPhotoshopで背景は透過で作成し、PNGで書き出しています。

    STEP
    管理画面から「外観」→「カスタマイズ」をクリックします
    STEP
    「Wordpress設定」をクリック
    STEP
    「サイト基本設定」をクリック
    STEP
    「サイトアイコン選択」をクリックして、先ほど用意したPNG画像を選択します
    STEP
    「公開」をクリック
    STEP
    サイトをリロードすると、タブにファビコンが表示されました

    まとめ

    ファビコンの作り方とWordpressnoファビコン設定を解説しました。
    まだファビコンを作っていない方は、是非作成して自分のサイトやブログに設定をしてみてくださいね。

    の記事を読んでわかるこ
    おさらい
    • ファビコンとは?
    • ファビコンの作り方
    • WordPressへファビコンのアップロード

    この記事が気に入ったら
    フォローしてね!

    よかったらシェアしてね!
    • URLをコピーしました!
    • URLをコピーしました!
    目次