Add browser icon (favicon) to Power Pages

Last updated on 11/11/2023

This blog post will show you how to add a browser icon, or favicon, as it is really called, to your Power Pages or Power Apps Portal.

This small, smart, and fabulous free tool that I use in every project.

Meet https://www.favicon.cc/

This website might look unsafe and old, but I have used it for over 15 years and have never experienced anything bad related to it.

Well – when you have used a tool for 15 years it’s probably a good idea to do quick search to fid out is anything has changed. And changed it has. It is no longer as simple as uploading a single .ico file to your root directory and let the browser handle it. We now need to consider mobile users that add a shortcut your site to their home screen, people installing your website as an webapp and loads more. To make sure this looks good and work on all devices and browsers, we need to add a bit more then the humble 16×16 px image.

I found this blog post useful:
https://medium.com/web-dev-survey-from-kyoto/favicon-nightmare-how-to-maintain-sanity-7628bfc39918

The optimal favicon is:

• 16×16 pixels (or at least square)
• Transparent
• Single colour
• Simplistic

Upload your image, select “keep dimensions” and hit the “Upload” button.

You will be able to see a preview of the favicon in the browser itself, and if you are happy with what you see then you can download the favicon file.

You would think that we could simply upload the favicon to the Power Pages Media Library, but no. The library doesn’t accept other files then .jpg, .jpeg, .bmp, .gif and .png.

We will have to do this the old-fashioned way; create a web file in the Portal Management App.

Create a web file

From Power Pages Studio, click the three dots at the bottom of the left-hand menu, and choose “Portal Management App”.

In the new tab that opens

1. Find “Web files” in the left menu.
2. Click “New” to create a new web file
3. Fill in the form. Make sure you enter the correct portal in “Website”.
   

1. Open the “Notes” tab
2. Click the “+”
3. Choose “Note”

Select the favicon.ico you downloaded

Click the “Add note” button at the bottom of the field.

Save the web file

Refresh your portal cache and refresh the portal in the browser to see your changes. It might take a minute or two before you see the change.

Nice job!

Hope you are satisfied with that. Good luck! Happy Portaling!