Chapter 05

4. ファビコンの追加

Masumi Morishige(umi-mori)
Masumi Morishige(umi-mori)
2021.01.02に更新

ファビコンとは?

ファビコン(favicon)とは、ウェブサイトを開いた時にタブに出てくるアイコンのことを言います。

favion-sample.png

https://ferret-plus.com/387

ファビコンの作成

PowerpointやKeynoteなどで作成することもできますが、Piskelと言われるドット絵ツールで書くこともできます。

https://qiita.com/umi_mori/items/28f048986f2215a32192
https://qiita.com/umi_mori/items/221b389abac3ca391638

ファビコンの作成ができたら、iconsフォルダをstaticフォルダの中に作成して、favicon.pngfavicon.icoなどのファイル名にして保存します。

favicon-file.png

ファビコンの設置方法

ファビコンの設置方法は大変簡単です。
index.htmlheadタグの中に以下のようなコードを挿入します。
<link rel="icon" href="./static/icons/favicon.ico">

結果的に、headタグ全体のコードは以下のようになります。

index.html
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <meta name="format-detection" content="email=no,telephone=no,address=no">
	
    <title>Landing Page Temp</title>
    <link rel="stylesheet" href="./static/css/mvp.css" />
    <!-- この行を追加 -->
    <link rel="shortcut icon" href="./static/icons/favicon.ico">
</head>

以下のようにファビコンが変更されれば、変更成功です!

favicon-success.png