【Django】アップルタッチアイコン(apple-touch-icon)作成方法


Djangoで構築したWeb環境でスマホのホーム画面に表示できる「アップルタッチアイコン(apple-touch-icon)」の作成方法をまとめたので紹介します。

ちなみにアイコンの素材は以下の素材がお勧めです。

FLAT ICON DESIGN
http://flat-icon-design.com/


「Django」のWebアプリでアップルタッチアイコンを設定する方法

Djangoでアップルタッチアイコンを設置する方法は前回faviconを設置した方法とほぼ同じになります。

【Django】ブラウザのタブにアイコン「favicon」を設置する方法。エラー対応あり

2020年7月30日

通常のHTMLファイルでの書き方は以下のような記述となります。

<link rel="apple-touch-icon" href="アイコンファイル名" sizes="180x180">

今回はDjangoでのHTMLの書き方となるため、9行目の書き方となります。

<!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」で再起動します。

$ docker-compose restart
Restarting https-portal ... done
Restarting django       ... done
Restarting postgres     ... done
$

再起動後に正常に「アップルタッチアイコン」が表示されていることを確認

再読み込み後、スマホでホーム画面に表示できるか確認します。

「iPhone」ホーム画面表示

「android」ホーム画面表示

ホーム画面にアイコンが表示されていることが確認できます。

以上がDjangoでのアップルタッチアイコンを設置する方法となります。


関連記事


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

ABOUTこの記事をかいた人

blank

インターネット関連のSEをやっています。 ネットワーク、サーバー、ストレージ、仮想基盤まで幅広く手を出しており、MVNOの構築経験もあります。 現在は、Pythonを使ったプログラミングの開発をしネットワークの自動化ツールを作成しています! Pythonの入門書も作成しているので、ぜひ参考にしてください!