Logo Favicons sizes supported in on device and browser can differ in other devices and browsers. For that reason, Every browser has the most preferred size of website favicon or icon. Today we will take a moment to know how to set up all favicon sizes need for all browsers and devices to make sure that home screen website icons and browsers will show your favicon image. Let's dig into ways to add them in your Blogger & Wordpress websites.
Steps To add All Favicon Sizes For Browsers
1. Edit the below Resolutions Sizes of your icon .a. 114x114
b. 72x72
c. 120x120
d. 76x76
e. 152x152
f. 32x32
g. 16x16
h. 70x70
i. 150x150
g. 310x310save
2. Host Them in your cloud and copy their URL and replace them in the below codes before placing them in your website HTML.
The below are The all sizes that any device and browser will need to display your website favicon. Copy and paste the code to your HTML code of your blogger or WordPress template and later change the URLs to where you have hosted your own favicon sizes.
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="#" />That`s all now add them below head in your website HTML and your website will be branded in every device and browser.
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="#" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="#" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="#" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="#" />
<link rel="icon" type="image/png" href="#" sizes="196x196" />
<link rel="icon" type="image/png" href="#" sizes="96x96" />
<link rel="icon" type="image/png" href="#" sizes="32x32" />
<link rel="icon" type="image/png" href="#" sizes="16x16" />
<link rel="icon" type="image/png" href="#" sizes="128x128" />
<meta name="msapplication-TileImage" content="#" />
<meta name="msapplication-square70x70logo" content="#" />
<meta name="msapplication-square150x150logo" content="#" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="#" />