IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

rails_real_favicon を使ってみる

はじめに

ここでは以下の記事を参考にして rails_real_favicon を使ってみることにする。

 

使ってみる

RealFaviconGenerator にアクセスして画像をアップロードする。

画像サイズは最低でも 70x70 のサイズである必要がある。できれば 260x260 以上のサイズをアップロードすると良いとのこと。

 

ここでは以下の画像を使うことにする。

f:id:matt-note:20190411215410p:plain

 

ボタンをクリックして次に進んで、「Generate your Favicons and HTML code」ボタンをクリックする。

f:id:matt-note:20190411214342p:plain

 

ざっくりとアプリを作成する。

 

Gemfile に rails_real_favicon を追加する。

f:id:matt-note:20190411214819p:plain

 

gem をインストールする。

  • bundle

 

config/favicon.json ファイルを作成する。

 

config/favicon.json に、RealFaviconGenerator で出力された json をコピペする。一番上の "master_picture" には画像のパスを入力する。画像は app/assets/images ディレクトリに入れておく。

f:id:matt-note:20190411215132p:plain

 

ジェネレーターで favicon を作成する。

f:id:matt-note:20190411215558p:plain

 

app/views/application/_favicon.html.erb が作成される。

f:id:matt-note:20190411215755p:plain

 

これをapp/views/layouts/application.html.erb で render する。

f:id:matt-note:20190411221209p:plain

favicon の表示用に scaffold する。

  • bin/rails g scaffold Article title:string content:text
  • bin/rails db:migrate

 

サーバーを起動する。

 

localhost:9999/articles にアクセスしてみる。

f:id:matt-note:20190411222726p:plain

-> favicon を作成して、設定することができた。(AndroidiPhone にも対応)