【Nuxt.js】favicon generatorで簡単ファビコン設定

前置き

今回は
favicon generator
こちらを使って設定します✨

様々なブラウザや
デバイスに対応したファビコンを
まとめて生成してくれるものです✨
ファビコンの設定が簡単になります❤️

ちなみにそれっぽいパッケージがないか
チェックしたところ
あったのですが
インストールできませんでした。
nuxt-favicon-generator

といっても
パッケージを使わなくても
簡単に設定できるので
やってみましょう💫

参考:
【2020年版】Webサイトのファビコンや各種アイコンの作り方・設定方法

favicon feneratorでファビコン一括ダウンロード

favicon generator
ファビコンにしたい画像を選択し、
「ファビコンダウンロード」を
押すだけです🌟

ZIPファイルを解凍したら
Nuxtプロジェクトの
staticフォルダに入れます。

Nuxtでファビコン設定

設定箇所

デフォルトで
Nuxtのファビコンが
設定されています。
configのこちらの部分です💫

ファイルパスを変更

typeやhrefを
書き換えるだけです✍️

通常はこちらの2つを
記載すればOKのようです🙆‍♀️

適切な表示になるように
複数のサイズがありますが、
この2つで縮小して表示してくれます💡

今回はstaticの直下に
faviconsフォルダを置いているので
/faviconsとしています。

長いコードは…？

今回は使用していませんが
内容はこんな感じです。
・metaでwindowsに対応
・linkでそれぞれのサイズのアイコンに対応
・link manifestでChromeの拡張機能に対応

meta部分

ここに書いてある通りですが、
metaタグのmsapplication部分は
Windows10などのスタート画面に
適応させたい場合に使用します。
(あのアイコンがいっぱい並ぶアレです)
https://www.microsoft.com/ja-jp/software-download/windows10ISO

アイコンの種類や形式

アイコンの種類に
iconとapple-touch-iconがありますね。

apple-touch-icon

apple-touch-iconは
iPhoneやiPadで
webサイトをホーム画面に
置いた時のアイコンです💫

どんなサイトだったのか
視覚的に分かりやすくなるので
必須ではありませんが
設定しておくと良いものです👀

.ico形式でなくとも良い

faviconといえば
データ形式がicoですね💡
実はpngやgifでも設定が可能です🍀

manifest

manifest.jsonを使用することで
Chromeの拡張機能でも
faviconが反映されます💫
https://developer.mozilla.org/ja/docs/Mozilla/Add-ons/WebExtensions/manifest.json

まとめ

ブラウザ別、デバイス別に
全て作成するのは大変ですが
これなら簡単に設定できて
便利ですね💕