Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.

Custom Mobile Apps Icon Easy Install on Blogs or Blogger Template

Personalizing your Blogger blog is not only on how it looks on the web or mobile, but Blogger users can extend their blog branding by using custom icons displayed, just like mobile apps do.

In 2016, it has been reported over 90% of mobile users uses mobile apps for internet search, so why not create an "app like" icon so your blog readers can "install" on their mobile devices home screen & have direct access to your blog at Blogger.

AMP HTML Blogger Blog to Mobile Apps Instantly

It is pretty much easy & straight forward for Blogger template HTML or any web pages. All you need is to prepare several images (preferably squared in .png fomat) & upload somewhere on the internet where you have full access & control.

Create your Icon Images


Create your icons images using any favorite image application at your computer & prepare several image sizes to accommodate icons for various mobile devices. The images sizes, in pixels:-

  • 76px x 76px - for iOS
  • 120px x 120px - for iOS
  • 128px x 128px - Android & general mobile
  • 152px x 152px  - for iOS
  • 180px x 180px - for iOS
  • 192px x 192px - Android & general mobile
  • 215px x 215px - for iOS

Upload your Icon Images


Upload your images anywhere you have access to the image URLs. On blogger you can upload using Blogger posts or pages, click Upload Image icon & select the images from your computer to start uploading your images.

Once the image have been rendered on your post editor, right click & select Copy Image Address to get the image URL hosted on Blogger image servers. Save the URLs using your text editor as it will be used later.

On Blogger to access your images uploaded via Blogger, you can go to Google's Album Archive to view your uploaded images in its respective folder by blog name.


Add Icon Link Tags


In your web page or Blogger Template HTML, copy below codes & paste it before </head> tag.

<!-- meta tags for mobile, Android & iOS detection -->
<meta content='yes' name='mobile-web-app-capable'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>

<!-- Icons link tags -->

<link href='https://your-icon-image-url.png' rel='apple-touch-icon' sizes='76x76'/>
  
<link href='https://your-icon-image-url.png' rel='apple-touch-icon' sizes='120x120'/>

<link href='https://your-icon-image-url.png' rel='icon' sizes='128x128'/>

<link href='https://your-icon-image-url.png' rel='apple-touch-icon' sizes='152x152'/>

<link href='https://your-icon-image-url.png' rel='apple-touch-icon' sizes='180x180'/>

<link href='https://your-icon-image-url.png' rel='icon' sizes='192x192'/>

<link href='https://your-icon-image-url.png' rel='apple-touch-icon' sizes='215x215'/>

Replace the href attribute value to the icon images URLs you have saved earlier.

Click Save Template and view your blog icons in mobile devices.

How to Add Blog Apps Icons in Mobile Home screen


On mobile web browsers, you can ask your readers to add your blog to their mobile homescreen or app drawer (if available) by doing so:-

  1. Open the blog homepage using any mobile web browser.
  2. Tap browser settings & select Add to Home screen
  3. A new panel will appear, your mobile icon emerges with your blog name to edit its text
  4. Select Add to Home screen
  5. Preview the new app icon on mobile homescreen.

AMP HTML Blogger Mobile Apps Instantly

That's all it takes, making your blog more accessible to readers both on computer & making it easier to access on mobile devices.

So what do you think? Did we missed out on icons sizes that should be included for unfamiliar devices? Leave a comment below.

Have a comment/question? Add it here... expand_more

Comment on Google+ expand_more

Comment on Facebook expand_more

Have a code snippet to share? Format RAW codes here... expand_more

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Blogr-AMP Blogger AMP HTML Template
Rated 5/5 based on 98 reviews
Install custom mobile apps icon for Blogger blog template or AMP HTML websites use add to Home screen on any mobile devices enhance blog/web branding with customize user added icon images for Android, iPhone, Windows Phone and others access instantly on the go.
Blogr-AMP: Custom Mobile Apps Icon Easy Install on Blogs or Blogger Template
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support Custom Mobile Apps Icon Easy Install on Blogs or Blogger Template.
mail