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

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

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

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

↓↓↓「エンジニア」無料のおすすめ学習・開発環境の詳細↓↓↓

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

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

2020.07.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でのアップルタッチアイコンを設置する方法となります。

Python構築入門

サーバーを構築するならVPSがおすすめです。

現役エンジニアがおすすめするVPSレンタルサーバ比較（高速SSD限定）

「Udemy」で無料のPython講座を検索

エンジニアのオンライン学習

ITエンジニアにおすすめの教材、オンラインスクールです。
無料からエンジニアの学習ができる教材などまとめているので参考にしてください。

オンライン学習の比較はこちらから

おすすめオンライン教材
Udemy
自宅で学習ができるオンラインスクール
【テックアカデミー】無料キャリアカウンセリング詳細へ