Added mobile metadata & app icons optimised for Android/iOS

This commit is contained in:
Jelle Z 2018-01-03 11:56:58 +01:00 committed by Jeremy Zhang
parent f58a43a388
commit 0de1c24899
11 changed files with 48 additions and 0 deletions

View File

@ -0,0 +1,8 @@
# Beautiful icons for mobile devices
(for Safari on iOS and Google Chrome on Android)
<img src="https://i.imgur.com/ozNO8Kk.png"
alt="Demo iOS Application Icon" />
When a user decides to add a guild embed to his or her homescreen, it will use the TitanEmbeds icon instead of the current webpage view or a low resolution favicon (which often looks ugly).
There are icons available specifically optimised for iOS and Android that are used accordingly.

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -27,6 +27,11 @@
{% if css.css is not none %}{{ css.css }}{% endif %}
{% endif %}
</style>
<!--Provide default mobile metadata-->
<meta id="AppTitleApple" name="apple-mobile-web-app-title" content="TitanEmbeds">
<meta id="AppTitleAndroid" name="application-name" content="TitanEmbeds">
</head>
<body>
<div class="navbar-fixed">
@ -369,6 +374,26 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/embed.js') }}"></script>
<!--Specify icons for Apple devices (can also be used as fallback for Android)-->
<link rel="apple-touch-icon" href="https://titanembeds.com/static/img/titanembeds_square.png">
<link rel="apple-touch-icon" sizes="180x180" href="/static/img/appicons/icon_60x60@3x.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/static/img/appicons/icon_76x76@1x.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/static/img/appicons/icon_76x76@2x.png" />
<link rel="apple-touch-icon" sizes="58x58" href="/static/img/appicons/icon_58x58@1x.png" />
<!--Specify icons for Android devices-->
<link rel="icon" sizes="192x192" href="/static/img/appicons/icon_192x192.png">
<link rel="icon" sizes="128x128" href="/static/img/appicons/icon_128x128.png">
<!--Update mobile metadata to guild name-->
<script>
function AppTitleUpdate() {
var UpdatedAppTitle = document.getElementById("guild_name").innerHTML;
document.getElementById("AppTitleApple").content = UpdatedAppTitle;
document.getElementById("AppTitleAndroid").content = UpdatedAppTitle;
}
</script>
<!-- Electron fix -->
<script>
if (window.module) {

View File

@ -12,6 +12,21 @@
<title>{{ title }} - Titan Embeds for Discord</title>
<!--Provide default mobile metadata-->
<meta name="apple-mobile-web-app-title" content="TitanEmbeds">
<meta name="application-name" content="TitanEmbeds">
<!--Specify icons for Apple devices (can also be used as fallback for Android)-->
<link rel="apple-touch-icon" href="https://titanembeds.com/static/img/titanembeds_square.png">
<link rel="apple-touch-icon" sizes="180x180" href="/static/img/appicons/icon_60x60@3x.png" />
<link rel="apple-touch-icon" sizes="76x76" href="/static/img/appicons/icon_76x76@1x.png" />
<link rel="apple-touch-icon" sizes="152x152" href="/static/img/appicons/icon_76x76@2x.png" />
<link rel="apple-touch-icon" sizes="58x58" href="/static/img/appicons/icon_58x58@1x.png" />
<!--Specify icons for Android devices-->
<link rel="icon" sizes="192x192" href="/static/img/appicons/icon_192x192.png">
<link rel="icon" sizes="128x128" href="/static/img/appicons/icon_128x128.png">
{% include 'seo_meta.html.j2' %}
{% with title=title, description="Embed your Discord server in any website. Titan is hassle free and designed as easy to setup." %}