Djangoで構築したWeb環境でスマホのホーム画面に表示できる「アップルタッチアイコン（apple-touch-icon）」の作成方法をまとめたので紹介します。
ちなみにアイコンの素材は以下の素材がお勧めです。
FLAT ICON DESIGN
http://flat-icon-design.com/
をチェック「Django」のWebアプリでアップルタッチアイコンを設定する方法
Djangoでアップルタッチアイコンを設置する方法は前回faviconを設置した方法とほぼ同じになります。
あわせて読みたい
【Django】ブラウザのタブにアイコン「favicon」を設置する方法。エラー対応あり
Djangoで構築したWebサイトでブラウザのタブに設置するアイコン（favicon）の設置方法についてまとめました。 設定しても反映されない事象に対しても記載しているので参...
通常のHTMLファイルでの書き方は以下のような記述となります。
1 | <link rel="apple-touch-icon" href="アイコンファイル名" sizes="180x180"> |
今回はDjangoでのHTMLの書き方となるため、9行目の書き方となります。
01 02 03 04 05 06 07 08 09 10 11 12 13 | <!DOCTYPE html>{% load static %}<html lang="ja"><head>------中略------ <!-- apple-touch-icon --> <link rel="apple-touch-icon" href="{% static 'icon/apple-touch-icon.png' %}" sizes="180x180">------中略------</head> |
設定が完了したらWebアプリを再起動します。
私の環境はDokcerコンテナとなるため、以下のように「docker-compose」で再起動します。
1 2 3 4 5 | $ docker-compose restartRestarting https-portal ... doneRestarting django ... doneRestarting postgres ... done$ |
再起動後に正常に「アップルタッチアイコン」が表示されていることを確認
再読み込み後、スマホでホーム画面に表示できるか確認します。
「iPhone」ホーム画面表示
「android」ホーム画面表示
ホーム画面にアイコンが表示されていることが確認できます。
以上がDjangoでのアップルタッチアイコンを設置する方法となります。
ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ（VPS）を利用しましょう！
実務経験はVPSで学べます。
コメント