Como añadir un favicon en tu web

Sun Apr 26 2020 10:02:10 GMT-0400

Como añadir un favicon en tu web

Si tu pregunta es ¿qué es un favicon? te cuento que es el ícono que se aparece en las pestaña de los navegadores.

Ahora si ahora tu pregunta es ¿cómo instalo un favicon en mi página? te anticipo que el proceso es bastante sencillo.

Yo utilizo esta app online para generar los íconos necesarios de forma rápida.

Esta herramienta es genial, en especial si tienes que añadir tu favicon en una página HTML o aplicación Web.

Sigue los siguiente pasos:

  1. Obtén una imagen cuadrada de tu favicon en formatro PNG.
  2. Cargalo
  3. Descárgalo
  4. utiliza el código generado y pegalo en alguna zona al interior del <head> de tu página
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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">
Top