この記事の内容
転職活動に向けて個人開発を行っています。
その中で、
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"/>
を追加します。
これだけです！
簡単にfaviconが作成・設定できました。
Railsアプリ↑ ↓Vue.js
