Add browser icon (favicon) to Power Pages

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.

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!

Get new blog posts right to your inbox

Ulrikke Akerbæk Written by:

Ulrikke has a BSc in Multimedia from Karlstad University, and has since worked with front-end development and advisory consulting in Microsofts product portfolio. She is a Power Apps Portals professional at Skill AS in Norway.

One Comment

Leave a Reply

Your email address will not be published.