Add Site icon to your Browser Tabs and your iPad and Android Screens

Blog Post created by csergent08 Champion on Jan 23, 2015

Sometimes you have to back away from GIS and just focus on the web. That's what I am doing in this post. I am going to walk you through how to add an icon to your browser tab for your website and then how to add an icon to either your iPad or your Android tablet. First you need an icon. A lot of times you have to modify an icon and remove white background. Let me show you how to do that with GIMP and then resize your image for display on a tab as it does here on geonet. Consider that you may not want to remove which background like I did in this video but may want to change the color of an icon as the area where I removed the white will be replaced with black. If you are okay with that, then just follow the video.




Just like I did in the video, follow the same steps, only make your next icon 114px X 114px for your iPad or Android device. The next thing that you want to do is to add these new images to your website. I like to place mine in an images folder.


The first line of code will display your icon on the browser tab. Place the following code inside of the head section of your web page with the name of your image in place of widget.png. Make sure it's the image that you created that is 32px X 32px


<link rel="SHORTCUT ICON" href="images/widget.png" />


With that line of code, you now will have your icon displaying on browser tabs. Now we need a line of code so that a user can add your custom icon to their device which will look like an app icon. Just replace iWidget.png with the name of your image. Again it's the one that has a size of 114px X 114px. And now place this line of code in the head section of your web page:


<link rel="apple-touch-icon" href="images/iWidget.png" />


With this, once a user navigates to your site with their iPad or Android device, all they have to do is to click Add to Home Screen and your custom icon will display along with all the rest of the icons for apps.