Add Favicon to my website

Asked

Viewed 1,013 times

1

If I’m accessing a website, both desktop and mobile, there’s the option to add the link to the home screen, and some websites add the link with a custom icon.

Ex: Stack

Adicionando o link para o Stack como exemplo

inserir a descrição da imagem aqui

Now my site for example has no icon configured and comes a browser pattern.

meu site link

meu site sem icone

How do I set this up on my website?

javascript html css

2 answers

1

You need to add favicon to your page

What is favicon? (Wikipedia)

Favicons are small images (typically 16 by 16 pixels) that are saved on the website for viewing by the browser. Usually are used as small logos on any companies, entities and brands. An example is the "W" that appears browser when accessing Wikipedia.

There are several free favicon generators on the internet that you can use them very simply.

Here is an example that I use myself

Once accessed, just select the image you want to be the favicon of your site and select the option:

Generate icons for Web, Android, Microsoft, and iOS (iPhone and iPad) Apps

Wait for favicon creation processing.

Then click on the link: Download the generated favicon Done this, a file . rar will be downloaded with several favicons that adapt to the devices.

Soon after, extract these favicon’s to your project folder and copy the call instructions created by the generator.

The instructions shall be similar to this:

<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">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

Note that when you go to save the site on your desktop the icon chosen by you will be there.

Also note that the icon is present on the title side of the page in the browser tab.

Remember that you must correct the call paths, otherwise it will not work.

0

As the reply from @Bsalvo suggests, you need to insert a specific tag within the tag <head> of every page of the site to reference its icon. Best preferred for a more generic file name so you can change the resolution and file type when you want.

Example:

<head>
  <!--Sugiro ou colocar o ícone na raiz do site ou usar uma variável javascript para guardar a string do endereço raiz-->
  <script>
    function Endereco(){
      var caminho = "/raiz_do_projeto/";
      document.write(caminho + "/favicon.png");
    }
  </script>
  <link rel="icon" type="image/png" href="Endereco();">
</head>

Browser other questions tagged javascript html css

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