Cómo añadir un favicon a un sitio web
Last updated: 21.02.2026
Views: 97
Un favicon es un icono de un sitio web. La forma más sencilla de añadirlo a la página es colocar un icono con el nombre favicon.ico de 16 x 16 píxeles en la raíz del sitio. O bien, establecer una ruta escribiendo una línea en una sección <head>
HTML
<link rel="shortcut icon" href="/images/favicon.ico">
En la realidad actual, un icono no es suficiente. Pero configurar todos los parámetros posibles para el favicon, creo, también es demasiado. Varias opciones son suficientes
- el .ico habitual es de 16 x 16
- para navegadores modernos es de 32 x 32
- para apple es de 180 x 180
HTML
<link rel="apple-touch-icon" sizes="180x180" href="/images/favicons/apple-touch-icon-180x180.png"> <link rel="icon" type="image/png" sizes="32x32" href="/images/favicons/favicon-32x32.png"> <link rel="shortcut icon" href="/images/favicons/favicon.ico">
El código debe agregarse entre las etiquetas <head>.
Normalmente agrego un favicon como está escrito arriba. Para generar íconos uso el servicio: https://realfavicongenerator.net/
Autor: Igor Rybalko
He estado trabajando como desarrollador front-end desde 2014. Mi principal pila tecnológica es Vue.js y WordPress.
Publicaciones similares:
-
Cómo centrar un elemento verticalmente usando CSS (alineación vertical)
Existen varias formas de alineación vertical. En diferentes situaciones, existen diferentes métodos adecuados. Veamos algunos de ellos. 1. Uso de Flexbox El método más ...
-
Rotación infinita con animación CSS
Un elemento que gira infinitamente en un sitio web es una forma interesante de atraer la atención del usuario. Es bastante fácil implementar un elemento de este tipo medi...
-
Problema de escala de imagen en Outlook
Cuando estaba redactando correos electrónicos en HTML, me encontré con el hecho de que en Outlook de escritorio (resulta que alguien más lo usa) las imágenes se mostraban...
Leave a Reply