Twitterでブログ更新情報を配信中

Webサイトのシンボル「ファビコン」を作成!.icoなど拡張子別の正しい設置方法

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

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

任天堂ホームページのファビコン
出典:任天堂公式ホームページ

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

ファビコン画像を用意

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

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

色はお好みで変更してください。当ブログのファビコンのように、グラデーションにする場合は赤枠をクリック。

グラデーションツールを選択

グラデーションパネルから「グラデーションを編集」をクリックします。

グラデーションを編集

四角の端に〇が表示されるのでクリックします。

グラデーションの塗りを選択

つづいてツールボックスの塗りをクリックしてください。カラーピッカーが表示されるので、任意の色を選びます。もう一方も同じ手順で設定しましょう。当サイトは#74ebd5、#9face6としています。

カラーピッカーで選択

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

アイコンを配置

Font Awesomeを使う場合は、こちらが分かりやすいですよ!

Font Awesome 5のアイコンをIllustratorやXDで使う方法!UIデザインにおすすめ!

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

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

ファビコンを生成

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

ファビコン作成サイト

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

ファビコンを作成

作成後、ダウンロードをクリックしてください。

ファビコンをダウンロード

拡張子「ico」のデータがダウンロードできていれば問題ありません。

ダウンロードしたファビコンを確認

ファビコンを設置する

ここからはファビコンを設置していきます。Wordpressのテーマを使った場合とHTMLに直接入力する場合の2種類をご紹介します。

WordPressの場合

ログイン後にサイト表示をすると、画面上部にツールバーが出てきます。その中のカスタマイズ>サイトアイコンから設定します。サイズは、512×512ピクセル以上の正方形を推奨しています。

こちらは既存、自作のテーマ問わず設置できるので、画像を用意すればHTMLを触る必要もありません。

Wordpressでファビコンを設置する

HTMLの場合

先ほどのカスタマイズ機能を使わない場合やHTMLのみでサイトを作成している場合はこちらの方法で設置しましょう。

headタグに下記コードを記述します。hrefのURLはアイコンデータを保存した場所の階層、名前に変更してください。

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

IE8以前はlink relにshortcutを追加しましょう。

 <link rel="shortcut icon" href="/path/favicon.ico"> 

今回はサイトのシンボルになるファビコンの作成から設置までを解説しました。イラストソフトで簡単に作成できるので、あとはサイトの構成に応じて2種類の設置方法で試してみてください。

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