Project customization checklist

After generating a new JHipster application, apply the following customizations before the first production deployment. This guide reflects the current project structure using Angular CLI with custom webpack (not the legacy pure webpack setup).

File paths in this guide use forward slashes and are relative to the project root. All SCSS files use the Angular component naming convention (e.g. home.component.scss, not home.scss).

1. Loading and error page

Replace the default JHipster loading animation and developer error page with a user-friendly alternative.

See Loading and error page for the full guide and templates.

2. Branding images

Image sources

Free image resources for logos and icons:

Logo image sizes

Prepare three versions of your application logo:

File Size Usage

{name}-s.png

100px x 100px

Navbar logo

{name}-m.png

Custom, portrait aspect

Home page (standard displays)

{name}-l.png

800px x 800px

Home page (high-DPI / retina displays)

Place all three in src/main/webapp/content/images/.

Files to update

File What to change

src/main/webapp/app/home/home.component.scss

Update the .logo background-image URLs to point to your -m.png and -l.png files. Set appropriate width and height.

src/main/webapp/app/layouts/navbar/navbar.component.scss

Update the .logo-img background-image URL to point to your -s.png file. Adjust height and width if needed.
Example: home.component.scss logo section
.logo {
  display: inline-block;
  width: 100%;
  max-width: 250px;
  height: 250px;
  background: url('../../content/images/my-app-m.png') no-repeat center center;
  background-size: contain;
}

@media only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .logo {
    background: url('../../content/images/my-app-l.png') no-repeat center center;
    background-size: contain;
  }
}
Example: navbar.component.scss logo section
.logo-img {
  height: 45px;
  width: 45px;
  display: inline-block;
  vertical-align: middle;
  background: url('../../../content/images/my-app-s.png') no-repeat center center;
  background-size: contain;
  margin-right: 10px;
}

3. Favicon

Generate favicons

  1. Choose a source image (ideally a square SVG or high-resolution PNG).

  2. Go to RealFaviconGenerator.

  3. Upload your image and configure the options.

  4. In the Favicon Generator Options, set the relative path to:

    content/images

  5. Generate and download the favicon package.

Install favicons

  1. Delete the existing contents of src/main/webapp/content/images/ (except your logo files).

  2. Copy the generated image files into src/main/webapp/content/images/. Do not copy site.webmanifest — use manifest.webapp instead (see below).

The expected set of favicon files:

content/images/
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── mstile-70x70.png
├── mstile-144x144.png
├── mstile-150x150.png
├── mstile-310x150.png
├── mstile-310x310.png
└── safari-pinned-tab.svg

Update manifest.webapp

Edit src/main/webapp/manifest.webapp to include the correct icon paths and application name:

{
    "name": "Application Name",
    "short_name": "",
    "icons": [
        {
            "src": "./content/images/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "./content/images/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#ffffff",
    "background_color": "#ffffff",
    "display": "standalone"
}

Update browserconfig.xml

Edit src/main/webapp/browserconfig.xml to reference the correct tile image path:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
    <msapplication>
        <tile>
            <square150x150logo src="content/images/mstile-150x150.png"/>
            <TileColor>#da532c</TileColor>
        </tile>
    </msapplication>
</browserconfig>

Update index.html

In src/main/webapp/index.html, update the <head> section to reference favicons from content/images/:

<link rel="apple-touch-icon" sizes="180x180" href="content/images/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="content/images/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="content/images/favicon-16x16.png" />
<link rel="mask-icon" href="content/images/safari-pinned-tab.svg" color="#5bbad5" />
<link rel="shortcut icon" href="content/images/favicon.ico" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-config" content="browserconfig.xml" />

Remove any duplicate <meta name="theme-color"> tags and set the desired colour.

Update swagger-ui/index.html

Edit src/main/webapp/swagger-ui/index.html to point favicon references to the correct path:

<link rel="icon" type="image/png" href="content/images/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="content/images/favicon-16x16.png" sizes="16x16" />

The default JHipster swagger-ui uses relative paths like ./favicon-32x32.png. These must be updated to use the content/images/ path to match the new favicon location.

4. Application name

Update the application title in the following files:

File What to change

src/main/webapp/index.html

Set the <title> tag to your application name.

src/main/webapp/app/home/home.component.html

Update the heading and welcome text.

src/main/webapp/app/layouts/navbar/navbar.component.html

Update the <span> with jhiTranslate="global.title" or replace the text directly.

src/main/webapp/swagger-ui/index.html

Update the <title> tag.

src/main/webapp/manifest.webapp

Update the "name" field.

If the application uses i18n, also update the translation files under src/main/webapp/i18n/.

5. Navbar menu

Customise the navigation menu entries in:

src/main/webapp/app/layouts/navbar/navbar.component.html

The navbar uses Angular routing with routerLink directives and FontAwesome icons via fa-icon. JHipster marks insertion points with needle comments:

  • jhipster-needle-add-element-to-menu — for top-level menu items

  • jhipster-needle-add-entity-to-menu — for entity menu items

  • jhipster-needle-add-element-to-admin-menu — for admin menu items

Remove unused default menu items and add your application-specific entries.

Update the footer component to reflect your company name and copyright notice.

File: src/main/webapp/app/layouts/footer/footer.component.html
<footer class="p-3 mt-auto bg-light border-top">
  <div class="container-fluid text-center">
    <p class="mb-0">Copyright &copy; 2025 - Your Company Name</p>
  </div>
</footer>

If the application uses i18n, the footer may use a jhiTranslate directive instead of hardcoded text. In that case, update the corresponding translation key in src/main/webapp/i18n/en/global.json.

7. Spring Boot banner

Replace the default JHipster ASCII art banner with your application name.

File: src/main/resources/banner.txt
    _                _ _           _   _               _   _
   / \   _ __  _ __ | (_) ___ __ _| |_(_) ___  _ __   | \ | | __ _ _ __ ___   ___
  / _ \ | '_ \| '_ \| | |/ __/ _` | __| |/ _ \| '_ \  |  \| |/ _` | '_ ` _ \ / _ \
 / ___ \| |_) | |_) | | | (_| (_| | |_| | (_) | | | | | |\  | (_| | | | | | |  __/
/_/   \_\ .__/| .__/|_|_|\___\__,_|\__|_|\___/|_| |_| |_| \_|\__,_|_| |_| |_|\___|
        |_|   |_|

${AnsiColor.BRIGHT_BLUE}:: Developed by Your Company :: Running Spring Boot ${spring-boot.version} ::
:: https://www.example.com ::${AnsiColor.DEFAULT}

Use an ASCII art generator such as TAAG to create the banner text. The banner supports Spring Boot property placeholders (e.g. ${spring-boot.version}) and ANSI colour codes (e.g. ${AnsiColor.BRIGHT_BLUE}).

Deprecated notes

This guide replaces the legacy jhipster-customizing.adoc notes. Key changes from the legacy version:

Topic What changed

SCSS file names

Renamed from home.scss / navbar.scss to home.component.scss / navbar.component.scss (Angular component convention).

Build system

webpack.common.js and the CopyWebpackPlugin configuration no longer apply. Current projects use Angular CLI with @angular-builders/custom-webpack and webpack/webpack.custom.js.

Favicon path in swagger-ui

Standardised to content/images/ across all projects. The legacy notes referenced content/icons/ for some projects.

Loading page

Now documented separately with reusable templates. See Loading and error page.