Put icon in a site shortcut on Android

Asked

Viewed 1,806 times

3

Hello, I’m with the following question, I have my site, fully responsive, and for some of our customers, we put a site shortcut on mobile, by Google Chrome. The shortcut works but gets a totally random icon in relation to my site.

I want it to work like Tecmundo, Globo.com, all these sites, when we add a shortcut of them on mobile already brings the icon of the site.

I did it but it didn’t work. 

   <link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>

Works on the computer usually showing the icon up there next to the title.

HICCUP

    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
        <!-- Opera Speed Dial Favicon -->
  <link rel="icon" type="image/png" href="images/icon/favicon.png" />
    <!-- Standard Favicon -->
  <link rel="icon" type="image/x-icon" href="images/icon/favicon.ico" />
    <!-- For iPhone 4 Retina display: -->
  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/icon/apple-touch-icon-114x114-precomposed.png">
    <!-- For iPad: -->
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="images/icon/apple-touch-icon-72x72-precomposed.png">
    <!-- For iPhone: -->
  <link rel="apple-touch-icon-precomposed" href="images/icon/apple-touch-icon-57x57-precomposed.png">
html

  • This service already creates icons for various devices with option to customize colors etc ... http://realfavicongenerator.net/

2 answers

2


If the image you will insert is of the type .ico, you must define the type the image/x-icon. See below:

<link rel="SHORTCUT ICON" href="images/favicon.ico" type="image/x-icon" />

For other image formats like .png and .gif, see below how it should be:

<link rel="icon" type="image/png" href="images/favicon.png" />
<link rel="icon" type="image/gif" href="images/favicon.gif" />

For the record, I left a file favicons.html on Github. See also more details in these examples of favicons.

  • I took the link you left and already made for all devices.

  • @Lucasmarques cool guy... good luck there! =)

-1

Friend, you want to put one favicon on the website.

Do the following:

1 - Edit an image you want to appear in the size of 15X15 and save it with the name favicon.ico

2 - Send the image to where you are staying your page index.html

3 - In the source code of the page index.html and on the website put this link below:

<link href="/SEU SITE/favicon.ico" rel="shortcut icon" type="image/x-icon" />

Example:

Mine I’m using free hosting from 000webhostapp got like this:

<link href="/https://lojasceess.000webhostapp.com/favicon.ico" rel="shortcut icon" type="image/x-icon" />

Try it on my website and see if it looks like this (a crown appears before the page name)

https://lojasceess.000webhostapp.com/

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.