Djangoで構築したWeb環境でスマホのホーム画面に表示できる「アップルタッチアイコン（apple-touch-icon）」の作成方法をまとめたので紹介します。
ちなみにアイコンの素材は以下の素材がお勧めです。
FLAT ICON DESIGN
http://flat-icon-design.com/
目次
「Django」のWebアプリでアップルタッチアイコンを設定する方法
Djangoでアップルタッチアイコンを設置する方法は前回faviconを設置した方法とほぼ同じになります。
あわせて読みたい
【Django】ブラウザのタブにアイコン「favicon」を設置する方法。エラー対応あり
Djangoで構築したWebサイトでブラウザのタブに設置するアイコン（favicon）の設置方法についてまとめました。 設定しても反映されない事象に対しても記載しているので参...
通常の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でのアップルタッチアイコンを設置する方法となります。
あわせて読みたい
現役エンジニアがおすすめするVPSレンタルサーバ比較（高速SSD限定）
2025年3月更新版 家にサーバーを置くのがめんどくさい、簡単にサーバーを利用して、手軽にエンジニアの勉強・学習に利用したり、サイト（ホームページやブログ）を作成...
ITエンジニアの開発・検証・学習としてインターネット上で専用のサーバ（VPS）を利用しましょう！
実務経験はVPSで学べます。
コメント