【徹底ガイド】簡単にサイトアイコン(ファビコン)を作成&設定する方法

【徹底ガイド】簡単にサイトアイコン(ファビコン)を作成&設定する方法

この記事では、

ブラウザタブが表示されるやつ、うちのサイトでもやりたい!」
「スマホでブックマークしたときにアイコンが表示されるようにしたい」

という方に向けて、サイトアイコンの作り方と設定方法をわかりやすく説明します。

わたやアイコン
わたや

作成方法だけをすぐに知りたい人は「Canvaでサイトアイコンを作る方法」から読んでね。

サイトアイコン(ファビコン)はこれのこと

タブに表示されるサイトアイコン(ファビコン)

サイトアイコンとはタブに表示される小さな画像のことです。
たくさんタブを開いていても一目でサイトがわかるのでユーザーに優しいサイトを作るうえで欠かせません。

個人ブログでもサイトアイコンを設定しておくと有名サイトっぽい雰囲気に。ブランディング効果があると言われています。

サイトアイコンはブラウザによって必要なサイズが異なり、それぞれのサイズを作成する必要がありました。

しかしワードプレス(WordPress 4.3以降)を使用しているなら512×512pxの画像を用意すればOKです。

サイトアイコンを設定していると、スマホではブックマークにアイコンが表示されます。

 

また、ホーム画面に追加したときにもサイトがわかりやすくなります。

サイトアイコン(ファビコン)を設定する意味

サイトアイコン(ファビコン)を設置しても、直接アクセス数には影響がありません。
ではなぜ設定するのか?理由としては…

  • 複数タブを開いたときにサイトを見つけやすい
  • 「このマークはあのサイト」と覚えてもらえる(ブランディング効果)
  • サイトへの愛着が増す

などが挙げられます。

私はサイトアイコンを設定してからサイトにかける愛が5割増しくらいになりました。

ユーザーとしてサイトを見るときも、サイトアイコンが設定されていると記憶に残りやすいです。

自分のサイトを訪れた人が覚えてくれたら嬉しいよね。

おしゃれなサイトアイコン(ファビコン)はCanvaで作れる

canvaのサイトトップ

引用:Canva

「Canva」は無料・オンラインで使用できる画像作成ツールです。

イラレやフォトショのように使えますが、本格的な画像作成ソフトより機能が少ないので迷いません。ブログのアイキャッチ画像やサイトアイコンの作成など、ちゃちゃっと「それっぽい」画像を作りたいときにぴったりです。

また、テンプレートやイラスト、フォントがたくさんあるのでデザインの知識がなくても大丈夫。
簡単におしゃれな画像が作れます。

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

Canvaは無料登録が必要なので、まずは登録しましょう。
氏名と使用目的を入力→メールアドレスとパスワードを設定すればすぐに使えます。

512×512pxの画像を作る

無料登録してからcanvaにログインすると、「デザインを作成」の下に使えるテンプレートがずらっと出てきます。

サイトアイコンは512×512以上の大きさが必要。これ以上の大きさならどれを選んでも良いのですが、めんどくさいので右側にある「カスタムサイズ」を選んで512×512を入力しましょう。

canvaの操作画面

「カスタムサイズ」をクリックするとボックスが出ます。

canvaの操作画面

数字を入力すると画像作成画面に。

素材を選ぶ

canvaの素材検索

左側の「素材」から欲しいイラストや図形を使用してみてください。
スクロールして欲しい素材を探しても良いですし、画像のように検索もできます。

 

サイトアイコンはわかりやすさが命。
小さくても認識しやすい、シンプルな画像を作りましょう。

線、色数は少なめが◎
はっきりした色使いが◎

canvaでサイトアイコン作り

(でも、「わた屋」のアイコンは線の多い猫です。だって可愛かったからさ…)

文字を入れる

「テキスト」→「テキストボックスの追加」で文字を入力できます。

canvaの操作画面 フォントの変更フォントを変えたい場合はここで変えられます。

canvaでわた屋のサイトアイコンを作る

できた!

所要時間わずか5分!これで完成です。ね、簡単でしょ。

私はどうしてもこの猫を使いたくなってしまったので使ったけど文字だけでも全然OKです。
今並んでいるタブを見てみてください。有名サイトも企業サイトもみんなシンプルですよね。

作成した画像を「パブリッシュ」から保存

canvaのパブリッシュ「パブリッシュ」をクリックすると保存方法を聞いてくるので、「ダウンロード」を選びます。
直訳すると「publish=出版」ですが、IT用語で「取得する」、「エクスポートする」といった意味があります。

わたやアイコン
わたや

なんかかっこいいな。無駄に言いたくなる「パブリッシュ!」

保存形式はPNGにしておくのが無難です。

ワードプレスの「カスタマイズ」でサイトアイコンを設定

ワードプレスのカスタマイズ

設定方法はハイパー簡単です。ログインして「カスタマイズ」を選んで

サイトアイコンをワードプレスのカスタマイズで設定する

画像をアップロードすればOK!
これであなたのブログにサイトアイコンが設定されました。やったー!

タブに表示されるサイトアイコン(ファビコン)

その他のサイトアイコン(ファビコン)作成ツール

アイコン作成ツールはCanva以外にもあります。

favicon.cc …会員登録不要のアイコン作成サイト。ドット絵制作が得意ならおすすめです。

favikon …画像をサイトアイコン用のサイズに変換してくれるサイト。画像作成がめんどくさい人向け。

どれを使っても問題なく作成できるので、お好みで使うサイトを選んでみてください。

サイトアイコンはなくても良いものですが、あるとサイトのイメージアップにつながります。
簡単に作成&設定できるのでやっておいて損はないですよ。この記事がブロガーさん、ライターさんの参考となれば幸いです。

ブロガー・ライターさんにおすすめの記事

集中して仕事を効率化したい→ポモドーロテクニックの実践方法と集中するコツ

クラウドソーシングを攻略したい→ランサーズで「通る」提案文を作ろう!初心者もすぐできる3つのコツ




ゼロからのワードプレスカテゴリの最新記事