ブログ・SEOの話

ブログ用のファビコンの作り方と設定方法。サイズや拡張子、デザイン例も解説

どうも、たくろーです。

今回はブログに設定する「ファビコン」の作り方と設定方法を解説します。

僕は新しくWordPressブログを立ち上げたとき、だいたいタイトルロゴ画像ファビコンはセットで作ります。

意外とブログのアイデンティティに関わる部分でもありますので、ぜひ設定しておきましょう。

簡単な作り方や設定方法、デザイン例まで解説していきます。

ファビコンとは

ファビコンとは、ウェブサイトのアイコン画像のことです。

上の画像のように「タブ」とか「お気に入り一覧」とかで、サイト名の横に表示されている小さい画像ですね。

英語では「Favicon」と書き、語源としては「Favorite icon(お気に入りアイコン)」をもじった造語です。

ちなみにモバイルの検索結果でも表示されるので、結構目立ちます。

ファビコンがモバイル検索結果に表示されている画像URLの横にあって、結構目立つ

ちゃんとブログを運営していくなら、ぜひ設定しておきたいところですね。

ファビコンは設定した方が圧倒的にイケてる

ファビコンはサイトのアイデンティティになりますので、基本的に登録しておくことをお勧めします。

例えばGoogleは特徴的な「G」のマークがファビコンになっていたり、Amazonも見慣れたロゴが設定されていたりと、各サイト結構こだわって設定してるんですよね。

ちなみにファビコンを何も設定していないサイトは、下記のマークになります。

たまに見ますよね。

たくろー
たくろー
別にダメじゃないんですけど、無課金ユーザー感が出ます。

ファビコンがあるだけで「お、ちゃんと運営してるんだな」と思ってもらえたりするので、せっかくブログを運営するならオリジナル画像でファビコンを用意したいところですね。

ファビコンの作り方。適正なサイズや拡張子を解説

ファビコンの作り方。適正なサイズや拡張子を解説

それではファビコンの作り方を解説していきます。

作り方といっても正方形の画像を用意するだけなんですが、ファイル形式(拡張子)やサイズなどは適正なものを作る必要があります。

まずファビコンに使うファイルの拡張子は、代表的なもので3種類あります。

拡張子 拡張子
.jpg 容量を軽くできる。細かいデザインだと、一般的に画像が荒くなることが多い。
.png 画像が鮮明で、背景を透明にできる。一般的には容量が重くなる。
.ico アイコン専用。複数のサイズの画像が一つのファイルに入っており、自動的に適正なものが表示される。

昔(IE5とかの時代)は「.ico」の専用ファイルで用意するのが一般的でした。そうじゃないとブラウザが読み込んでくれなかったからですね。

でも2021年現在では普通の画像ファイルでも読み込んでくれますので、こだわらなければ「jpg」や「png」で十分です。

あとサイズは「512px × 512px以上の正方形」で用意しておけばOKですね。WordPressや、その他無料ブログサービスでは大体このサイズが指定されています。

まとめると、「サイズが512px × 512px で拡張子が.pngの画像ファイル」を用意しておけば万事OKです。

pngさえ用意しておけば、無料の画像圧縮ツールなどで「.jpg」に変換するのは簡単です。

もし「.ico」が必要なら、iconifier.netという無料変換ツールに「.png」のファイルを突っ込めば.icoに変換してくれます。

というわけで、ここではファビコン用に「512px × 512px で拡張子が.pngの画像ファイル」を作る方法をいくつかご紹介しておきます。

アイコンサイトからダウンロードして作る

もっとも簡単なファビコンの作り方は、フリーのアイコンサイトから「512px × 512px」のpng画像をダウンロードする方法です。

ちなみに僕はよくICOOON MONOというサイトを使います。

出典:ICOOON MONO

上記のように色やサイズを好きに設定して正方形のpng画像を無料ダウンロードできますので、ファビコン用に最適ですね。

画像を加工したりするのはめんどくさいという方は、このようなフリーアイコンサイトを利用してみて下さい。

CANVAで作る

画像編集ソフトを持ってないけどオリジナリティのある画像を作りたい方は、web上で無料で画像編集のできるCANVAを使いましょう。

上記の手順で一辺512pxのカンパスサイズを指定して、あとは好きな写真とか文字とかを入れるだけです。

ただ背景を透過させるには有料プランにアップグレードする必要がありますので、そこだけご注意ください。

Photoshopなど画像編集ソフトで作る

僕はいつもPhotoshopで作っていますが、このような画像編集ソフトを使うのがもっとも自由度の高い方法です。

これもカンパスサイズを「512px × 512px」にして、好きな画像を作ってpngで書き出すだけですね。

ちなみにPhotoshopはアドビのクリエイティブクラウドで月額1,000円程度で利用できます。

ブログのアイキャッチ画像とか簡単なグラフとか、自分で作れたらブログ運営が捗りますので、使えるようになっておくことをおすすめします。

ココナラで依頼して作ってもらう

自分で作るのがめんどくさいって人は、ココナラとかで依頼すれば良い感じのファビコンを作ってもらえます。

ココナラで「ファビコン」と検索してみたところ、

  • フリー素材を組み合わせたファビコン:1,000円〜2,000円
  • オリジナルデザインのファビコン:3,000円〜5,000円

このくらいの相場感で作ってもらえることがわかりました。

めんどくさかったら頼んじゃうのも良いと思いますよ。

ファビコンのデザイン例

ファビコンのデザイン例

作り方は分かっても、実際にどんなデザインにすればいいのか悩みますよね。

というわけで、いくつかの種類に分けてファビコンのデザイン例をご紹介しておきます。

サイト名の頭文字をデザインしたファビコン

世の中のサイトを見渡すと、割と「サイト名の頭文字」をとったデザインをファビコンにしているサイトが多いように思います。

例えばGoogleも「G」ですし、Wikipediaも「W」をモチーフにしたファビコンです。

ファビコンはかなり小さいので、あまり凝ったデザインよりもわかりやすいのが好まれますね。

サイトイメージをデザインしたファビコン

サイトのイメージをデザインしたファビコンもあります。

例えば当サイト「北海道ログ」は、サイトカラーと北海道の形をイメージしたアイコンにしています。

たくろー
たくろー
他にも「バッテリー」をモチーフにしたデザインのガジェットサイトとか、サッカーボールをモチーフにしたデザインのサッカー関連のファンサイトとか、探すと色々出てきますよ。

何かサイトのイメージを表現するようなデザインが思いつくなら、オリジナルデザインを作ってみて下さい。

サイトのトレードマークをそのままファビコンに

「自分のサイトのトレードマークはこれ!」というのが決まってるなら、そのデザインをそのままファビコンにするのがもっとも良いですね。

例えばTwitterとかだと、トレードマークである青い鳥がファビコンになっています。インスタグラムも、あのぐるぐるしたトレードマークのアイコンがそのままファビコンになってますね。

何か「これだ!」というトレードマークがあるなら、ぜひそれをそのままファビコンにすることをおすすめします。

ブログにファビコンを設定する方法

ブログにファビコンを設定する方法

では実際に用意したファビコンのファイルをブログに設定する方法をご紹介しておきます。

「WordPress」と「HTML直書きで作ったサイト」、あるいは「各種ブログサービス」ごとに設定方法が変わってきますので、それぞれご紹介しておきます。

WordPressで簡単にファビコンを設定する方法

WordPressでファビコンを設定するには、

「外観→カスタマイズ→サイト基本設定→サイトアイコン」

と進んで「画像を変更」するだけです。普通にアップロードして設定しましょう。

jpgやpngといった拡張子の、いわゆる「普通の画像ファイル」を使用するのが一般的です。

ちなみにWordPressはデフォルトで「.jpg」か「.png」しか画像ファイルをアップロードできないセキュリティ設定になっています。

「.ico」をアップロードしたいときは、一度セキュリティ設定を変更しましょう。

※ミスすると画面が表示されなくなったりする可能性がありますので、バックアップを取った上で自己責任でお願いします。

wp-config.phpの最下部に

define(‘ALLOW_UNFILTERED_UPLOADS’, true);

と追加すればどんな形式のファイルでもアップロードできるようになりますので、一時的に設定して.icoファイルをアップロードして、また元に戻しておきましょう。

(常にどんなファイルでもアップロードできるようにしておくのは、セキュリティ的にあまり良くありません)

head内に記述してファビコンを設定する方法

head内に下記のように記述することで、ファビコンを設定できます。

<link rel=”icon” href=“/image/favicon.ico”>

これがデフォルトの記述で、もちろん「favicon.ico」の部分を別のファイル名に変えてもOKです。

はてなブログでファビコンを設定する方法

ブログサービスを代表して、はてなブログでファビコンを設定する方法も解説しておきます。

「ダッシュボード→設定→基本設定→ブログアイコン」と進み、ファイルをアップロードするだけですね。

.icoファイルには対応しておらず、.JPGと.PNGファイルにのみ対応しています。

他のブログサービスだと、例えばnoteだったらpro版にすればファビコンを設定できたりしますので、各ブログサービスのマニュアルを参照してみて下さい。

ファビコンを設定してオリジナリティを出そう

ファビコンを設定しておけば、ちょっとしたサイトの信頼性に繋がります。

逆にデフォルトのファビコンだと「無課金ユーザー感」が出ちゃいますので、基本的には何か登録しておくと良いですね。

面倒ならフリーサイコンサイトのもので全然良いと思いますので、まずは一度設定してみて下さい。

WordPress(ワードプレス)ブログの始め方。コノハウイングなら15分でOKどうも、たくろーです。 今回は「WordPress(ワードプレス)ブログの始め方」を、初心者向けに「そもそもWordPressって...
ABOUT ME
たくろー(WEBライター)
ブログ飯を達成しましたが、好きでサラリーマンをしています。 家ではブロガーをしつつ、企業オウンドメディアの編集長やwebライティング講師として活動。以前はブラックなアパレル企業で「人事」や「エリアマネージャー」を経験。「一つの会社とか収入源に依存しない働き方がいいよね」というスタンスです。下記URLより詳しいプロフィールもご覧ください。
30秒でOK!退職代行診断チャート

30秒診断

あなたにピッタリな退職代行は?

簡単な質問に答えるだけで、あなたの状況に合った退職代行がわかります。

Q3:有給は使いたいですか?

Q3:パワハラやセクハラを受けていますか?

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。24時間365日対応で、有給も全て使って即日退職できます。
25,000円ポッキリ相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
【評判ヤバい】退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。会社と交渉する法的な権利があるので、安心して即日退職できます。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
【評判ヤバい】退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス

診断結果

あなたにおすすめの退職代行は

退職代行SARABA(サラバ)です。

退職代行SARABA(サラバ)は、労働組合の退職代行。有給も全て使って即日退職できます。
実はパワハラやセクハラなどの具体的な被害が無い場合は、弁護士に頼んでも賠償請求は難しいかもしれません。
そんな会社に時間を割くくらいなら、弁護士よりリーズナブルな「労働組合」のサービスでスッキリ辞めましょう。
25,000円ポッキリと相場以下の価格で、安心して辞められますよ。

\CHECK NOW/

まずは無料で、24時間対応のLINE相談から
公式サイトから無料相談する退職代行SARABA公式サイトにジャンプします

退職代行SARABA(サラバ)の口コミ・評判。レス速度が超早い安心サービス
【評判ヤバい】退職代行SARABA(サラバ)の口コミ体験談を徹底調査どうも、たくろーです。 今回は退職代行SARABA(サラバ)を使った人の口コミや体験談を調査してわかった評判をお伝えしていきます。...

もう一度診断する

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス

診断結果

あなたにおすすめの退職代行は

「弁護士法人みやび」です。

弁護士法人みやびは、その名の通り弁護士の退職代行。有給が全部使えるように交渉してもらえて、とにかく安心して辞められます。
料金は50,000円ポッキリと労働組合のサービスより高くはなりますが、その分「弁護士」というネームでトラブルのリスクなく辞められるでしょう。

お金よりも「安心」を取りたいあなたは、弁護士法人みやびで決まりです。

\CHECK NOW/

まずはLINEで無料相談から
さっそく無料相談する弁護士法人みやび公式サイトにジャンプします

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス
【ヤバい】弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービスどうも、たくろーです。 今回は退職代行サービスを展開している「弁護士法人みやび」の評判や実績を調査しました。 結論として、と...

もう一度診断する

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス

診断結果

あなたにおすすめの退職代行は

「弁護士法人みやび」です。

弁護士法人みやびは、その名の通り弁護士の退職代行。有給だって全て消化できるのはもちろん、損害賠償請求までお願いできます。
退職代行自体の料金は50,000円ポッキリ。それに加えて賠償請求は「成果の20%」の成果報酬でお願いできるシステム。

損害賠償請求までお願いしたいあなたは、弁護士法人みやびで決まりです。

\CHECK NOW/

まずはLINEで無料相談から
さっそく無料相談する弁護士法人みやび公式サイトにジャンプします

弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービス
【ヤバい】弁護士法人みやびの口コミ・評判を調査。料金が明朗で使いやすいサービスどうも、たくろーです。 今回は退職代行サービスを展開している「弁護士法人みやび」の評判や実績を調査しました。 結論として、と...

もう一度診断する

診断結果

あなたにおすすめの退職代行は

「退職代行J-NEXT」です。

J-NEXTは普通の会社が運営する退職代行なので、有休消化などはお願いできません。
とにかく20,000円ポッキリという料金が魅力で、退職代行業界の中でもトップクラスの格安サービスです。

安心よりも「料金」を取りたいあなたは、退職代行J-NEXTに相談してみて下さい。

\CHECK NOW/

J-NEXTならとにかく安く辞められる
さっそく無料相談する

退職代行J-NEXTの口コミ・評判。20,000円ポッキリで即日退職!退職代行J-NEXTは、退職代行業界最安水準の20,000円ポッキリの価格がウリ。さらに、同価格帯のサービスと比べると圧倒的にサポートが...

もう一度診断する