9

Estoy intentando colocar un icono en mi pestaña, algo como esto:

introducir la descripción de la imagen aquí

El archivo favicon.ico está en la misma carpeta que el archivo donde coloco este código:

<link rel="shortcut icon" href="favicon.ico" />

Pero no hace nada, me deja el icono del xamp...

4
  • prueba borrar el cache el 6 mar. 2017 a las 17:44
  • Y lo he probado.
    – Pavlo B.
    el 6 mar. 2017 a las 17:45
  • De que tamaño es tu imagen? Es un archivo transformado a .ICO o renombrado a .ICO? Deberías poder verlo sin problemas, a menos que el archivo .ICO esté corrupto. Puedes usar el explorador de recursos de Chrome (F12 o CTRL+J) para ver los archivos que el explorador levanta. Tu archivo favicon.ico debería estar en el listado de recursos levantados. Si esto no sucede, revisa la existencia del archivo y la referencia.
    – Maskter
    el 6 mar. 2017 a las 18:09
  • me parece un problema de chaché intenta favicon.ico?v=2 Si eso soluciona el problema si es la caché
    – Rene Limon
    el 6 mar. 2017 a las 20:18

7 respuestas 7

7

Me parece que la url del href esta mal, prueba esto:

 <link rel="shortcut icon" href="/favicon.ico" />

Igualmente siempre borrar la cache de la pagina para que se actualice el cambio

2
  • No funciona de esta manera tampoco.
    – Pavlo B.
    el 6 mar. 2017 a las 17:42
  • Ve al código fuente de la pagina y busca la url dale clic y si no te carga la img nueva es porque tienes que borrar la cache el 6 mar. 2017 a las 17:47
7

Si ves el ícono de XAMPP es por que sigue levantando ese ícono. Busca dentro de la carpeta de tu servidor XAMPP este ícono y elimínalo. Reemplazalo con tu ícono y debería funcionar.

Si al modificar el archivo favicon.ico sigues viendo el ícono de XAMPP, deberás refrescar la cache de tu navegador para que vuelva a cargar todos los recursos. Un refresco de página mas caché lo consigues con Ctrl + Shift + R (Windows/Linux) o Cmd + Shift + R (Mac)

Vale aclarar que la dirección del ícono aunque esta bien escrita es siempre relativa al root del servidor, no necesariamente el mismo nivel donde tienes tu archivo HTML.

2
  • Pero entonces cuando yo suba mi página a un servidor online, se verá la imagen que tengo en mi directorio? Es decir, la que yo le suba y tenga en mi direccion de /favicon ?
    – Pavlo B.
    el 6 mar. 2017 a las 17:49
  • 2
    Cuando subas a un server, no vas a tener que pisar el favicon por que seguramente no tengas ninguno creado. Asi que sí, deberia ser transparente, deberia verse sin problemas el 6 mar. 2017 a las 18:53
1

yo acabo de hacerlo y me ha funcionado de la siguiente manera:

Eso sí, previamente he tenido que transformar mi imagen jpg a favicon.ico, lo he hecho con el editor GIMP 2.10.22, a un tamaño cuadrado de max 31x31, primero he exportado la imagen como jpg y posteriormente, en el propio Visual Studio la he renombrado a favicon.ico

Otra cosa, Este código tiene que ir en la parte del hea, la etiqueta de link no está dentro de title.

A ver así! :)

0

solo agregas un link en el encabezado de la pagina, con rel =icon y la url completa del icono. Aqui ejemplo con el icono de es.stackoverflow.com:

<html>
<head>
    <meta charset="utf-8">
    <title>Icono en el navegador</title>
    <link rel="icon" type="https://cdn.sstatic.net/Sites/es/img/apple-touch-icon.png?v=7739871010e6
">
</head>
<body>
    <h1>Test de Icono en el tab de navegador</h1>
</body>
</html>

0

El código que yo he usado para poner una imagen en la pestaña del navegador es:

<link rel="shortcut icon" href="imagenes/favicon.png"> 

en mi caso, tenia la imagen en una carpeta llamada imágenes, ojo; a muchos no les funciona, no porque el código no sirva si no por los posibles errores que podamos tener en la estructura del código.

1
  • ¿En qué se diferencia esta respuesta a los intentos del autor de la pregunta? O ¿cuál es la diferencia respecto a las demás respuestas brindadas? el 27 nov. 2019 a las 16:35
0

A mí me funcionó así -->

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

PD: La imagen deberá estar en la misma carpeta. O el href deberás especificar, si está dentro de una carpeta será href="tucarpeta/tulogo.ico" Y si el archivo está antes, osea que debes retroceder, seria así -->

href="../tucarpeta/tulogo.ico"
-2
<link rel="icon"  type="image/png" href="nombre de la imagen .tipo de archico ejemplo png">

Enlace en comentarios

Y ya. Debes de ponerlo en el encabezado, la imagen debe de estar en la misma carpeta de la página.

2
  • <link rel="ICON" type="iMAGEN/PNG" href="NOMBRE DE LA IMAGEN .TIPO DE ARCHICO EJEMPLO PNG">
    – EDWIN
    el 13 mar. 2019 a las 17:01
  • 3
    Edwin, bienvenido a SOes. Porfavor has el recorrido de bienvenida cuanto antes. Porfavor, no escribas en mayusculas, se entiende como si estas gritando. Toda publicacion puede ser editada para incluir mas informacion. Considera editar apropiadamente la tuya. Recuerda leer el articulo ejemplo mínimo verificable para mejorar tu respuesta y porfavor, vigila tu ortografia. el 13 mar. 2019 a las 17:03

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.