DIVI – LOGO FAVICON

【Divi】ロゴ・ファビコンの設定方法

INTRODUCTION

サイト・ブログのイメージともなるロゴとファビコンの設定方法を説明していきます。

CONTENTS

>> ロゴとファビコンについて

>> ロゴとファビコンの設定方法

>> まとめ

>> デザイン関連記事

*目次をタップで各コンテンツに飛べます

LOGO AND FAVICON

ロゴとファビコンについて

ロゴとファビコンについてそれぞれどのように使われるのかをまずは説明していきます。

ロゴについて

ロゴが使われるのは例えば以下の場合です。

・ヘッダー/フッター

・LP(ランディングページ)のサムネイル

特にデスクトップではヘッダーは常時表示されている場合も多く、ロゴはブランディング的にもかなり重要です。

シェア時に表示されるロゴ

当ブログのロゴはこんな感じです。

設定していない場合デフォルトでDiviのロゴが表示されます。

ブログであれば記事のシェアの方が多いのであまり気にならないかもしれませんが、Webサイトであればマストな設定です。

ファビコンについて

ファビコンは

使われるのは例えば以下のような場合です。

・タブ(Google Chromeなど)

・お気に入りのアイコン

・頻繁に訪れるサイトのアイコン

スマホの利用が増え、ファビコンが表示に使われるケースがだいぶ多くなり重要性が高まっています。

ファビコンの例

当ブログのファビコンはこんな感じ。

シンプルでわかりやすいのが重要ポイントです。

ファビコンを設定していないとWordpressのロゴが表示されます。

この2つはほとんどのWebサイト・ブログで設定されている基本的な設定の一つです。

SET UP

ロゴとファビコン 設定の仕方

今回紹介したストックフォトについてまとめます。

ロゴについて

ロゴの設定の仕方についてです。

ダッシュボード >> Divi >> Theme Option >> Generalタブ

ロゴの設定画面

メニューの一番上に表示されるLogoの画像を更新すればOKです。

更新はすぐ反映されるので、メッセンジャーやLINEなどで自分宛にリンクをシェアして確認してみると良いです。

ファビコンについて

ファビコンの設定の仕方についてです。

ダッシュボード >> Divi >> Theme Customizer >> General Setting >> Site Identity

ファビコンの設定画面

SITE ICONの画像を差し替えれば設定完了です。

ファビコンの変更を反映するには数日かかる場合があります。

Google Search Consoleを利用してサイトをインデックス要求し、変更したことを伝えておきましょう。

MATOME

まとめ

簡単にできるのでこの2つの設定は忘れずにやっておきましょう。

WebサイトのロゴやファビコンはAdobeのIllustratorがあれば自分でも簡単に作成できます。

Diviをまだ購入していないという方はこちらの記事から。

【超簡単】5分でできるDIVIのインストールとセットアップの仕方

Diviの購入からWordpressでのセットアップの仕方までを画像付きでわかりやすく説明しています。

More of DESIGN

デザイン関連記事

デザイン関連の記事をピックアップして紹介します。 併せて読んでみてください。

【2020年版】定番ストックフォト6選を比較検証。おすすめはどれ?

定番のストックフォトを項目別に比較しています。

【初心者も簡単】YouTubeの再生回数を上げるサムネイルの作り方。

サムネイルの作成方法を解説しています。

【動画編集】Premiere ProとAfter Effectsの違い。初心者が知っておきたい6つの特徴について解説。

動画編集で使うPremiere ProとAfter Effectsの違いについて説明しています。

【動画編集】Premiere「Rush」と「Pro」8つの違いと使い方を解説。

Adobeの動画編集アプリPremiere RushとProの違いについて説明しています。

IllustratorとPhotoshopの違いを12の実例で比較。安く使えるセットプランも紹介。

IllustratorとPhotoshopの違いについて説明しています。

【超便利】Adobe Stockとは? 初月無料&利用する5つのメリットを解説。

Adobe Stockを利用するメリットについて書いています。

【2020年版】Adobeのおすすめプランは?7の職業・デザイン別にコンプリートプランユーザーが解説。

Adobeを始める人にどのソフトとプランを使うべきかを書いています。

【無料・有料8選】おすすめフリー素材・画像イラストストックサイト【商用利用可】

無料から有料までオススメの画像サイトをまとめました。

【特典】2ヶ月間無料でAdobe CC・Stockのプランを利用する方法。これから始める方も。

利用しているプランを2ヶ月間無料にする方法について書いています。

【特典】Adobeのプランを2ヶ月無料で利用する方法

既存ユーザーも新規ユーザーも2ヶ月無料でCC/Stockを利用する方法についてです。

【商用利用可】おすすめフリー素材・画像サイト

商用利用もできるフリー素材を入手できるおすすめサイトを紹介しています。

Adobe Photoshopでできる10のこと

Photoshopでできるデザインや機能について解説しています。

【UI/UX】Adobe XDでできる6のこと

Adobe XDでできるデザインや機能について解説しています。

【3D】Adobe Dimensionでできる9のこと

Dimensionでできるデザインや機能について解説しています。

Pin It on Pinterest

Share This