La imagen junto al título de la página en la pestaña del navegador: ¿cómo se puede vincular una imagen aquí?
La imagen junto al título de la página en la pestaña del navegador: ¿cómo se puede vincular una imagen aquí?
Respuestas:
Esa imagen se llama ' favicon ' y es un .ico
archivo pequeño de forma cuadrada , que es el tipo de archivo estándar para favicons. Puede usar .png
o .gif
también, pero debe seguir el estándar para una mejor compatibilidad.
Para configurar uno para su sitio web, debe:
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 .ico
archivo. Puede hacer esto en Gimp, Photoshop (con la ayuda de un complemento ) o un sitio web como Favicon.cc o RealFaviconGenerator .
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 .html
archivo en su sitio, así:
<head>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
</head>
Si desea ver el favicon
desde cualquier sitio web, simplemente escriba www.url.com/favicon.ico
y (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í
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">
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.
<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">
Agregue un archivo de icono llamado "favicon.ico" a la raíz de su sitio web.
16x16
px.