技術ブログ

プログラミング、IT関連の記事中心

トップ > HTML > HTMLでファビコンを設定する方法

HTMLでファビコンを設定する方法

HTML

目次

ファビコンとは

簡単に説明すると、以下のようなタブなどの横についているアイコンのことです。

ファビコン設定方法

ファビコン画像を用意して、HTMLと同じディレクトリに配置します。
拡張子は、「.ico」「.png」のどちらでも大丈夫です。

HTMLのヘッダーに以下の記述を追加します。

<link rel="icon" href="./favicon.png" />

HTMLは以下のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    <meta charset="UTF-8" />
    <link rel="icon" href="./favicon.png" />
  </head>
  <body>
  </body>
</html>

モバイル端末のファビコン

モバイル端末でブックマークをホームに配置する場合のファビコン設定は以下です。

<link rel="shortcut icon" href="./favicon.png" type="image/x-icon" />
<link rel="apple-touch-icon" href="./favicon.png" />
<link rel="icon" type="image/png" href="./favicon.png" />

HTMLは以下のようになります。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>タイトル</title>
    <meta charset="UTF-8" />
    <link rel="icon" href="./favicon.png" />
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon" />
    <link rel="apple-touch-icon" href="./favicon.png" />
    <link rel="icon" type="image/png" href="./favicon.png" />
  </head>
  <body>
  </body>
</html>