# Rebranding Surface AR Campaign

[![branding.jpg](https://help.marvinxr.com/uploads/images/gallery/2024-03/scaled-1680-/branding.jpg)](https://help.marvinxr.com/uploads/images/gallery/2024-03/branding.jpg)

##### Everything You Need To Know About WebAR Rebranding <span class="x1xsqp64 xiy17q3 x1o6pynw x19co3pv xdj266r xcwd3tp xat24cr x39eecv x2b8uid" data-testid="emoji"><span class="xexx8yu xn5pp95 x18d9i69 x2fxd7x x1yqt14a x1bhl96m">✌️</span></span>

##### Change Page Title

Open your Surface AR campaign and go to Web Editor and click on the Edit button.

Find the **&lt;title&gt;** tag in the beginning of the page. Update your page name between the tags and Save.

```html
<title>Your Page Name</title>
```

[![pagetitle.jpg](https://help.marvinxr.com/uploads/images/gallery/2024-03/scaled-1680-/pagetitle.jpg)](https://help.marvinxr.com/uploads/images/gallery/2024-03/pagetitle.jpg)

#####  

##### Change Page Favicon (URL icon)

Find the comment ***Change Favicon*** and update the following **&lt;link&gt;** tag. Paste the address of the new favicon (must be a PNG file) link address to the **href** value and Save.

```html
<link rel="shortcut icon" type="image/x-icon" href="Insert PNG image file address">
```

[![favicon.jpg](https://help.marvinxr.com/uploads/images/gallery/2024-03/scaled-1680-/favicon.jpg)](https://help.marvinxr.com/uploads/images/gallery/2024-03/favicon.jpg)

#####  

##### Change Background Color

Find the comment in the CSS, the following comment - <span style="color: rgb(35, 111, 161);">/\*Change color of the background page \*/</span>  
Change the default hex color code for background and Save. Find color hex codes from [**here**](https://htmlcolorcodes.com/).

```
background: #ABA8A8;
```

[![coloring.jpg](https://help.marvinxr.com/uploads/images/gallery/2024-03/scaled-1680-/coloring.jpg)](https://help.marvinxr.com/uploads/images/gallery/2024-03/coloring.jpg)

#####  

##### Change QR Window Size

If you want to change the default QR popup window default sizing, please change value next to the following comments: <span style="color: rgb(35, 111, 161);">/\* QR Window CSS \*/</span>

To change popup window width - change the values next to<span style="color: rgb(35, 111, 161);"> /\*Change QR window width\*/</span>  
To change popup window height- change the values next to <span style="color: rgb(35, 111, 161);">/\*Change QR window height\*/</span>

```css
#qrWindow{
position: absolute;
margin:auto;
background: rgb(255,255,255);
width: 100vmin;  /*Change QR window width*/
max-width: 330px;
height: 100vmin; /*Change QR window height*/
max-height: 400px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
z-index: 10000;
border: solid 1px gray;
border-radius: 3%;
}
```

#####  

##### Change Logo in QR Code

This is quite easy. Simply follow this existing tutorial to <span style="text-decoration: underline;">[**change logo in QR code**](https://help.marvinxr.com/books/marvin-xr-help-manual/page/create-custom-qr)</span>.