Zenn
🔔

Vue.jsでFaviconを動的に変更する

2021/02/20に公開
JavaScript
Vue.js
個人開発
tech

はじめに

個人開発している「オンライン・コワーキングスペース - Sushi Work」で、Faviconを動的に変更する機能を追加しました。

機能追加するに至った背景に関しては、noteに書きました。
https://note.com/sushiwork/n/n518dc7886ad5

Zennでは、対応方法について書きます。

Faviconを作成する

まず、Faviconの作成です。自作はできないので、絵文字をFaviconにすることにしました。

そこで便利なのが、favicon.ioというサイトです。既に絵文字がFaviconになっているので、それをダウンロードして使うだけです。
https://favicon.io/emoji-favicons/bell/
ダウンロードすると色々大きさや拡張子のファイルが含まれますが、今回は .ico 拡張子のファイルだけ使用します。

絵文字は、Twitterが作成しているTwemojiが使用されています。Twemojiは、CC-BY4.0のライセンスなので、使用する場合は、自分のサイトにクレジット表記とリンクを貼る必要があります。

Sushi WorkのAboutページにクレジット表記を追加しています。

Faviconを動的に変更する

ここからVue.js2系が前提の話になります。

Faviconをpublicフォルダに追加

public/favicons/alarm_clock.ico
public/favicons/bell.ico
public/favicons/default.ico 
public/favicons/japanese_tea.ico

フォルダ構成に特に決まりはないですが、faviconが複数あるので、faviconsフォルダを新規追加し、そこにファイルを入れました。

index.htmlでFaviconを表示

public/index.html
<link
  rel="icon"
  type="image/x-icon"
  href="<%= BASE_URL %>favicons/default.ico"
/>

Faviconを扱うJSモジュールを作成

src/helpers/faviconHelper.js
export default {
  // faviconをdefaultに変更する
  updateDefault: function() {
    updateFavicon("default.ico");
  },
  // faviconをAlarmClockに変更する
  updateAlarmClock: function() {
    updateFavicon("alarm_clock.ico");
  },
  // faviconをbellに変更する
  updateBell: function() {
    updateFavicon("bell.ico");
  },
  // faviconをJapaneseTeaに変更する
  updateJapaneseTea: function() {
    updateFavicon("japanese_tea.ico");
  },
};

function updateFavicon(fileName) {
  const link = document.querySelector("link[rel*='icon']");
  link.href = process.env.BASE_URL + "favicons/" + fileName;
}

日付処理などView関連(Vueだとtemplate関連?)の処理は、src/helpers/ 以下に配置して、どのVueコンポーネントからでも使えるようにしています。

Vueコンポーネントから、faviconHelperを使う

Sample.vue
<script>
import faviconHelper from "@/helpers/faviconHelper";

export default {
  methods: {
    startTimer: function() {
      // Faviconを時計に変更
      faviconHelper.updateAlarmClock();
    },
  },
}
</script>

注意点

Safariでは、Faviconが動的に変更できませんでした。Firefox、Chromeでは動作することを確認しました。

終わりに

Sushi Workのように通知が重要になるサービスでは、Faviconの動的変更は、ユーザーへ適切に情報を伝えるのに役に立ちます。

早速、もっとFaviconを目立つようにして欲しいという要望もいただいているので、今後さらに良くしていけたらと思っています。

Discussion