Change your logo

Suggest Edits

It probably goes without saying that the logo is the primary way that users where they are and which website they’re about to log on to. For example, in the sign-in screen shown below, it’s obvious that you’re about to log on to an Akamai website:

By default, the Akamai logo used in the preceding screen is used on all Hosted Login screens. And that’s great … as long as you are running an Akamai website. But what if you aren’t running an Akamai website? In that case, you’d probably prefer to display your own logo on your Hosted Login screens. Can you do that, can you swap out your logo for the default Akamai logo? You bet you can. In fact, all you have to do is:

Place the image file for your new logo on a publicly-available website. And before you ask, yes, you are limited to one such image file: you must use the same logo on all your screens.
Add the theming.logoURL setting to your Hosted Login application client, and then set the value of the new setting to the logo URL. This latter step can be performed by using either the Identity Cloud Console, or the Identity Cloud's Configuration APIs.

When configuring this setting, just make sure that you specify the correct URL. For example, if you set theming.logoURL to an invalid URL then your Hosted Login screens will look similar to the following, with the “logo” consisting of the word logo:

Probably not what you had in mind.

And that’s a good question: does it matter what size you make your logo? As a matter of fact, it does. Hosted Login doesn’t resize logos to fit your screens; instead, Hosted Login stretches your screens to fit your logo. For example, here’s what your sign-in screen looks like when using a logo 1920 pixels by 960 pixels:

Incidentally, that’s with the browser resolution set to 67%.

And here’s one that uses a logo 900 pixels by 150 pixels (with the resolution set to 100%):

That’s better but, still …. So, yes, you’ll need to adjust your logo size based on the size of your screens.

Use Console to change your logo

To change your logo by using the Identity Cloud Console, complete the following procedure:

In Console, click Manage Properties and then click the name of your application client:
On the Edit page, click Edit Settings:
On the Edit Settings page, click the Add Setting icon:
In the field for the new setting, type theming.logoURL and then click Create theming.logoURL:
In the Value field for the theming.logoURL setting, enter the URL to your logo. For example:
```
https://dyzz9obi78pm5.cloudfront.net/app/image/id/5e57fcbc6e121c9222708af3/n/test-logo.png
```
Your new setting should look similar to this:
Click Save Settings to save your changes:

Use the Configuration APIs to change your logo

To change your logo by using the Configuration APIs, start by calling the /config/{appId}/clients/{apiClientId}/settings operation and the GET method to return the current properties and property values of your application client. For example, if your application client has the client ID hrhtj4p8dz9wqhwtpuvg2k8ndet748vs, a Curl command to return the current properties and property values will look similar to this:

curl -L -X GET \
 'https://v1.api.us.janrain.com/config/79y4mqf2rt3bxs378kw5479xdu/clients/hrhtj4p8dz9wqhwtpuvg2k8ndet748vs/settings' \
-H 'Authorization: Basic 6rhfZmc2ZjQ0bXNhYzN2ZXBqanZ4Z2d6dnQzZTNXNhY6OTVjY3hrN2N6YnZ1eng2ZHB0ZTVrpo9uZGo1Ynpxt5U=='

In turn, your API response will look like the following (with the obvious caveat that the properties and property values you get back depend on how your application client is configured):

{
 "user_entity_type": "GREG_DEMO",
 "_self": "/config/79y4mqf2rt3bxs378kw5479xdu/clients/hrhtj4p8dz9wqhwtpuvg2k8ndet748vs/settings",
 "default_flow_version": "HEAD",
 "default_flow_name": "videos",
 "regex_standard_newPassword": ".*",
 "janrainOidcClientId": "70a45721-c6ef-4d7c-91ff-f14e9346b8b6",
 "verify_emai_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/verify-account?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6",
 "site_name": "Test Public Client",
 "password_recover_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/reset-password?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6"
}

After you have the API response:

Copy the entire response.
Create a new API call, one that uses the /config/{appId}/clients/{apiClientId}/settings operation and the PUT method.
Paste the copied API response (still in JSON format) into the request body of the new API call.

For example, if you’re using Postman your screen will look similar to this:

In the custom property of the request body, add the theming.logoURL setting, configuring the value of the new property to the URL of your new logo. For example:

"custom": {"theming.logoURL": "https://dyzz9obi78pm5.cloudfront.net/app/image/id/5e57fcbc6e121c9222708af3/n/test-logo.png"},

📘
If your request body doesn’t have a custom property you’ll need to add one, and then configure the theming.logoURL setting inside the new custom property.

Your request body should look like this:

{
 "user_entity_type": "GREG\_DEMO",
 "_self": "/config/79y4mqf2rt3bxs378kw5479xdu/clients/hrhtj4p8dz9wqhwtpuvg2k8ndet748vs/settings",
 "default_flow_version": "HEAD",
 "default_flow_name": "videos",
 "custom": {"theming.logoURL": "https://dyzz9obi78pm5.cloudfront.net/app/image/id/5e57fcbc6e121c9222708af3/n/test-logo.png"},
 "verify_email_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/verify-account?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6",
 "site_name": "Test Public Client",
 "password_recover_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/reset-password?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6"
}

And your Curl command should look like this:

curl -L -X PUT 'https://v1.api.us.janrain.com/config/79y4mqf2rt3bxs378kw5479xdu/clients/hrhtj4p8dz9wqhwtpuvg2k8ndet748vs/settings' \
-H 'Authorization: Basic 6rhfZmc2ZjQ0bXNhYzN2ZXBqanZ4Z2d6dnQzZTNXNhY6OTVjY3hrN2N6YnZ1eng2ZHB0ZTVrpo9uZGo1Ynpxt5U==' \
-H 'Content-Type: application/json' \
--data-raw '{
 "user_entity_type": "GREG\_DEMO",
 "_self": "/config/79y4mqf2rt3bxs378kw5479xdu/clients/hrhtj4p8dz9wqhwtpuvg2k8ndet748vs/settings",
 "default_flow_version": "HEAD",
 "default_flow_name": "videos",
 "custom": {"theming.logoURL": "https://dyzz9obi78pm5.cloudfront.net/app/image/id/5e57fcbc6e121c9222708af3/n/test-logo.png"},
 "verify_email_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/verify-account?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6",
 "site_name": "Test Public Client",
 "password_recover_url": "https://v1.api.us.janrain.com/e0a70b4f-1eef-4856-bcdb-f050fee66aae/auth-ui/reset-password?client_id=70a45721-c6ef-4d7c-91ff-f14e9346b8b6"
}

Now make your API call. If all goes well, you’ll get back both a 200 OK HTTP status code and a response that includes the new set of property values assigned to the application client.

📘
Why do you have to copy all the property values and include all those values in your API call? That’s because the PUT method is all-or-nothing: it replaces all the settings currently assigned to the application client with the settings you have explicitly specified in your API call. Suppose your application client includes the default_flow_name and default_flow_version settings, but you forget to include those in your API call. When you make your call, those two settings will be deleted from the application client.

Verify your new logo

To verify that Hosted Login is using your new logo, wait a minute or two for your changes to take effect, then access your Hosted Login sign-in screen. If everything went according to plan, the default logo will be replaced by your custom logo:

If, for some reason, you prefer to go back to the default Akamai logo, simply delete the theming.logoURL setting from your application client.

Updated almost 2 years ago