WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

ファビコンを簡単に設定。All in one Favicon の使い方

faviconの設定方法

ファビコン(Favicon)とは、Webブラウザのアドレスバー等のタブに表示されるアイコンのことです。コレはたくさんウインドウを開いているとき等に目印になるのでユーザビリティを考える上では必ず設定しておいた方が良いです。そんなファビコンを設定出来るプラグインAll in one Faviconの使い方を説明します。

1.プラグインのインストールと有効化

まず、プラグインを検索して有効化します。プラグイン→新規追加でプラグインの検索画面を表示して[All in one Favicon]を検索してインストールをクリック

All-in-faviconのインストール

インストールが終わったら有効化をクリック

ファビコンを有効化する

2.Frontendのファビコンを設定する(公開サイト)

ダッシュボードの設定にAll in one Faviconの項目があるのでそちらをクリックすると管理画面に移動します。

ファビコンの設定へ

まずは、一般公開サイトのファビコンを設定します。ちなみにFrontend(フロントエンド)とはざっくり言うとユーザーが見る画面の事です。サイトのデザイン部分等だと思っていてください。
上からico、gif、pngになっています。持っているデータに合わせて項目を選んでください。gifしか無い人はgifだけ登録すればオッケーです。一番下のApple Touch Icon Frontendはiphone、ipadのホーム画面用のアイコンです。

フロントエンドの設定

3.Backendのファビコンを設定する(管理用サイト)

まずは、管理画面サイトのファビコンを設定します。ちなみにBackend(バックエンド)とはざっくり言うとユーザーから見えない部分でユーザーが入力したデータを処理して値を返したりとか全般を言います。管理画面もユーザーからは見えない部分です。
設定方法はフロントエンドと全く一緒です。

バックエンドを設定する

4.その他の設定

その他の設定をします。上段はiphone、ipadでのホーム画面ボタンを光らせるかどうかです。要はデザイン的な部分です。チェックは入れても入れなくてもどっちでも良いです。下段のRemove link from Meta-boxは開発者情報をmetaタグで出力するかどうかです。チェック入れておいてオッケーです。

その他の設定

5.まとめ

細かい部分ですが、ユーザービリティの向上とサイトの視認性を上げる物だと思いますのでサイトを作成したら設定しておきましょう。