Likewise with regard to the favicon which may still be
widely ignored by some bloggers. It is not enough to just rely on favicon.ico
in the smartphone era now, but we need to add a favicon that is also compatible
with certain devices such as Android, Apple, and others so that the blog
favicon will appear (if not correct then what appears is only a box with
letters initials blog title) when our web / blog is bookmarked on the
smartphone browser.
How? Look better right?
Now in order to look good on a smartphone, then we have
to save the favicon in the layout and also edit the Blogger HTML.
But the first thing to do is create a blog logo with a
square size for example 400px X 400px. Do not make the blog logo too complex to
make it look clear when when small in size 16px X 16px for favicon.ico.
After creating the blog logo, please use the favicon
generator to change the blog logo to various sizes. Download the favicon
obtained then upload it to Blogger then copy the code given by the favicon
generator and save it in the <head> section then replace the URL icon
with the URL icon uploaded on Blogger according to its size. This favicon code
looks like the one below.
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>But I myself do not use all the code above, only a few for each type of smartphone as below.
<link expr:href='data:blog.homepageUrl + "favicon.ico"' rel='icon' type='image/x-icon'/>
<link href='https://3.bp.blogspot.com/................./s32/favicon-32x32.png' rel='icon' sizes='32x32'/>
<link href='https://4.bp.blogspot.com/................./s192/android-icon-192x192.png' rel='icon' sizes='192x192'/>
<link href='https://2.bp.blogspot.com/................./s180/apple-icon-180x180.png' rel='apple-touch-icon' sizes='180x180'/>
<meta content='https://2.bp.blogspot.com/................./s144/ms-icon-144x144.png' name='msapplication-TileImage'/>