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:
- Obtén una imagen cuadrada de tu favicon en formatro PNG.
- Cargalo
- Descárgalo
- utiliza el código generado y pegalo en alguna zona al interior del
<head>de tu página
<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">