ホームページでfavicon(ファビコン)を設定する方法

2016/8/7 HTML

ホームページにfaviconを設定する方法の紹介です。

favicon(ファビコン)とは?

faviconとは、ホームページに設定されているアイコンのようなものです。
faviconを設定すると何が変わるのか?

タブのアイコンに表示されます

ホームページでfavicon(ファビコン)を設定する方法

ブックマークバーで表示されます

ホームページでfavicon(ファビコン)を設定する方法

まずfaviconを作成してみましょう。

1.favicon(ファビコン)の作成

faviconは16×16と32×32と48×48ピクセルの正方形の画像で作成します。画像形式はPNG・JPG・GIFで作成することをオススメ致します。
正方形の画像を作成しましたら、下記のサイトで画像形式をicoに変換します。

ファビコン(ファブアイコン)faviconを作ろう!。16×16と32×32と48×48ピクセルのマルチアイコンが簡単に作れます。作成したファビコンの画像はプレビューで確認できます。プロ仕様の詳細データ表示付き。

情報源: ファビコン作成。favicon.ico 無料で半透過マルチアイコンが作れます。

変換した画像の名前をfavicon.icoとしましょう。

2.favicon(ファビコン)の設定

画像が出来ましたら、FTPのディレクトリに移動します。
場所はどこでも良いですが、わかりやすくindex.htmlと同じ階層に移動してください。
WordPressの場合はThemeフォルダの直下に入れましょう。

あとは各ページのhtmlファイルの<head></head>の間に下記コードを記載。

<head>タグ内にコピペ

index.htmlと同じ階層に移動した場合は

WordPressの場合は

これでホームページにfaviconが設定されて表示されます。

投稿者:気まぐれWEBLOG管理人