Webサイト・ブログ

ファビコンを無料で作る方法と設置方法を解説

アイキャッチ画像

Webサイトやブログを見ているときに、ブラウザのタブに表示されている「ファビコン」。実は、Photoshopやillustratorなどの高機能ソフトが無くても、無料で簡単に作ることができます。

今回は、「ファビコンを無料で作る方法と設置方法」を分かりやすく解説していきます。

ファビコンを無料で作る方法

ここでは、ファビコンをicoファイルで作る方法を解説していきます。

ファビコン有のサイト

ファビコンは、icoファイルの他にpngファイルやgifファイルでも設置することはできますが、ファビコンのサイズを自由に設定できない、古いIEブラウザでは対応していないなどのデメリットがあります。

特にこだわりが無ければ、オーソドックスなicoファイル作ることをオススメします。

ファビコンを無料で作る方法は、以下の手順で行います。

無料ペイントソフトでイラストを作成する

無料でicoファイルに変換できるツール「X Icon editor」を使う

無料ペイントソフトでイラストを作成する

ここでは一例として、Windows10の標準アプリ「ペイント3D」におけるファビコン画像を作っていきます。

1.「ペイント3D」を起動します。

Windows10 ペイント3D

2.イラストを描きます。ここでは一例として、音符のイラストを描いてみました。

Windows10 ペイント3Dでファビコンのイラストを作成

3.「メニュー」をクリックします。

Windows10 ペイント3D メニューアイコン

4.「名前を付けて保存」をクリックします。

Windows10 ペイント3D 開くメニュー

5.「画像」をクリックします。

Windows10 ペイント3D 名前を付けて保存画面

6.好きな場所に保存します。ここで一旦、png形式で保存していきます。

Windows10 フォルダ
みきてぃ東西線
みきてぃ東西線
これで、イラストの作成は完了だよ!次に無料ツールでico形式に変換していこう!

「X Icon editor」でico形式に変換する

1.ブラウザで「X Icon editor」を開きます。

2.「Import」をクリックします。

x-icon editor画面

3.「Upload」をクリックし、ペイントソフトで作った画像を選択します。

x-icon editor アップロード画面

4.表示したい画像を調整して、「OK」をクリックします。

x-icon editor アップロード画面

5.「Export」をクリックします。

x-icon editor画面

6.「Export your icon」をクリックして、icoファイル画像を出力します。

x-icon editor エクスポート画面
みきてぃ東西線
みきてぃ東西線
これで、icoファイル画像のファビコンが完成したよ!
スポンサーリンク

ファビコンを設置する方法

続いて、ファビコンを設置する方法を解説していきます。

HTMLで設置する場合

HTMLで設置する場合は、以下のコードをheadタグに囲まれた部分に入れます。

<link rel="icon" href="favicon.ico">

ブラウザで表示すると以下の通りとなります。(『Google chrome』で表示しています)

ファビコンを設置した後のサイト
みきてぃ東西線
みきてぃ東西線
お使いのブラウザによっては、ファビコンが正常に表示されない場合があるので注意してね!
Q.「Safari」ブラウザ用ファビコンの画像は無くても大丈夫?

A.これまでは、MacOSの標準ブラウザ「Safari」専用のファビコンを用意する必要がありましたが、『macOS Mojave』以降は専用ファビコンが無くても、通常のファビコンが表示されるようになりました。

WordPressで設置する場合

WordPressの場合、「テーマを編集して設置する方法」と、「プラグインを使って設置する方法」の2通りがあります。

プラグインを使って設置する場合は「Favicon Rotator」が便利ですので、そちらをオススメします。

テーマを編集して設置する場合は、さらに「『カスタマイズ』機能で編集する」方法と、「テーマエディターで直接編集する」方法の2通りに分かれます。

初心者向け:「カスタマイズ」機能で編集する

1.「メディア」→「新規追加」で、Web用アイコン画像をアップロードする。

2.「外観」→「カスタマイズ」→「サイト基本情報」→「サイトアイコン」の順にクリックする。

3.「サイトアイコンの選択」をクリック先ほどアップロードしたWeb用アイコン画像にチェック→「選択」をクリックする。

4.画像が表示されたら、「公開」をクリックして保存する。

上級者向け:テーマエディターで直接編集する

事前にバックアップを取ってから編集しましょう。万が一、テーマエディターで誤った部分を編集してしまい、WordPressに不具合を起こしても元の状態に戻すことができます。

1.まず、FTPソフトを起動して、WordPressがインストールされている階層と同じ所にファビコンをアップロードします。

2.次に、「外観」→「テーマエディター」→テンプレート一覧にある「header.php」(テーマによって名前が異なる場合があります)の順にクリックします。

3.そして、<head>と</head>タグの間に以下のコードを追加で入れます。

<link rel=”favicon” href=”http://サイトのドメインの名前/wp/ファビコンのファイル名.ico” />

ファビコンを設置するメリットとは?

ところで、ファビコンを設置するメリットとは一体何でしょうか?

ファビコンを設置するメリットは、以下の通りとなります。

  • 自分のサイトやブログであることが一目で分かること

ファビコンを設置していない場合、ユーザー側にとっても「あれ?このページはどのサイトだったのかな・・・?」と混乱してしまう可能性があります。

そこに、ファビコンを設置すると、ユーザー側は「あっ、このページは〇〇のサイトだった!」と伝わるのではないか、と考えられます。

また、ファビコンを設置することで、サイトやブログのブランディングが期待できることも考えられます。

まとめ

長文になりましたが、今回は「ファビコンを無料で作る方法と設置方法」を解説しました。

無料でファビコンを作ることができるので、高機能のペイントソフトを用意する必要はありません。

一番大切なのは「icoファイルでファビコンを作り、サイトやブログに正しく設置する」こと。あとは簡単に作ることができますので、しっかりと覚えておきましょう。(*^_^*)

アイキャッチ画像
Webサイトのアイコンを無料で作る・設置する方法を解説ブラウザのタブに表示される「ファビコン」の他に、スマホのアイコンやWindows10のスタートメニューにある「タイル」アイコンなど、様々なWebアイコンがあります。この記事では、「Webサイトのアイコンを無料で作る・設置する方法」について解説していきます。...
ABOUT ME
みきてぃ東西線
20代大学卒業生です。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。
おすすめ記事