【HTML】ファビコンの追加

HTML Ruby on Rails

自分のポートフォリオサイト、ブラウザで開いたときの表示がしょぼい。
ということで、ブラウザのタブの表示方法を修正。

タイトルの修正

通常、保存してあるフォルダ名がそのままブラウザのタブに表示されてしまう。
これじゃ見栄えが悪すぎるので修正。
今回はrailsを使っているので修正箇所はここ。
/app/assets/views/layout/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>タグに表示したい名前</title>
    ...
  </head>

ファビコンの作成

メインでやりたかったのはこっち。
タブの部分に画像を表示できた方が、よりまともなサイトっぽい。
ということでファビコンを作るところから。
今回使ったサイトはこれ。
ao-system.net
画像を選択すると、自動でfabicon.icoを作ってくれる。
ちなみに複数の画像をまとめて保存してくれるらしい。

ファビコンの追加

できたファイルを/app/assets/imagesの中に保存。
保存したファイルを読み込めばOK。
読み込むときの書き方はコレ。
/app/assets/views/layout/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    ...
    <%= favicon_link_tag('favicon.ico') %>
  </head>

サイトを確認すれば表示されるようになってるはず！