Insertar icono de pestaña en HTML
-
Utilice
<link rel="icon">y una imagen PNG para agregar favicon para el sitio web en HTML -
Utilice
<link rel="icon">y una imagen de ICO para agregar favicon para el sitio web en HTML
El icono de pestaña es fundamentalmente un icono pequeño que vemos en la pestaña del navegador. Por lo general, parece una imagen de tamaño muy pequeño con un tamaño mínimo en píxeles. También se conoce como favicon. Este artículo presentará métodos para agregar un ícono de pestaña del navegador para un sitio web en HTML.
Utilice <link rel="icon"> y una imagen PNG para agregar favicon para el sitio web en HTML
Podemos usar la etiqueta <link> y el atributo rel="icon" para agregar un favicon de navegador en HTML. La etiqueta <link> en el código conecta el documento actual con el recurso externo. Es la etiqueta que generalmente se usa para vincular a hojas de estilo externas. También se denomina elemento vacío ya que solo contiene atributos. El atributo rel también se utiliza para definir la relación entre el recurso actual y el vinculado. Podemos establecer el destino del enlace de la imagen que se utilizará como favicon en el atributo href. Se debe utilizar una imagen con extensión .png en el atributo href.
Al principio, debe tener la imagen PNG que usará como favicon en su dispositivo. Debe ser de píxeles diminutos. El tamaño más común para crear un favicon es 16x16 píxeles. Sin embargo, también pueden aparecer en dimensiones un poco más grandes (32x32). Ahora, dentro de la etiqueta HTML <head>, abra la etiqueta <link> y use el atributo rel dentro de ella. Establezca el atributo rel en icon. Después, escriba el atributo href y especifique el archivo de imagen PNG que desea usar como su favicon dentro de las comillas. Después de esto, cierre todas las etiquetas abiertas anteriormente.
Aquí, hemos utilizado la imagen favicon.png como favicon. La imagen se encuentra en el sistema local. De esta forma, podemos agregar un favicon a una página web en HTML.
Código de ejemplo:
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Utilice <link rel="icon"> y una imagen de ICO para agregar favicon para el sitio web en HTML
Podemos usar la imagen de ICO para agregar el favicon en un sitio web en HTML con fines de compatibilidad con versiones anteriores. Casi todos los navegadores modernos admiten la imagen PNG que se utilizará como favicon. Para los navegadores como IE10 y sus versiones anteriores, podemos utilizar imágenes ICO. Las imágenes ICO tienen .ico como extensión. Podemos usar herramientas como ConvertICO para convertir las imágenes PNG a ICO.
Por ejemplo, navegue por el sitio web ConvertICO y cargue el archivo favicon.png. El sitio web convertirá la imagen a formato ICO y nos permitirá descargarla. Luego, use la ruta de la imagen en el atributo href en la etiqueta <link> como se hizo en el primer método. Luego, podemos ver el favicon en la página web.
Código de ejemplo:
<head>
<link rel="icon" href="/img/DelftStack/favicon.png">
</head>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn