この記事の内容

転職活動に向けて個人開発を行っています。
その中で、
Webサイトのタブのタイトル横のアイコンってどうやって変えるの？
という疑問が浮かびました。

その作成から設定まで、私が行った手順をまとめます。
今回はRailsアプリと、Vue.jsのポートフォリオサイト２つを作成しているので、この２つについて紹介します。

favicon

そもそも、Webサイトのタブの横のアイコンのことはfaviconといいます。

favicon（ファビコン）は「Favorite icon（お気に入りのアイコン）」という言葉を省略したもので、運営者がWeb ページに設置するシンボルマークのことです。主に、アドレスバーやブラウザのタブ、スマートフォンでWeb ページを"ホーム画面"に置いた際に表示されるアイコンなどを指します。
https://ferret-plus.com/8036

作成

画像の準備

まずは画像ファイルを用意します。
サイズはなんでもいいですが、小さくなってしまうので、シンプルなものがいいと思います。

今回私が作成しているRailsアプリでは、サイト内のHOMEボタンを、作成したロゴ画像にしたので、それとイメージを揃えることにしました。
ロゴ作成に用いたサイトがLogo Makerです。
ものすごく簡単にロゴが作れます。しかもスタイリッシュ。

作り方は、入れたい文字とシンボルを選んで配置するだけ！

今作成しているRailsアプリは「人生でやりたいこと100のリストを管理・共有できるアプリ」なため、こんなロゴにしてみました。

で、このままfaviconにすると字が小さくなって読めないので、上の吹き出し部分だけをfaviconにすることにしました。
Logo Makerで、文字を入れずに吹き出し部分だけで画像を作成しました。

画像の変換

作成した画像をfaviconに設定するためには、「.ico」というフォーマットに変換する必要があります。
「.png」「.gif」でも可能ですが、ブラウザによって対応しない可能性があるらしいので「.ico」が無難です。

変換のために、ファビコン作成サイトにお世話になります。

どのサイズの画像を作成するか選択して画像をアップロードし、「favicon.ico作成」ボタンを押してダウンロードするだけです。

サイズについては、

● 主要なfaviconサイズ
16px × 16px：IE タブ
24px × 24px：IE9 ピン留め機能
32px × 32px：Chrome、Firefox、Safari などのタブ
48px × 48px：WindowsのWeb ページアイコン
64px × 64px：高解像度 WindowsWeb ページアイコン
https://ferret-plus.com/8036

とのことです。

アプリに設定

Rails

Railsアプリの場合は、作成したfavicon.icoをpublicディレクトリ直下に配置します。
application.html.erbのheadに

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

を追加します。

Vue

Vueアプリの場合は、作成したfavicon.icoをstaticディレクトリ直下に配置します。
index.htmlのheadに

<link rel="shortcut icon" type="image/png" href="/static/favicon.ico"/>