CODEWITHSUNDEEP
htmlionic-frameworkbrowser
Giuseppe Faraci
Giuseppe Faraci

Reputation: 310

Set title in browser for Ionic apps

I am developing an Ionic App that will run as a web app on browsers too.

In html, I have the following code:

<ion-header>
  <ion-navbar>
    <ion-title>Login</ion-title>
  </ion-navbar>
</ion-header>

I thought that the ion-title tag was enough to change the title on the browser tab, but it seems it isn't. It remains "Ionic App". How can I change it?

Thanks

Upvotes: 9

Views: 4552

Answers (3)

Robert
Robert

Reputation: 431

Solution for Ionic 5 + React:

Most likely you're working on files in /src/ while the compiled files go into www/.

You may have wondered why /src/index.html or /src/manifest.json are not there or why they do have no effect if manually created.

Simply have a look into /public/ there are your assets (App icon and Favicon for Web/PWA) and the blueprints of index.html and manifest.json.

/public/index.html looks like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Ionic App</title>

    <base href="/" />

    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <link rel="shortcut icon" type="image/png" href="%PUBLIC_URL%/assets/icon/favicon.png" />

    <!-- add to homescreen for ios -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-title" content="Ionic App" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  </head>

  <body>
    <div id="root"></div>
  </body>

</html>

I expected Ionic to take into account which App name you put into /ionic.config.json, but as you can see, it's hardcoded to be "Ionic App".

Upvotes: -1

pszaba
pszaba

Reputation: 1064

Ionic 5 compatible solution

import { Title } from '@angular/platform-browser';

...

export class MyPage {

    constructor(private titleService: Title) {

        this.titleService.setTitle('Title');
    }
}

Upvotes: 2

Toby Okeke
Toby Okeke

Reputation: 654

Check your "index.html" file in the src folder. You would see the "title" html tag. Change it there and it would reflect.

Upvotes: 11

Related Questions