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.

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:

User Experience through digital interfaces, interaction, branding and visual design has been her passion and focus since she created her first website at age 14. She is a solution architect for Power Platform, specializing in Power Apps Portals. She is a Business Applications MVP and was named one of the top 50 women in tech in Norway in 2022. Currently working as Low Code Practice Lead at Itera.

5 Comments

  1. Akash Patel
    19/10/2023
    Reply

    I followed your step and In Notes table I click on + icon and then new notes. I provided the notes name and click on attachment icon to upload the ico file. I also drag and drop the file inside notes section and i clock in the image icon to upload the file but on my power page it is not showing the icon. Is there something I am missing?

    • 09/11/2023
      Reply

      Hi. Have you made sure to sync the changes in the Design Studio, and then Publish? It might take some time before it appears. Please report back if it is still not working and I’ll help you out.

  2. Jaco
    29/04/2024
    Reply

    Hi.. I believe the UI has changed and cannot see “Notes” when I create a web file. I uploaded the favicon.ico as a file content and had to do a “Clear cache and Hard refresh” to see it.

    • 15/05/2024
      Reply

      Hi Jaco. Thank you for pointing this out. You are right, it’s no longer needed to add a note; you can simply upload the favicon as a file on the webfile. Neat, right?! Killing the cache and a hard refresh is always the way to go with Power Pages Portals. Great job, and thank you for your comment.

Leave a Reply

Your email address will not be published. Required fields are marked *