【たったこれだけ】ファビコンの設定　サイトのタブに表示される小さいやつ　favicon

2578 ワード
HTML favicon CSS Ruby Rails Ruby テキストリンク

　目的

サイトの左上についている物を付けたくて調べたので。。。

ファビコンとは

ファビコンとは、Webブラウザでページを開いた際にアドレスバーやタブ部分に表示されるアイコンのことです。

ファビコンは、お気に入り（favorite）に登録したときに表示されるアイコン（icon）という意味で、favorite icon（フェイバリット・アイコン）が縮約して、favicon（ファビコン）と呼ぶようになったのが名前の由来とされています。

ファビコンを設置することで複数のタブを開いてWebページの閲覧しているときや、お気に入り（Google Chromeの場合はブックマーク）を表示させた際にサイトやページを判別する目印となります。

ファビコンのフォーマット

ファビコンのフォーマットは「.ico」を使うことになっています
下記のサイトで簡単に作れます。
https://ao-system.net/favicon/

コード具体例

ファビコンを表示させるには、head部分に以下の記述を追加します。

index.html

<link rel="shortcut icon" href="ファイルのURL " type="logo.icon" />   
<link rel="icon" href="ファイルのURL" type="logo.icon" />

erbやhamlもこんな感じで

html.erb

<%= favicon_link_tag('logo.icon') %>
html.haml
= favicon_link_tag('logo.icon')

参考文献

https://ao-system.net/favicon/
https://www.asobou.co.jp/blog/web/favicon