\ 主婦におすすめ!かんたん在宅ワーク4選 /

【Cocoonカスタマイズ】5分で完了!サイトアイコン(ファビコン)の作り方と設定方法

ブログ
ブログ

ブログ歴2ヶ月の転勤妻みなみ(@tenmina31)です。

WordPressテーマ「Cocoon」愛用中のみなさん、
サイトアイコン(ファビコン)の設定はお済みでしょうか?

ブラウザのページタブやお気に入りリスト、ブログカード等のサイト名左側に表示されるアイコンのこと。

赤丸で囲われているのがファビコン(favicon)です

未設定の場合は、テーマ初期設定のアイコン(白い繭)です。

このサイトアイコン。
初期設定のままの人を結構見かけますが、オリジナルに変えるだけで下記のメリットがあります。

  • ページタブの中で目立つ
  • スマホのGoogle検索結果の中で目立つ
  • 一度訪問したユーザーに覚えてもらいやすい
みなみ
みなみ

メリット沢山!
ブログ開設後の早いうちに設定しておきたい…!

しかし、ネット上で「WordPress ファビコン設定方法」と検索すると・・・

検索結果
検索結果

専用のプラグインをインストールしましょう

検索結果
検索結果

テーマファイルのHTMLを編集しましょう

検索結果
検索結果

様々なブラウザに対応するため、5種類のサイズを用意しましょう

みなみ
みなみ

なんだか難しそう・・・

でもテーマ「Cocoon」では、簡単にサイトアイコン(ファビコン)の設定ができるのです!
※プラグイン不要!HTMLの編集不要!サイズ1種類でOK!

フリー素材サイトのアイコンをそのまま使う場合は、5分で設定できちゃいます。

この記事では、サイトアイコンの作り方と「Cocoon」での設定方法についてご紹介します。

スポンサーリンク

サイトアイコン(ファビコン)を用意する

ファビコンを用意する方法は大きく2つあります。

  1. フリー素材サイトからダウンロードする
    (5分でOK!)
  2. オンラインツール「Canva」で自作する
    (10分でOK!)

お好きな方を選択ください。

みなみ
みなみ

私はもともと「フリー素材サイト」のアイコンをそのまま使用していたのですが、この記事作成を機にオリジナルアイコンに変更しました!
※オリジナルといっても素材アイコンを組み合わせただけですが…

①フリー素材サイトからダウンロードする方法

フリーのアイコン素材サイトからダウンロードする方法です。

ヘッダーロゴの素材でもお世話になっている、icon-rainbow』さんでのダウンロード方法をご紹介します。

商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』 « カラフルな商用利用可能なアイコン素材を無料でダウンロード!! 商用可の無料(フリー)のアイコン素材をダウンロードできるサイト『icon rainbow』
商用利用可能な無料のアイコンをすぐにダウンロードできるアイコン素材配布サイトです。
アイコンダウンロード方法
  1. お好きなアイコンを探す
  2. 「size」:512pxを指定
  3. 「color」:お好きな色を選択
    ※16進数のカラーコード(#000000)での指定もできます
  4. 「Download file」:「PNG」形式を指定
  5. ダウンロードする
みなみ
みなみ

お好きなアイコンとカラーを選ぶだけ!
ダウンロードデータをそのままサイトアイコンに設定すればOKです。

こちらのフリー素材サイトさんもおすすめです
FLAT ICON DESIGN -フラットアイコンデザイン-
フラットデザインに最適!WEBサイトやDTPですぐ使える商用利用可能なフラットアイコン素材がフリー(無料)ダウンロードできるサイト『FLAT ICON DESIGN』
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO
6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO

テーマ「Cocoon」のサイトアイコンは、サイズ512×512px以上png形式が推奨されています。
サイズや形式に注意してダウンロードしましょう。

②オンラインツール「Canva」で自作する方法

無料オンラインデザインツール「Canvaを使って、オリジナルのファビコンを作ることもできます。

「Canva」とは?
  • 多くのブロガーさんがアイキャッチ画像等の作成に使う有名ツール。
  • Googleアカウント連携で簡単に登録できます。
  • パソコン、スマホどちらでも操作OK。
  • 一部機能は有料ですが、無料の範囲内でアイコンを作成できます。

Canvaのホーム右上の「デザインを作成」⇒「カスタムサイズ」で画像サイズを指定します。

ファビコンのサイズは、512×512px以上の正方形サイズにしましょう。

ファビコンのデザインは、下記のようなものが多いです。

  • アイコン素材をつかったもの
  • サイトタイトルの一字を大きくしたもの

例①

※先ほど紹介したicon-rainbow』さんからアイコン素材をお借りしました。

例②

作るときに注意するポイントとして、ファビコンはかなり小さいサイズ(16×16px 等)で表示されるので「複雑なデザインは避ける」ようにしましょう。

完成したら、Canva画面右上の「ダウンロード」ボタンから「png」形式で画像データを保存します。

Canvaでは、背景透過機能は有料オプションです。
背景透過したい場合は、別のオンラインツールを利用しましょう。

私は、PECO STEPさんでサイトアイコンの背景を透過しました。

スポンサーリンク

Cocoonでのサイトアイコン(ファビコン)設定方法

「外観」⇒「カスタマイズ」⇒「サイト基本情報」⇒「サイトアイコン」で設定できます。

サイトアイコンの設定方法は、わいひらさんの「Cocoon」公式サイトがとっても分かりやすかったです。

サイトアイコンを設定する方法(ファビコン、アップルタッチアイコン等の設定)
テーマ用のファビコン、アップルタッチアイコン、マイクロソフトメトロスタイルの、タイル表示に使用するアイコンの設定です。

こちらを参考にすれば、すぐに設定完了です!

みなみ
みなみ

「Cocoon」は機能もマニュアルも充実しすぎていて、本当に無料でいいのか心配になります…!

アイコンの反映には時間がかかります。
特に、スマホのお気に入りリストやスマホ検索結果への反映には数日掛かりました。
また、キャッシュが残っていると変更前のアイコンが表示されることもあります。

まとめ:Cocoonならファビコン設定は簡単!気軽にトライ!

テーマ「Cocoon」なら本当に簡単にサイトアイコンの設定ができちゃいます!

無料アイコンをそのまま登録すれば5分でOKです。

少し余談になりますが、ブログを始めてすぐの私は簡単に設定できることを知らず、とっても無駄な頑張り(↓)をしていました。

1ヶ月前のみなみ
1ヶ月前のみなみ

ファビコン用のプラグインをインストールして…
様々なブラウザ用のサイズに変換して…
でもなんか上手くいかないぞ…?

Cocoonテーマを愛用されている方・・・

サイトカスタマイズを始めるときは必ず「Cocoon 〇〇〇(カスタマイズしたい内容)」で一度ネット検索をしましょう!

Cocoonでは、ブログに必要な機能の多くをプラグイン不要で利用できます。
(ファビコン設定、目次、SEO対策、高速化等…)

また、Cocoon愛用ブロガーさんがたくさんいらっしゃるおかげで、カスタマイズの方法もネット上でたくさん紹介されています。

みなみ
みなみ

思った以上に簡単にカスタマイズできることが多いので、是非気軽にブログカスタマイズを楽しんでみてください♪

コメント

タイトルとURLをコピーしました