Zenn
⭐️

faviconの設定について

2024/09/04に公開
favicon
tech

開発環境

  • macOS
  • VSCode
  • Rails 7.1.3.3
  • ruby-3.2.3
  • PostgreSQL 16.2

行いたいこと

  • faviconを設定しブラウザのタブに任意のアイコン画像を表示させる






favicon.ico へサイズを調整した画像を貼付する

・任意の画像をジェネレーターで16x16に変換しました。
https://favicon-generator.mintsu-dev.com/
・app/assets/images/favicon.icoへサイズを変更した画像を配置する。
Image from Gyazo




app/views/layouts/application.html.erb へリンクを記載する

・画像を配置したファイルを正しく認識できる様に記載する。

app/views/layouts/application.html.erb
<html>
  <head>
<!--(省略) -->

    <%= favicon_link_tag('favicon.ico') %>

<!--(省略) -->
  </head>
<!--(省略) -->



・正しくできている場合以下の様に設定した画像がアイコンとして表示されます。
Image from Gyazo
・因みにアイコンの隣のタイトルはapp/views/layouts/application.html.erbのtitleを修正して変更できます。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Live Fes</title>

<!--(省略) -->

  </head>
</html>

以上です。




GitHubで編集を提案

Discussion