Flaskを使用してWebアプリを作成した際の、ファビコンの設定方法とiphoneのホーム画面への表示などのAppleアイコンの設定方法についてまとめました。
また、この記事では鯨尺換算アプリというものを作成したので、それを例にして説明していきたいと思います。鯨尺換算アプリは以下のリンクからアクセスできます。
アイコンの作成
まずは、サイズを決めてアイコンを書いていきます。
最近は生成AIですぐに生成出来ますが、私はこだわりがあるので手書きで作成しました。
大きさはAppleデバイスを基準にして180px×180pxの解像度がおすすめです。
実際に作成したアイコンは以下のものです。
鯨尺ということでシンプルですが鯨とメモリの波のデザインです。
アイコンは小さいので複雑なデザインよりはシンプルで分かりやすいデザインが良いです。
ファイルの構造と配置場所
さて、本題の表示方法について説明していきたいと思います。
まずは以下のファイル構造で先ほど作成したファビコンをfavicon.icoという名前で配置します。
.
├── Pipfile
├── Pipfile.lock
├── app
│ ├── app.py
│ ├── static
│ │ ├── css
│ │ │ └── style.css
│ │ └── images
│ │ └── favicon.ico #ここに配置
│ └── templates
│ └── index.html
└── run.py
static内のimagesの中です。またはstaticの直下においても大丈夫です。
HTMLへの記述
上記までのようにfavicon.icoを配置できたら、HTMLファイルの<head>内に以下の記述をします。
<head>
<!-- 省略 -->
<link rel="icon" href="{{ url_for('static', filename='images/favicon.ico') }}">
<!-- 省略 -->
</head>もちろん自身のファイル構造に応じて書き換えてください。
これでファビコンの設定は終わりです。
Appleデバイスでのアイコン表示
ここまででファビコンの設定は完了しましたが、これをIPhoneで開いてみると。。。
なぜか反映されていません！
実はAppleデバイスに対応させるには別で設定をする必要があるのです。
それでは具体的にやり方を説明していきたいと思います。
ファイル構造
やり方は一緒ですが、アイコンのファイル名をapple-touch-icon.pngなどにして以下のように配置します。
.
├── Pipfile
├── Pipfile.lock
├── app
│ ├── app.py
│ ├── static
│ │ ├── css
│ │ │ └── style.css
│ │ └── images
│ │ ├── apple-touch-icon.png
│ │ └── favicon.ico
│ └── templates
│ └── index.html
└── run.pyこちらも同様にstaticの直下に配置しても大丈夫です。
HTMLファイルの編集
ファイルを配置したら、同様にHTMLファイルの<head>内に以下の記述を入れます。
<head>
<!-- 省略 -->
<link rel="apple-touch-icon" href="{{ url_for('static', filename='images/apple-touch-icon.png') }}">
<meta name="apple-mobile-web-app-title" content="鯨尺換算ツール">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 省略 -->
</head>content名などは適宜変更してください
これで、Appleデバイスでも以下のように表示されると思います。
それでは！
コメント