【SWELL実録／ファビコン設定】デザインセンス不要！「ChatGPT×Canva」でロゴ画像を作成

2025年10月27日

「ブログにオリジナルの“顔”をつけたい」

そんな思いから、SWELL (WordPressテーマ)を使ったサイトにファビコン（サイトアイコン）を設定しました。

今回の内容も決して難しくないです。
（AIにお手伝いしてもらいます）
まだファビコンを設定されていない方はぜひ最後までお付き合いください。

ファビコンとは

ブラウザのタブやスマホのホーム画面に表示される小さなアイコン
（今回作成：画像左下）
┗ 地味ですが、ブランディング効果や信頼感を高める効果あり

デフォルトでは画像(右下)のようにWordPressのロゴが表示されます。

この記事の目的

ChatGPTとCanvaを使って「SWELLテーマ」にファビコンを設定する手順を、実際の作業画像とともに解説します。

各ツールの役割分担

ChatGPT：デザインの方向性策定・素材作成

Canva：デザイン調整・画像データ出力

デザインが苦手でもAIに相談すればOK。
様々なヒントをくれます！

完成したファビコン（デザイン）

私はデザインセンスがないので、ChatGPTに相談して方向性を決めました。

構成イメージ

“Z” を鏡面（左右反転）で左右に2つ置き、重なり合う部分にアクセント色を
「裏側（裏返し）」を視覚化
ブログで語られる“舞台裏”を象徴
表Z＝成果／裏Z＝過程を表す

ロゴ画像を「ChatGPT×Canva」で作成する手順

① ChatGPTでロゴの方向性を相談

アイディアが沸かないならAIの活用がオススメ。

(私を含め) 多くの方にとって、デザインに時間をかけすぎるのは「ブログで稼ぐ」ためには非効率。

まずはChatGPTに

（何となくでも、イメージとともに）
「このサイトのファビコンのデザインを考えて画像で出して。（URL）」

みたいな感じで言ってみると良いかと。

そこから議論していくと、デザインの方向性が徐々に固まるかと思います。

一応おいておきます

【参考】私が作ったChatGPTと一緒に作った
「ファビコン作成用のプロンプト」
※クリックで開きます

あなたは、ブランド・サイトの世界観を的確に表現する「ファビコンデザイン設計アシスタント」です。
以下の情報をもとに、サイトの印象に合うファビコン案を3種類提案してください。

【入力情報】
・サイトURL：【実際に入力】
・サイト名【実際に入力】
・テーマや配色（サイトから読み取り）
・目的：ブロガー／個人ブランドとして印象的で覚えやすいファビコンを作りたい

【出力フォーマット】

🔹 ファビコン案①（コンセプト＋配色＋形）

デザインコンセプト（例：「成長と発信」「Zをモチーフにしたミニマルロゴ」など）
配色（メインカラー・アクセントカラーのHEX値）
図形・アイコンモチーフ（例：Z文字／吹き出し／稲妻など）
推奨サイズ（例：512×512px、透過PNG）
Canvaで作る場合の手順（背景・文字・エフェクトなど）

🔹 ファビコン案②

（上記と同形式）

🔹 ファビコン案③

（上記と同形式）

最後に：
・WordPress(SWELL)で設定する手順（管理画面→外観→カスタマイズ→サイト基本情報→サイトアイコン）
を簡潔に案内してください。

上記プロンプトで出た回答に対し

「実際に画像で生成してみて」を言ってみるのが個人的にオススメ。

┗ イマイチな画像が出たら、指示を追加して調整してください

ChatGPTと練ったデザインはPNG形式(背景透過)でダウンロードして、Canva(次の工程)で使うと作業がラクです。

② Canvaでロゴをデザイン&調整

使用ツール：Canva（無料プランでもOK）
サイズ：512×512px（SWELL推奨サイズ）

作成手順

Canvaで「512×512px」の新規デザインを開く
ChatGPTで作った素材を配置
必要に応じ素材等を追加
「素材の色」や「背景の色」、「影」などを調整
完成

③ ファビコン用に最適化して保存

サイズ：512×512px
ファイル形式：PNG
背景：透過または淡色
ファイル名例：favicon.png

SWELLでファビコンを設定する手順（実録）

ここからは、WordPress (SWELL)の設定操作です。
初めての方でも、5分もあればできます

① 外観 → カスタマイズを開く

「外観」→「カスタマイズ」

② WordPress設定 → サイト基本情報

「WordPress設定」

「サイト基本情報」 をクリック

③ ファビコン画像をアップロード

「サイトアイコンを選択」をクリック
Canvaで作成した512×512pxの画像をアップロード
プレビューで角丸を確認し、「公開」 をクリック

これで設定完了です

④ 反映確認（表示チェック）

設定後の確認ポイント

ブラウザのタブにアイコンが表示されているか
スマホのホーム画面で反映されているか
Google検索結果のファビコンが変わったか

Google検索への反映は時間がかかる場合があります。

よくある質問と注意点

ファビコンが反映されないとき

以下を試すと改善する場合があります。

キャッシュ削除（Ctrl＋F5）
サイトアイコンを再アップロード
画像サイズが512×512pxか確認

キャッシュ系プラグインを使っていると、
反映が遅れることがあります。

まとめ

今回の流れを改めてざっと整理します。

ChatGPTでロゴの方向性を決める
Canvaで512×512pxのロゴを作成
SWELLでファビコン設定
表示確認をして完了

ファビコンを設定するだけで、サイトの所有感が高まります。

ChatGPT × Canva × SWELL でデザイン初心者でも、短時間でブランド感を高められると思うので、是非お試しください。

といったところで、今回はこの辺りで。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

【SWELL実録】ヘッダーを画像化して印象アップ！設定手順も紹介

この記事を書いた人

Z家パパ

富山県在住の30代、2児の父。
ブログで月収7桁を複数回達成。
「ツタエル富山～Z家の日常～」を運営。
2024.3に脱サラしました。