【Flutter Web】faviconを設定する方法

favicon用の画像を用意

はじめに、favicon用の画像を用意します。（拡張子は.png）
画像を用意したら、favicon用に画像を変換します。
下記のようなコンバーターを使うと便利です。
https://favicon.io/favicon-converter/

Drag and dropで画像をアップロードし、ダウンロードします。

Zipでダウンロードされるので、展開しfavicon.icoという名前の画像ファイルを選びます。

画像をセットする

favicon.icoをwebフォルダに置きます。

iconsの中ではありません。

index.htmlを修正する

webフォルダのindex.htmlを以下のように修正します。

+ <!-- Favicon -->
- <link rel="icon" type="image/png" href="favicon.png"/>

+ <link rel="shortcut icon" href="favicon.ico" type="image/X-icon">
+ <link rel="icon" href="favicon.ico" type="image/x-icon">

以上で諸々の変更が完了です。

このようにfaviconが設定されました👏

---

【参考にしたサイト】

よかったらみてね

フレキシブルなレイアウトが未対応ですが、flutter webで作成したホームページです。
https://youten410.app/