Change Site Icon In SharePoint App Using NAPA Development Tool

Before reading this article, I highly recommend reading the following previous part of the series:

• SharePoint using Napa Development Tool
  

In Part 1, we discussed how to create a new app in office 365 site using Napa development tools. In this article we are going to see how to change site icon/logo in SharePoint app using NAPA development tools in Office 365 site.

The following are the steps to accomplish the desired operation. Let’s start..

1. Now we are going to replace new site icon/logo in newly created app. To do the changes, modify App.js script.
   
   
   
   
2. Now we are going to modify and add new script into App.js to reflect the changes into the app.
   
   
3. Click on Script on left navigation and open App.js file. As you can see open file contains default script which give result of current user in the default .asp page.
   
   
4. Cool, let us write our script to change the title icon in app. By default, it shows the following SharePoint Site icon/logo image.
   
   
5. Out moto is to change the site Icon/logo in the app. Let's go to Napa development tool. Left navigation contains Images folder, just right click on it, click Upload files and select your file to upload into folder from the desktop.
   
   
   
   
6. The following figure shows file or image uploaded successfully into the folder. Copy image location path, here the location of image file is: "../Images/Icon.png"
   
   
   
   
7. Now go to Scripts folder and reopen App.js file. App.js contains default script to get the current user functionality as in the following image:
   
   
   
   
8. Add our script to replace the site icon in appweb. In function getPublishSPIcon(), you can set image height, width properties also. Some class and source of image icon get the desired properties.
   
   
9. Now to build the app click on Run Project on the left bar.
   
   
   
   
10. New window with uploading status bar shows our project is being packaged and installed on our SharePoint server.
    
    
    
    
11. Once uploading finishes, go to site home page to see the latest built app. The following figure shows all the apps built with version and creation date.
    
    
    
    
12. Click on recently build app to see the result. You see now old site icon image replaced with new one which we have uploaded into the folder.
    
    
13. This way we can replace site icon logo into SharePoint app using JavaScript.