3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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

##ファビコンとは

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

スクリーンショット 2020-05-09 12.17.50.png

ファビコンは、お気に入り(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

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?