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

WordPress

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

2021年2月2日

WordPressを導入したらサイトアイコンを設定しておきましょう。

今回は、WordPressでサイトアイコン(ファビコン)を設定する方法をご紹介します。
 

■WordPressでサイトアイコン(ファビコン)を設定する方法(動画解説版)


 

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

WordPressでサイトアイコンを設定する前に、事前にサイトアイコンとして設定する画像(横512px * 縦512px以上の正方形画像)を用意します。
横512px * 縦512px以上の正方形画像を
 

サイトアイコンは、WordPressのカスタマイザーから設定できます。「カスタマイズ」をクリックします。
カスタマイズをクリック
 

(関連記事)WordPressテーマカスタマイザーの使い方
 

サイト基本情報を選択します。
サイト基本情報を選択
 

「サイトアイコンを選択」を押下します。
「サイトアイコンを選択」を押下
 

画像をアップロードまたは、メディアライブラリにある画像を選択して、「画像を選択」ボタンを押下します。
画像を選択して、「画像を選択」ボタン押下
 

このとき、長方形の画像サイズを選択した場合など、画像の切り抜き画面が表示されます。問題なければ切り抜かないを選択、画像を切り抜きたい場合は切り抜くを選択して次に進みましょう。
問題なければ切り抜かないを選択、画像を切り抜きたい場合は切り抜くを選択して次に進みましょう。
 

サイトアイコンを選択したら、「公開」ボタンを押下します。
公開ボタンを押下します。
 

右上にサイトアイコンが表示されるようになりました。

 

以上で、WordPressでサイトアイコン(ファビコン)の設定は完了です。
 

サイトアイコンの利用シーンとメリット・デメリット

サイトアイコンを使うメリット

サイトアイコン(ファビコン)は、サイトのシンボルマークとなるアイコンのことで、ブラウザの左上に表示されたり、検索結果で表示されます。

サイトのオリジナルティが出るので、ブランディング・認知向上や、クリック率の向上につながるメリットがあります。
 

■サイトアイコン(ファビコン)の表示例
サイトアイコンの表示例
 

■PCの検索結果画面や、スマートフォンで検索した時にも表示されます。
サイトアイコン(スマートフォン)
 

サイトアイコンを設定しない場合のデメリット

サイトアイコンを設定しない場合、検索結果でサイトアイコンがWordPressの「W」で表示されることがあります。

■サイトアイコンを設定していない例。WordPressデフォルトのWが表示されている
サイトアイコン WordPressデフォルトのWが表示されている
 
何も知らないサイト訪問者から見ると、サイトと関係ないアイコンが表示されていて混乱させる一因になります。また、WordPressを知っている人からすると、サイトの未完成感やWordPressのテンプレート感が出てしまってといったデメリットがあるので注意しましょう。
 

サイトアイコンを作る方法

サイトアイコンがある場合は簡単に設定ができますが、サイトアイコンがまだない場合は、自身で作ってみましょう。

ここでは、無料のグラフックソフトで「CANVA(キャンバ)」を使う方法や、アイコン素材サイト、スキルシェアマーケット「ココナラ」などをご紹介します。
 

Canvaを利用してサイトアイコンを作成する方法

Canvaとは、無料で利用できるWeb上のデザイン作成ツールです。

画像や図形・テキストを組み合わせて加工して画像化し、Web上に使うロゴ(サイトアイコン)をはじめ、名刺・チラシなどを作成することができます。
Canva トップページ
 

Canvaは、オンラインで使える無料のグラフィックデザインツールです。パソコンのブラウザがあればいつでもデザインが可能です。もちろん、スマートフォンやタブレットなどのモバイル端末のアプリにも対応してます。

2013年にオーストラリアで誕生して以来、2019年現在では世界190カ国で月間2,000万人以上のユーザーによって使われています。Canvaを使えば、今まで敷居の高かったデザインが、簡単にしかも無料で作れます。
(※)Canva公式サイトより引用

 

■デザイン作成ツールCanvaでホームページのロゴ・サイトアイコンを作成する方法(動画解説版)


 

Canvaの詳しい使い方については「無料のデザイン作成ツール Canva(キャンバ)の使い方」で解説していますので、ロゴを自作したい人はあわせてご参考いただけますと幸いです。
 

アイコン素材サイトを利用する

Canvaを利用する他に、フリーのアイコン素材サイトをサイトアイコンに設定することもできます。

アイコン素材に特化した素材サイトで有名なサイトで「icooon mono」があります。

アイコン素材サイト icooon-mono
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト
 

商用利用可能なアイコン素材をフリー(無料)ダウンロードできる素材配布サイトです。

  • 様々なアイコンがダウンロード・利用できる
  • アイコンの色の変更も可能
  • PNG・JPG・SVGなどの形式でダウンロード可能

 

シンプルなものであれば素材サイから利用した画像をサイトアイコンとして利用することができます。
 

ココナラなどでオリジナルロゴを作成依頼する

個人ブログや趣味サイトなどであれば、Canvaやアイコン素材サイトのアイコンでも十分なケースが多いです。

一方、ビジネス用のホームページをはじめ、もう少し差別化したアイコンを使いたい場合は、デザイナーに頼んでオリジナルのアイコンを作成した方が良い場合もあります。

オリジナルのイラストを安価に依頼するならココナラが有名です。

ココナラ トップページ
 

ココナラは、ビジネスからプライベート利用まで、個人のスキルを気軽に売り買いできる日本最大級のスキルマーケットです。

検索フィールドにロゴと検索すると、ロゴ案件が表示されますので試してみてください。
ココナラ ロゴで検索
 

ココナラ公式サイトはこちら
 

(関連)【無料&有料】おすすめイラスト素材サイト・商用利用可
 

まとめ

まとめです。今回は、WordPressでサイトアイコンを設定する方法について、解説しました。

サイトアイコンがない場合、WordPressのデフォルトアイコン「W」が表示されることもあり、見栄えが少し悪くなってしまうので、ぜひサイトアイコンを設定しておきましょう。
 


 

なお、これからWordPressを始めようと考えている人向けに、おすすめのレンタルサーバーを「【おすすめレンタルサーバー比較総まとめ】WordPress対応5社」でご紹介していますので、レンタルサーバーご検討の方はあわせてご参考いただけると幸いです。

 

「業者に任せたけど、更新ができない」「本で独学は時間がかかりすぎる・・」そんなお悩みの方も多いのではないでしょうか。

個別指導形式のスクールでは、自分の知りたいことをピンポイントで学習・達成でき、自分で更新もできるというメリットもあります。
教室の無料事前相談もしておりますので、まずはお気軽にご登録ください。

詳細はこちら

YouTubeチャンネル開設しました!

WEBST8 YouTube Channel 開設
最大月間50万PVの当ブログをベースに、Youtube動画配信にてWordPress、ホームページ作成、ブログのことについてお役立ち情報を随時配信していきます。

ご興味ある方はぜひチャンネル登録をしていただけますと幸いです。


 

『自分で作る選択を』
自分でホームページ作成・Web集客したいホームページ作成スクール・教室

自分でホームページ作成・Web集客したいホームページ作成スクール・教室 WEBST8

おすすめ記事3選

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

【おすすめレンタルサーバー比較総まとめ】WordPress対応5社

国内シェア上位のエックスサーバー、ロリポップ、さくらのレンタルサーバ、およびConoHa WING、mixhostを中心にWordPressおすすめレンタルサーバーを比較・紹介していきます。これからWordPressでホームページやブログを開設するためにレンタルサーバー選びを検討している方はこちらをご覧ください。

【WordPressの始め方総まとめ】ワードプレスブログの作り方9STEP

WordPressの始め方総まとめ

WordPress(ワードプレス)でブログを始めようと思った時に、サーバー・ドメインの手続きなどわからないことだらけで困っているというお悩みをお持ちの方も多いのではないでしょうか。本記事では、WordPressでブログやアフィリエイトを始めたい初心者を対象にWordPressの始め方をご紹介していきます。

【総まとめ】WordPress(ワードプレス)ホームページ作り方

【総まとめ】WordPress(ワードプレス)ホームページ作り方

WordPressでホームページを自作しようと思った際に、「ドメイン?サーバー?たくさん調べることがあって何から手をつけたら良いのかわからない」というかたも多いのではないでしょうか。この記事ではWordPress初心者の方を対象にWordPressでホームページを作る方法をご紹介していきます。

-WordPress