All in one Faviconサムネイル
スポンサーリンク

All in one Faviconサムネイル

 

webサイトをお持ちの皆様、Favicon(ファビコン)は設置されていますか?

今回は、ワードプレスのプラグインで簡単にファビコンが設置できる『All in one Favicon』をご紹介します。

 

スポンサーリンク

そもそも『Favicon(ファビコン)』とは何?

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

そうなんです。

簡単に言えばwebサイトのアイキャッチ画像の様なものなのです。

今や、ファビコンを設置していないwebサイトの方が少ないのではないかと言うくらい必須要素なのです。

ファビコンはブラウザのタブや

ファビコン見本

 

ブックマークを登録したときにも表示されます。

ファビコン見本02

 

そして、スマートフォンのホーム画面にブックマークを追加した時なんかにも現れます。

 

そんなファビコンがワードプレスのプラグインを入れれば簡単に設定できますので、ご紹介していきます。

 

スポンサーリンク

ワードプレスプラグイン『All in one Favicon』のインストール・設定

1.『All in one Favicon』をインストール

まず、ワードプレスの管理画面より、「プラグイン」➝「新規追加」と進み、ワード検索欄に『All in one Favicon』と入力する。

All in one Favicon検索

 

出てきました。

そして、そのまま「インストール」を押す。

All in one Faviconインストール

インストールが終わったら「有効」ボタンを押す。

All in one Favicon有効化

 

これでインストールは完了です。

 

2.『All in one Favicon』を設定する

「設定」➝「All in one Favicon」へと進みます。

All in one Favicon設定へ

 

最初にフロントエンド用のファビコンの設定です。

フロントエンド用とは、簡単に言えば表に公開しているサイト用ということですね。

それでは設定していきます。

方法は簡単です。「ICO Frontend」「Apple Touch Icon Frontend」の項目に画像をアップロードをするだけです。

All in one Favicon設定01

 

これでフロントエンドは完了です。

All in one Favicon設定02

 

続いて、バックエンド用を設定します。

バックエンド用とはフロントエンドとは逆で一般に公開されない簡単に言えば管理画面用のファビコンということになります。

設定していきます。

やり方は、フロントエンドと全く同じく「ICO Frontend」「Apple Touch Icon Frontend」の項目に画像をアップロードをします。

All in one Favicon設定03

 

こんな感じですね。

All in one Favicon設定04

ちなみに私はフロントエンドとバックエンドをわかりやすくするためロゴの色を反転させています。

 

スマホのアイコン表示はこんな感じです。

スマホ確認

 

しかし、こんなに簡単に設定できるなんていい時代になりましたね。。。

 

ぜひ、ご参考までに!

 

 

スポンサーリンク
おすすめの記事