# favicon 設定📝

このブログに favicon 設定していなかったので、 非デザイナーのためのいい感じの favicon 作成術 - Qiita を参考に設定してみました!

# デザインを作成

グラフィックデザインを無料で簡単作成 でデザインを作成しました。

デザイン

こんな感じです。

できたやつ

# 作った画像を丸く切り抜く

画像丸抜きくん | 写真や画像を丸く切り抜くシンプルなツール。SNS のプロフィール写真などにどうぞ。

次にこちらで、丸く切り抜きました。

丸く切り取ったやつ

# ファビコンの作成

ファビコン作成 favicon.ico 無料で半透過マルチアイコンが作れます

最後にこちらで、favicon.png -> favicon.ico にしました。

# VuePress の設定

# ico ファイルを置く

src/.vuepress/public/favicon.icoico ファイルを置く。

# config.js を変更

src/.vuepress/config.js

module.exports = {
  head: [
    ['link', { rel: 'icon', href: '/favicon.ico' }]
  ]
}

# 設定後

設定するだけで、ちゃんとしたブログに見えるので、早く設定しておけばよかった・・・

After

# 参考🔗