ブラウザで検索してページを開くと、タブの左にアイコンが表示されます。これは「ファビコン」と言い、訪れたサイトのシンボルやイメージを設置しています。
例えば、任天堂公式ホームページでは、マリオのドット絵になっていました。ページ内にNintendoのロゴもありますが、サイズやオリジナリティを考えると有名なキャラクターを使うほうが良いですし、何より分かりやすいですよね。
この他にも、お気に入りやブックマークに登録したときのアイコンとして表示されます。今回の手順を元に、Webサイトの顔であるファビコンの作成、設置をしていきましょう。
ファビコン画像を用意
今回はイラストレーターを使いますが、パソコンに入っているペイントソフトでOKです。まずは長方形ツールで「32×32の正方形」を用意します。
色はお好みで変更してください。
カラー設定が終わったら、文字ツールでテキストを入力したり、素材サイトを利用するなどして、先ほどの四角と組み合わせましょう。
Font Awesomeのアイコンを使う場合は、こちらをご覧ください。
出来上がった画像をグループ化し「アセットの書き出し」パネルにドラッグ&ドロップします。書き出し設定で、JPG、PNG、GIFいずれかの形式を選び保存します。
1pxズレるときは、こちらをご覧ください。
ファビコンを生成
ファビコン作成サイトにアクセスし、今回の作成サイズ「32×32」のボタンからファイルを開きます。
「Favicon.ico作成」をクリックします。
作成後、ダウンロードをクリックしてください。
拡張子「ico」のデータがダウンロードできていれば問題ありません。
ファビコンを設置
ここからはファビコンを設置していきます。HTMLに直接入力する場合、WordPressテーマを使った場合の2種類をご紹介します。
HTMLの場合
先ほどのカスタマイズ機能を使わない場合やHTMLのみでサイトを作成している場合はこちらの方法で設置しましょう。
headタグに下記コードを記述します。hrefのURLはアイコンデータを保存した場所の階層、名前に変更してください。
<link rel="icon" href="/path/favicon.ico">
IE8以前はlink relにshortcutを追加しましょう。
<link rel="shortcut icon" href="/path/favicon.ico"> WordPressの場合
「サイトを表示」にすると、画面上部にツールバーが出てきます。その中の「カスタマイズ」＞「サイトアイコン」から設定します。サイズは「512×512ピクセル以上」の正方形を推奨しています。
こちらは既存、自作のテーマ問わず設置できるので、画像を用意すればHTMLを触る必要もありません。
「ファビコン」の作成から設置方法は以上になります。イラストソフトで簡単に作成できるので、あとはサイトの構成に応じて、紹介した方法で試してみてください。
WordPressの設定で気づいた方もいるかもしれませんが「ファビコン」は.ico以外の拡張子（JPGなど）、指定したサイズ以外でも大丈夫です。ただし、ブラウザによって扱いが異なるのでご注意ください。
