【Cocoonカスタマイズ】サイトアイコン(ファビコン)を作って設定しよう

Cocoon

こんにちは。BEGINNER NET(ビギナーネット)のいけだです。
今回は、サイトアイコン(ファビコン)がテーマです。

画像ソフトをお持ちでない方でもサイトアイコンが作れるように、今回はWindowsのアクセサリ「ペイント」を使って画像を制作し、WordPressのテーマ「Cocoon」でサイトアイコンを設定する、初心者向けのやり方を解説します!

サイトアイコン(ファビコン)とは?

サイトアイコンとは、これ。

これがサイトアイコン

インターネットでページを表示したときに、タブの横に表示されるアイコンのことです。

Cocoonでは、このサイトアイコンを設定していないと、この↑一番右のCocoonのサイトアイコンが表示されてしまいます。

 

・・・もったいない!!!

 

サイトアイコンはタブの横だけでなく「ブラウザのブックマーク」「スマホのアイコン」としても利用される、いわばサイトの目印のようなものです。

ウェブサイトの体裁を整えるときには、ぜひサイトアイコンも設定しておきましょう!

サイトアイコン(ファビコン)を作ろう

制作時のポイント

サイトアイコンを作るときのデザインのポイントは、「シンプル」にすること!
表示されるサイズがとても小さいので、複雑なデザインにしても見にくくなってしまうんですね。

アルファベット1~2文字や、シンプルなマーク、ロゴなどにすることが多いです。
制作する前に、いろいろなウェブサイトを見て参考にしてみるといいですね。

制作する画像サイズは?

Cocoonではサイトアイコンの設定がとても簡単にできるようになっていて、512×512ピクセル以上の正方形の画像を1枚設定すればOKなんです。

この1枚の大きさの画像を設定するだけで、タブの横やスマホ画面のアイコンなど、いろいろなサイズのサイトアイコンに勝手に対応してくれます。

設定の仕方はいろいろありますが、今回は一番簡単なやり方をご説明したいので、512×512ピクセルの画像を用意する方法で進めていきます。

「ペイント」を使ってサイトアイコンを作ろう

どうやって作るの?ということですが、Photoshopなどの画像編集ソフトをお持ちの方は、そちらを利用して作られた方がよいと思います。

今回は、画像編集ソフトがない方のために、Windowsのアクセサリに入っている「ペイント」を使ってサイトアイコンを作る方法をお伝えします。

 

▼まず、ペイントを立ち上げるとこんな画面が表示されます。
ペイントを立ち上げたときの初期画面

512×512ピクセルの画像を作りたいので、サイズを変更しましょう。

 

右下の隅っこをドラッグして引っ張ります。
下に表示されているサイズが【512 x 512px】になればOKです。
(512以上の正方形であれば多少大きくてもOKです。)

サイズを調整します

 

サイズが設定できれば、あとはこの枠をはみ出さないようにイラストを描いていきます。
とにかく見やすく、単純なものの方がよいので難しく考えなくて大丈夫です。
あとから何度でも変更することができるので、とりあえず一度作って設定してみましょう。

 

今回は、背景を塗りつぶして、星の図形を使って絵を描いてみました。

星の絵を描きました

 

絵が描けたら、画像として保存しましょう。
【ファイル】→【名前をつけて保存】→【JPEG画像(J)】でわかりやすい名前をつけて保存しましょう。

画像として保存する

WEBに使用するものは、基本的にはアルファベットで名前をつける方がエラーになりにくく、おすすめです。

 

▼保存した画像を開くとこんな感じ。

保存した画像を開くとこうなる

少し画像が荒く感じますが、大丈夫です。
小さくなって表示されるので、画像の粗さは全く気になりません。

サイトアイコン(ファビコン)を設定しよう

それでは、制作した画像をサイトアイコンとして設定しましょう。

ダッシュボードにログインし、【外観】→【カスタマイズ】をクリック。

【外観】→【カスタマイズ】をクリック。

 

次に、【サイト基本情報】をクリック。

【サイト基本情報】をクリック。

 

すると、「サイトアイコン」の文字が!
【画像を選択】をクリックします。

【画像を選択】をクリック

 

先程作った画像が表示されました!

表示された

 

間違えがなければ、【公開】をクリックします。

公開をクリック

 

これで設定は完了です!
ウェブ上で正しく表示されているか、確認してみましょう。

URLを入力して…

Web上で確認しよう

できました!

ちなみに、スマートフォンなどで【ホーム画面に追加】をすると、このようなアイコンとして表示されます。

スマホのホーム画面に追加されるとこうなる

 

いかがでしたか?
今回はCocoonでサイトアイコンを設定する、簡単な方法をご紹介しました。

ぜひみなさんもやってみてくださいね。