Microsoft Entra ID

Customer intent: As a Microsoft Entra administrator, I want to customize the sign-in experience for my organization's users so that I can provide a c…

In brief

Instructions about how to add your organization's custom branding to the Microsoft Entra sign-in experience.

Documentation change

:::image type="content" source="media/how-to-customize-branding/sign-in-page-map.png" alt-text="Screenshot of the sign-in page, with each of the company branding elements highlighted." lightbox="media/how-to-customize-branding/sign-in-page-map-expanded.png":::

  1. Favicon: Small icon that appears on the left side of the browser tab.
  2. Header: Space across the top of the sign-in page, behind the header logo.
  3. Header logo: Logo that appears in the upper-left corner of the sign-in page.
  4. Background image: The entire space behind the sign-in box.
  5. Page background color: The entire space behind the sign-in box.
  6. Banner logo: Logo that appears at the top of the sign-in box
  7. Sign-in page title: Larger text that appears below the banner logo.
  8. Sign-in page description: Text to describe the sign-in page.
  9. Username hint and text: The text that appears before a user enters their information.
  10. Self-service password reset: A link you can add below the sign-in page text for password resets.
  11. Sign-in page text: Text you can add below the username field.
  12. Footer link: Privacy & Cookies: Link you can add to the lower-right corner for privacy information.
  13. Footer: Terms of Use: Text in the lower-right corner of the page where you can add Terms of use information.
  14. Footer: Space across the bottom of the page for privacy and Terms of Use information.
  15. Template: The layout of the page and sign-in boxes.
  1. Favicon: Small icon that appears on the left side of the browser tab.
  2. Header: Space across the top of the sign-in page, behind the header logo.
  3. Header logo: Logo that appears in the upper-left corner of the sign-in page.
  4. Background image: The entire space behind the sign-in box.
  5. Page background color: The entire space behind the sign-in box.
  6. Banner logo: Logo that appears at the top of the sign-in box
  7. Sign-in page title: Larger text that appears below the banner logo.
  8. Sign-in page description: Text to describe the sign-in page.
  9. Username hint and text: The text that appears before a user enters their information.
  10. Self-service password reset: A link you can add below the sign-in page text for password resets.
  11. Sign-in page text: Text you can add below the username field.
  12. Footer link: Privacy & Cookies: Link you can add to the lower-right corner for privacy information.
  13. Footer: Terms of Use: Text in the lower-right corner of the page where you can add Terms of use information.
  14. Footer: Space across the bottom of the page for privacy and Terms of Use information.
  15. Template: The layout of the page and sign-in boxes.

How to navigate the company branding process

Basics

  • Favicon: Select a PNG or JPG of your logo that appears in the web browser tab.
  • Favicon: Select a PNG or JPG of your logo that appears in the web browser tab.
  • Image size: 32x32 px
  • Max file size: 5 KB

:::image type="content" source="media/how-to-customize-branding/favicon-example.png" alt-text="Screenshot of sample favicons in a web browser.":::

  • Background image: Select a PNG or JPG to display as the main image on your sign-in page. This image scales and crops according to the window size, but the sign-in prompt might partially block it.
  • Background image: Select a PNG or JPG to display as the main image on your sign-in page. This image scales and crops according to the window size, but the sign-in prompt might partially block it.
  • Image size: 1920x1080 px
  • Max file size: 300 KB
  • Page background color: If the background image isn't able to load because of a slower connection, your selected background color appears instead.
  • Page background color: If the background image isn't able to load because of a slower connection, your selected background color appears instead.

Layout

  • Visual Templates: Customize the layout of your sign-in page using templates or a custom CSS file.
  • Visual Templates: Customize the layout of your sign-in page using templates or a custom CSS file.
- Choose one of two **Templates**: Full-screen or partial-screen background. The full-screen background could obscure your background image, so choose the partial-screen background if your background image is important.
- The details of the **Header** and **Footer** options are set on the next two sections of the process.

:::image type="content" source="media/how-to-customize-branding/layout-visual-templates.png" alt-text="Screenshot of the Layout tab for customizing branding.":::

  • Custom CSS: Upload a custom CSS file to replace the Microsoft default style of the page.
  • Custom CSS: Upload a custom CSS file to replace the Microsoft default style of the page.
- [Download the CSS template](https://download.microsoft.com/download/7/2/7/727f287a-125d-4368-a673-a785907ac5ab/custom-styles-template-013023.css).
- View the [CSS template reference guide](reference-company-branding-css-template.md).

Header

If you haven't enabled the footer, go to the Layout section and select Show footer. Once enabled, adjust the following settings.

  • Uncheck this option to hide the default Microsoft link.
  • Optionally provide your own Display text and URL. The text and links don't have to be related to privacy and cookies.
  • Custom URLs are displayed as text and aren't clickable.
  • Uncheck this option to hide the default Microsoft link. Optionally provide your own Display text and URL.
  • The text and links don't have to be related to your terms of use.

Sign-in form

  • Banner logo: Select a PNG or JPG image file of a banner-sized logo (short and wide) to appear on the sign-in pages.
  • Banner logo: Select a PNG or JPG image file of a banner-sized logo (short and wide) to appear on the sign-in pages.
  • Image size: 245x36 px
  • Max file size: 50 KB
  • Square logo (light theme): Select a square PNG or JPG image file of your logo to be used in browsers that are using a light color theme. This logo is used to represent your organization on the Microsoft Entra web interface and in Windows.
  • Square logo (light theme): Select a square PNG or JPG image file of your logo to be used in browsers that are using a light color theme. This logo is used to represent your organization on the Microsoft Entra web interface and in Windows.
  • Image size: 240x240 px
  • Max file size: 50 KB
  • Square logo (dark theme) Select a square PNG or JPG image file of your logo to be used in browsers that are using a dark color theme. This logo is used to represent your organization on the Microsoft Entra web interface and in Windows. If your logo looks good on light and dark backgrounds, there's no need to add a dark theme logo.
  • Square logo (dark theme): Select a square PNG or JPG image file of your logo to be used in browsers that are using a dark color theme. This logo is used to represent your organization on the Microsoft Entra web interface and in Windows. If your logo looks good on light and dark backgrounds, there's no need to add a dark theme logo.
  • Image size: 240x240 px
  • Max file size: 50 KB
  • Username hint text: Enter hint text for the username input field on the sign-in page. If guests use the same sign-in page, we don't recommend using hint text here.
  • Username hint text: Enter hint text for the username input field on the sign-in page. If guests use the same sign-in page, we don't recommend using hint text here.
  • Sign-in page text: Enter text that appears on the bottom of the sign-in page. You can use this text to communicate additional information, such as the phone number to your help desk or a legal statement. This page is public, so don't provide sensitive information here. This text must be Unicode and can't exceed 1,024 characters.
  • Sign-in page text: Enter text that appears on the bottom of the sign-in page. You can use this text to communicate additional information, such as the phone number to your help desk or a legal statement. This page is public, so don't provide sensitive information here. This text must be Unicode and can't exceed 1,024 characters.
To begin a new paragraph, press the Enter key twice. You can also change text formatting to include bold, italics, an underline, or clickable link. Use the following syntax to add formatting to text: