KONOTI

この世界で得た知識・情報まとめ

【ファビコン / HTML】アイコン画像を作成し、自サイトのタブに設定する方法

自サイトのタブにアイコン画像を設定する方法のご紹介です。 たくさんのタブを開いていても、一目で自分のサイトだとわかるので、ぜひ設定してみてください。

【ファビコン / HTML】アイコン画像を作成し、自サイトのタブに設定する方法
【ファビコン / HTML】アイコン画像を作成し、自サイトのタブに設定する方法

アイコン画像の作成

まずはタブに使うアイコン画像を用意します。 ちなみに、タブで使われるアイコン画像はファビコンといい、 サイトのシンボルのような役割をします。

ファビコン

また、用意する画像の形式はJPG,PNG形式で用意すると良いでしょう。 下記でアイコン画像を自作する例をご紹介しますが、既に画像が用意してある場合は 画像をICO形式のファイルに変換するへお進みください。

エクセルで画像を自作する例

アイコンに使う画像はどのように用意しても良いのですが、 私の場合はエクセルの図形の書式設定などを駆使して、作成してみました。

まずはエクセルで以下のようなものを作ります。

ファビコン2

そしてこれをコピーして「ペイント」ソフトに貼り付けます。

ファビコン3

「選択」で必要な範囲を選び、「トリミング」して文字部分を中心に仕上げます。

ファビコン4

この画像をPNG形式で保存して、アイコン画像の作成は完了です。

画像をICO形式のファイルに変換する

JPG,PNG形式の画像が用意できたら、それをICO形式の画像ファイルに変換します。 タブのアイコンには、拡張子が「.ico」の画像ファイルを使うためです。

変換といっても非常に簡単です。以下のサイトから簡単にICO形式の画像ファイルを作ることができます。

英語ですが、使い方を画像付きでご説明するので安心してください。

上記のURLにアクセスしたら、まずは赤枠にあるファイルを選択ボタンを押して、 保存してるPNG,JPG形式の画像を選択します。

ファビコン5-PC
ファビコン5-Mobile

続いてOptionalのチェックボックス2つにチェックを入れます。 チェックなしだと16x16だけのアイコン画像を作成しますが、 これらにチェックすることで、32x32と48x48サイズのアイコン画像も作成できます。

IEやChromeなど、ブラウザによって使用されるアイコンサイズが違うため、 作っておくと良いでしょう。

チェックを入れたら、Create Iconボタンを押します。

ファビコン6-PC
ファビコン6-Mobile

すると、下にサンプルが表示されます。 これでOKならばDownload FavIconボタンを押します。

ファビコン7-PC
ファビコン7-Mobile

ICO形式のファイルがダウンロードされるので、これをアイコン画像として使います。 なお、1つのファイルに16x16、32x32、48x48の画像が入っています。 ファイルを開くと3ページあるのがわかるかと思います。

自分のサイトにアイコン画像を設定する

自分のサイトにアイコン画像を設定する方法は2つあります。

  • ルートディレクトリに設置する
  • HTMLファイルのhead要素内に書き足す

全てのページに同じアイコン画像を使う場合は、 1の「ルートディレクトリに設置する」がおすすめです。

一方で、ページによってアイコン画像を変えたい場合は、2の 「HTMLファイルのhead要素内に書き足す」やり方を使います。

ルートディレクトリに設置する方法

ルートディレクトリとはサイトのトップ階層のことで、トップページ(index.html)が配置されているフォルダを指します。

このルートディレクトリに、先ほどFavIcon Generatorで ダウンロードしたICO形式の画像ファイルをアップロードします。

これで、サイトのどのページを開いてもアイコン画像がタブに設定されます。

ファビコン

また、以下のようにブックマークにもアイコン画像が表示されます。

ファビコン8

HTMLファイルのhead要素内に書き足す

HTMLファイルのhead要素に以下を追記することで、アイコン画像を設定することもできます。


 <link rel="shortcut icon" href="http://test.com/image/favicon.ico"/>
       

赤字のURLはアイコン画像がある場所です。 上の例だと、「http://test.com/image/」に「favicon.ico」というアイコン画像をアップロードし、それを参照しています。

アイコン画像を複数用意して、それぞれのアイコン画像を参照するようにすれば、 ページごとに好きなアイコン画像を使うことができます。

このHTMLファイルに追記するやり方は、アイコン画像が1つでも(サイト全体で同じアイコン画像を使う場合でも)問題ないですが、 その場合は1のルートディレクトリに設置する方法の方が簡単で良いでしょう。

この記事のシェアはこちらから

当サイトについて

当サイト(KONOTI)は、日常生活において運営者が得た情報をご紹介するサイトです。 ジャンルに多少の偏りはありますが、基本的には様々な情報を取り扱っていく予定です。

Contact

当サイトへのご連絡は以下よりお願いします。

PAGE TOP ▲

© Copyright 2019 KONOTI