Webサイトのアイコンを無料で作る・設置する方法を解説

ブラウザのタブに表示される「ファビコン」の他にも、スマホのアイコンやWindows10のスタートメニューに表示される「タイル」のアイコンなど、様々なWebサイトのアイコンがありますよね。

これらは全て無料ツールでアイコン画像を作成し、HTMLやWordPressで設置することができます。

今回は、「Webサイトのアイコンを無料で作る・設置する方法」を、分かりやすく解説していきます。

スマホ用アイコンの画像を作成・設置する方法
Windows用アイコンの画像を作成・設置する方法
- 作成する方法
- 設置する方法
まとめ

スマホ用アイコンの画像を作成・設置する方法

みきてぃ東西線

この項目では、iPhone・iPadの標準ブラウザ「Safari」に表示されるアイコン、およびAndroidスマートフォンのホーム画面に表示されるアイコン画像の作成と設置方法を解説していくよ。

作成する方法

スマホ用アイコンは、基本的に『GIMP』などの無料ペイントソフトでも簡単に作ることができます。

画像サイズによっても様々ですが、最低でも512×512ピクセルの画像は用意しておきましょう。

HTMLに設置する方法

htmlでスマホ用アイコンを設置する場合は、headタグに囲まれた部分に、以下のコードを入れます。

<link rel="apple-touch-icon" href="スマホ用アイコン画像">

WordPressに設置する方法

WordPressの場合、以下の方法で設置することができます。

「カスタマイズ」機能で編集する
テーマエディターで直接編集する

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

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

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

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

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

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

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

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

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

3.<head>と</head>タグの間に以下のコードを入れる。

<link rel="apple-touch-icon" href="http://サイトのドメインの名前/wp/Webサイト用アイコンのファイル名.png">

Q.「Safari」ブラウザ用アイコン画像は無くても大丈夫？

A.これまでは、iPhone・iPadの標準ブラウザ「Safari」専用のファビコンを用意する必要がありましたが、iOS12以降は専用アイコン画像を用意しなくても表示されるようになりました。

Windows用アイコンの画像を作成・設置する方法

みきてぃ東西線

この項目では、Windows8.1およびWindows10のスタート画面に表示されるアイコン画像の作成と設置方法を解説していくよ。

作成する方法

Windows用アイコン画像でも、基本的には無料ペイントソフトで作成することができます。

この場合、以下のサイズの画像を作成していきます。

70×70ピクセルの画像
150×150ピクセルの画像
310×150ピクセルの画像
310×310ピクセルの画像

設置する方法

headタグに囲まれた部分に、以下のコードを入れます。

<meta name="application-name" content="{Webサイトやブログの名前}"/>
<meta name="msapplication-square70x70logo" content="アイコン画像のファイル名"/>
<meta name="msapplication-square150x150logo" content="アイコン画像のファイル名"/>
<meta name="msapplication-wide310x150logo" content="アイコン画像のファイル名"/>
<meta name="msapplication-square310x310logo" content="アイコン画像のファイル名"/>
<meta name="msapplication-TileColor" content="#66ccff"/>