サイトアイコンの作成はフリーソフトでOK!wordpressの設定方法

ブログ運営

自分のブログやホームページをお持ちの皆さん。

サイトアイコン設定していますか?

サイトアイコンとは、メニューバーに出てくるコレ↓のこと。

ファビコン
サイトアイコン

通称は「ファビコン」と言います。

ファビコンは、お気に入り(favorite)に登録したときに表示されるアイコン(icon)を意味する

favorite icon(フェイバリット・アイコン)が名前の由来です。

このサイトアイコンは、この画像のようにメニューバーにも使用されますし、

お気に入りにURLを登録した時にも使用されます。

何も設定しないとそれぞれサーバーのデフォルトアイコンだったり、

WordPressテーマのデフォルト画像が入ってしまい、

同じテーマを使用している人と、アイコンが被ってしまいます。

オリジナルのアイコンをまだ設定していない方は、是非設定しておきましょう!

オリジナルファビコン
当ブロブのサイトアイコン
この記事で解説すること

・サイトアイコンを作成するメリット
・サイトアイコンのデザイン
・サイトアイコンの作成方法と設定方法

スポンサーリンク

サイトアイコンを作成するメリット

オリジナルのサイトアイコンを作成すると、

他のサイトとの差別化にもつながり、自分サイトのブランディングを高めることが出来ます。

インターネットで検索をしながら作業をしていると、
沢山のブラウザタブが開きっぱなしになりがちです。

目立つファビコンを設置しておくと、一目でそのサイトが何のサイトかが分かるようになります。

スポンサーリンク

サイトアイコンのデザイン

サイトアイコンは非常に小さな表示ですので、デザインもシンプルにしたほうがいいです。

あまり細かいデザインは見えません!

また、サイトアイコンのデザインは正方形である必要があります。

もう少し具体的にいうと、48 pxの倍数であればOKです。
(例: 48px x 48px、96px x 96px、144px x 144pxなど)

スポンサーリンク

サイトアイコンをフリーソフトで作成する方法

サイトアイコンは無料のフリーソフトで簡単に作成することが出来ます。

ちなみに、Cocoonでは、48 pxの倍数ではありませんが

512px×512pxのPNG画像を設定することを推奨されているので

今回は、512×512サイズのアイコンをフリーソフトで作っていきます。

tsen
tsen

今回は、2種類のフリーソフトを紹介します!

ICOON MONOは、種類が豊富でサイト上で色が自由に変えられるとっても便利なサイトです。

アイコン作成サイト
ICOONMONO


例えば、私と同じような万年筆のアイコンをクリックすると、編集画面が出てきますので

size部分を512pxと指定し、色は、colorという部分をクリックすると変更できます。

アイコンモノ
512pxサイス指定が可能

設定が完了したら、PNG形式でダウンロードして終了です。

tsen
tsen

気に入ったアイコンがない!という方は以下のサイトもおすすめです。

Icon Monstr

こちらも、フリーソフトですが、3,500個以上ものアイコンが用意されています。

最大で240 pxサイズまで設定が可能です。

アイコンの背景は透明な状態でダウンロードされるので

背景に色を付けたい場合は、ペイントで背景を塗りつぶします。

アイコンをペイントで開き、塗りつぶしマークをおして

背景の白い部分でクリックすると塗りつぶすことが出来ますよ

塗りつぶし
塗りつぶし

wordpressへのサイトアイコン設定方法

お気に入りのアイコンが作成出来たら、wordpressに設定していきます。

WordPress管理画面を開いて、「外観→テーマカスタマイザー」を選択します。

「サイト基本情報」設定項目から「サイトアイコン」を設定後、

「公開」ボタンを押したらOKです!

Cocconの場合は公式サイトに詳しく記載がありますので、こちらもご参照ください。

ホームページへのサイトアイコン設定方法

WordPressではなく、通常のhtmlホームページへの

サイトアイコン設定方法についても解説しておきます。

ファビコン favicon.icoを作ろう!というサイトに画像をアップするだけで、

無料で簡単にファビコン画像に変換できます。

まず、準備した画像(pngファイル等)をファビコン favicon.icoを作ろう!にアップします。

そうすると、ファビコンデータ(.ico)がダウンロードできます。

出来上がったファビコンデータをサーバーにアップします。

サイトのヘッダーに次のタグを追加します。

<link rel="shortcut icon" href="http://www.~/略/favicon.ico">

※http://以下の部分は、ファビコンデータの絶対パスを入れましょう。

これで完了です。

サイトアイコンの作り方と設定方法まとめ

サイトアイコンは、

「ブラウザのブックマーク」や、「スマホのアイコン」にも使用されるので

デフォルトのサイトアイコン設定のままだともったいないですし

自分だけのオリジナルサイトアイコンを作ると、ブログに愛着がわきますし、

ユーザーが一目でサイトのブランドを識別でき、印象に残りやすくなります。

まだサイトアイコンを設定していない方は是非設定してみてください。

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