【ブログ初心者】ファビコンを設置してオリジナリティを上げよう
どうもメーカー営業マン(@makereigyouman)です。
今回はブログカスタマイズについての記事です。
突然ですが皆さん、「ファビコン」ってご存知ですか？
ファビコンはブログの顔とも言える部分ですので、ぜひカスタマイズして設定してみてください。
では設定方法について解説していきます。
目次
ファビコンとは？
そもそもファビコンとはなにかと言うと、閲覧中のタブやスマホ検索時に表示されるアイコンのことですね。
ちなみに当ブログでもファビコンを設定しています。
地味に読みにくいですが、ブログ解説当初に作ったM営業Mというマークになっています。
これはかなり適当に作ったファビコンですね。
このアイコンの意味は文字通りメーカー（M）営業マン（M）です笑
ファビコンの効果
このファビコンですが、一見のただのデザインの一つにしか過ぎないかと思いますが、結構大きな効果をもたらします。
このファビコンを設置することで、瞬時のどこのサイトかを判断することが可能となりリピーター対策となります。
更に、自身のブログ（サイト）のブランディング構築にもなり得るのです。
ブックマークした際にも表示されますから、必須の要素と言えます。
ワードプレスの初期ファビコン
ワードプレスでブログを開設した場合、なにもしていない状態では↓画像のようなファビコンとなっています。
この状態だと正直なんか味気ないですよね。
ブログ初心者の方にはこの状態でしばらく放置している方が多いです。
自分のブログという意味でもこのファビコンを設定してみましょう。
ファビコンの設定方法
前置きが長くなりましたが、早速ファビコンの設定方法を解説していきます。
ファビコンの準備
まずはファビコンの作成から始めましょう。
画像は基本的に正四角形です。
サイズの以下の通りとなります。
- 16×16
- 32×32
- 36×36
- 48×48
- 72×72
- 96×96
- 128×128
- 144×144
- 180×180
- 192×192
- 256×256
- 384×384
- 512×512
任意のサイズでいいと思いますが、あまり小さすぎても画像が粗くなってしまいますので、できれば100ピクセル以上が理想です。
ちなみに私は128×128サイズのファビコンを使っています。
ファビコンの対応フォーマットは以下。
- png
- gif
- ico
上記3種類がベーシックです。
ただ、pngやgifがブラウザによっては表示されないものがあるらしいですので、icoがオススメです。
まあ使用されるブラウザのほとんどがGoogle Chrome、Edge、IE、Safariでしょうからそこまで気にする必要はありませんけどね。
任意の画像を用意したら、上記ファビコンサイズにリサイズしてください。
フォーマットの変換は画像編集ソフトからでもいいですが、こちらの「アイコンコンバータ」から手軽に変換可能です。
また、背景を透明したい場合はJTrimやGimpなどのソフトを使って透明化してください。
背景が単色であれば、こちらのサイトで透明化は可能かと思います。
透明化した方がすっきりとしたファビコンになるのでオススメです。
ファビコンの設定（ワードプレス）
続いてワードプレス内からファビコンを設定していきます。
が、テーマを使用している場合はそのテーマ毎で設定方法が変わってきますので、別途ご自身でお調べください。
私が使用しているテーマ「Luxeritas」ではダッシュボード＞外観＞カスタマイズ＞サイト情報／サイトアイコンから設定できました。
他のテーマでも似たような形で設定できると思います。
テーマファイルの編集から設定する方法
少し面倒ではありますが、テーマファイルの編集からでもファビコンを設定できます。
※テーマファイルの編集はリスクが高いですので、極力他の方法で設定してください。
まずは作成したファビコンファイルをアップロードします。
メディアのアップロード画面からファイルをアップロードしてください。
ファビコンのファイル名は分かりやすいように「favicon.ico」とかでいいと思います。
次にアップロードしたファイルのURLをコピーしておきます。
ダッシュボード＞メディア＞ライブラリへ移動し、先程アップロードしたファビコンファイルのURLをコピーします。
URLのコピーをしたら、次にテーマファイルの編集を行っていきます。
ダッシュボード＞外観＞テーマエディター（テーマ編集）へ移動。
テーマ編集画面＞テーマファイル＞header.phpを編集します。
ソースコードが表示されますので、</head>を探します。
headタグ内に以下ソースコードを追記します。（※headタグ内ですので、</head>の上です。）
<linkrel="shortcut icon"href="あなたのファビコン画像のURL">
「あなたのファビコン画像のURL」部分には先程コピーしたURLを追記してください。
次に「ファイルを更新」ボタンを押し、テーマファイルの編集を完了してください。
これでファビコンが設定されているはずです。
ファビコンの設定は簡単ですし、多大な効果をもたらしますのでぜひ設定してみてください。
↓応援クリック励みになります！！
