【 更新 】おすすめ記事はこちら

「ファビコン」を作ってHTMLとWordPressサイトに設置する

ブラウザで検索してページを開くと、タブの左にアイコンが表示されます。これは「ファビコン」と言い、訪れたサイトのシンボルやイメージを設置しています。

例えば、任天堂公式ホームページでは、マリオのドット絵になっていました。ページ内にNintendoのロゴもありますが、サイズやオリジナリティを考えると有名なキャラクターを使うほうが良いですし、何より分かりやすいですよね。

任天堂ホームページ

この他にも、お気に入りやブックマークに登録したときのアイコンとして表示されます。今回の手順を元に、Webサイトの顔であるファビコンの作成、設置をしていきましょう。

ファビコン画像を用意

今回はイラストレーターを使いますが、パソコンに入っているペイントソフトでOKです。まずは長方形ツールで「32×32の正方形」を用意します。

長方形ツールで正方形を作成

色はお好みで変更してください。

色を変更

カラー設定が終わったら、文字ツールでテキストを入力したり、素材サイトを利用するなどして、先ほどの四角と組み合わせましょう。

アイコンを配置

Font Awesomeのアイコンを使う場合は、こちらをご覧ください。

出来上がった画像をグループ化し「アセットの書き出し」パネルにドラッグ&ドロップします。書き出し設定で、JPG、PNG、GIFいずれかの形式を選び保存します。

倍率と形式を設定して書き出し

1pxズレるときは、こちらをご覧ください。

ファビコンを生成

ファビコン作成サイトにアクセスし、今回の作成サイズ「32×32」のボタンからファイルを開きます。

ファビコン作成サイト

「Favicon.ico作成」をクリックします。

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でファビコンを設置する

「ファビコン」の作成から設置方法は以上になります。イラストソフトで簡単に作成できるので、あとはサイトの構成に応じて、紹介した方法で試してみてください。

WordPressの設定で気づいた方もいるかもしれませんが「ファビコン」は.ico以外の拡張子(JPGなど)、指定したサイズ以外でも大丈夫です。ただし、ブラウザによって扱いが異なるのでご注意ください。