¿Cómo coloco el logotipo de mi sitio web para que sea la imagen del icono en las pestañas del navegador?

100

La imagen junto al título de la página en la pestaña del navegador: ¿cómo se puede vincular una imagen aquí?

html favicon arrendajo
fuente
2
Las palabras clave son favicon.ico
user956584
en.wikipedia.org/wiki/Favicon
Ry-

Respuestas:

176

Esa imagen se llama ' favicon ' y es un .icoarchivo pequeño de forma cuadrada , que es el tipo de archivo estándar para favicons. Puede usar .pngo .giftambién, pero debe seguir el estándar para una mejor compatibilidad.

Para configurar uno para su sitio web, debe:

  1. Haga una imagen cuadrada de su logotipo (preferiblemente 32x32 o 16x16 píxeles, hasta donde yo sé, no hay un tamaño máximo *) y transfórmela en un .icoarchivo. Puede hacer esto en Gimp, Photoshop (con la ayuda de un complemento ) o un sitio web como Favicon.cc o RealFaviconGenerator .

  2. Entonces, tienes dos formas de configurarlo:

    A) Colocándolo en la carpeta raíz / directorio de su sitio web (junto a index.html) con el nombre favicon.ico.

    o

    B) Enlace a él entre las <head></head>etiquetas de cada .htmlarchivo en su sitio, así:

    <head>
  <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>

Si desea ver el favicondesde cualquier sitio web, simplemente escriba www.url.com/favicon.icoy (probablemente) lo verá. El favicon de Stackoverflow es de 16x16 píxeles y Wikipedia es de 32x32.

*: Incluso hay un problema de navegador sin límite. Puede bloquear fácilmente un navegador con un favicon extremadamente grande, más información aquí

LasañaAndroid
fuente
18

Se llama ' favicon ' y debe agregar el siguiente código a la sección de encabezado de su sitio web.

Simplemente agregue esto a la <head>sección.

<link rel="icon" href="/your_path_to_image/favicon.jpg">
Dulith De Costa
fuente
8

Este es el favicon y se explica en el enlace.

por ejemplo, de W3C

  <link rel="icon" 
     type="image/png" 
     href="http://example.com/myicon.png">

Además, por supuesto, el archivo de imagen en el lugar apropiado.

Vincent Ramdhanie
fuente
2 
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 
'apple-touch-icon-retina.png')}">

o puedes usar este

<link rel="shortcut icon" sizes="114x114" href="${resource(dir: 'images', file: 'favicon.ico')}"
type="image/x-icon">
usuario3680001
fuente
apple-touch-icon es para aplicaciones web iOS
LasagnaAndroid
1

Agregue un archivo de icono llamado "favicon.ico" a la raíz de su sitio web.

Mike Fulton
fuente
Recuerde que tiene que ser exactamente 16x16 px.
uınbɐɥs
3
No, no es así, debe tener forma cuadrada y cualquier tamaño, solo tomará más tiempo cargarse
LasagnaAndroid