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


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í


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">

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.


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">

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.


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
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.