0

Estoy haciendo una página web en jsp pero estoy teniendo problemas para personalizar el ícono que va junto al título de la página. Lo que pasa es que cuando inicio la página desde el NetBeans el ícono se carga bien, pero al actualizar la página o ir a otra página del sitio que estoy desarrollando el ícono desaparece. Así aparece al cargar el sitio:

introducir la descripción de la imagen aquí

Así despues de recargar la página:

introducir la descripción de la imagen aquí

He buscado mucho tratando de averiguar porque ocurre eso, pero no he econtrado solución. Les adjunto el código de la página de inicio de mi sitio:

`

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="shortcut icon" href="../images/logo_mini.png" type="image/gif" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/main.css">
        <link rel="stylesheet" type="text/css" href="../estilos/inicio.css">   
        <script src="../scripts/index.js" type="text/javascript"></script>
        <title>Bolsa de trabajo</title>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row encabezado division-principal">
                <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 col-md-offset-1 col-lg-offset-1">
                    <center><img src="../images/Logo2.png" class="logo"></center>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-4 col-md-offset-2 col-lg-offset-3">
                    <div class="row">
                        <a href="registro_aspirantes.jsp">
                            <div class="col-xs-6 col-sm-6 col-md-6"><div class="boton">Aspirantes</div></div>
                        </a>
                        <a href="registro_empresas.jsp">
                            <div class="col-xs-6 col-sm-6 col-md-6"><div class="boton">Empresas</div></div>
                        </a>
                    </div>
                    <div class="row division">
                        Visita nuestras redes sociales
                    </div>
                    <div class="row">
                        <div id="iconos" class=col-xs-12">
                            <center>
                                <a href="#"><img src="../images/Facebook(2).png" class="icono-social"></a>
                                <a href="#"><img src="../images/Twitter(2).png" class="icono-social"></a>
                                <a href="#"><img src="../images/Instagram(2).png" class="icono-social"></a>
                                <a href="#"><img src="../images/Linkedin(2).png" class="icono-social"></a>
                                <a href="#"><img src="../images/Tumblr(2).png" class="icono-social"></a>
                                <a href="#"><img src="../images/YouTube(2).png" class="icono-social"></a>
                                <a href="#"><img src="../images/Correo(2).png" class="icono-social"></a>
                            </center>
                        </div>
                    </div>              
                </div>
            </div>
            <br>
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-lg-4 col-sm-offset-3 col-lg-offset-4">
                    <div class="formulario">
                        <h2>Iniciar sesión</h2>
                        <form action=""> 
                            <div class="grupo-campo">
                                <input type="text" name="usuario" class="campo" required="">
                                <label>Nombre de usuario</label>   
                            </div>                          
                            <div class="grupo-campo" >
                                <input type="password" name="clave" class="campo" required="">
                                <label>Contraseña</label>
                            </div>
                            <input type="submit" value="Iniciar sesión" class="boton">
                        </form>
                        <br>
                        ¿Olvidaste tu contraseña? <a href="" class="enlaces">Haz click aquí</a><br>
                        ¿No te has registrado? <a href="registro.jsp" class="enlaces">Crea una cuenta nueva</a><br><br>
                        ¿Tienes alguna pregunta? <a href="" class="enlaces">Envíanos un correo</a>
                    </div>
                </div>
            </div>
        </div>
        <!--jquery de Bootstrap-->
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </body>
</html>

`

5
  • 1
    Hola, podrías intentar colocando la ruta absoluta con jsp <script src="${pageContext.request.contextPath}/images/logo_mini.png" /> para obtener el icono. el 4 oct. 2019 a las 2:59
  • No me funciona, la imágen sigue sin mostrarse :(
    – GDavila
    el 4 oct. 2019 a las 3:20
  • Intenta a modo de depuración, poner en el home, una imagen de un gatito en la misma ruta que el favicon, seguramente el gato tampoco se muestre porque no puede acceder a dicha ruta tu cód de java. Deberás ver en la plataforma donde tienes subida la web, la estructura de carpetas que tiene.
    – EduBw
    el 4 oct. 2019 a las 7:56
  • ¿Puedes indicar las carpetas donde están los JSP y donde están las imágenes ? Puede ser que tu ruta relativa "../images/logo_mini.png" no sea accesible desde otros JSP:
    – ordago
    el 4 oct. 2019 a las 8:35
  • Probé todo lo que me comentaron, revisé que las rutas estuvieran bien, probé el modo de depuración y el problema persistía. Decidí postegar un poco el asunto y seguir con el desarrollo de las otras páginas del sitio. Entonces literal copié y pegué el código que ustedes vieron en otro archivo, lo guardé con otro nombre y al abrirlo en el explorador todo se mostraba bien, el icono de la pestaña siempre aparecía. Entonces creo que era algun tipo de bug extraño del NetBeans -.- De todos modos gracias por las recomendaciones y los consejos que me dieron.
    – GDavila
    el 3 feb. 2020 a las 1:18

2 respuestas 2

7

Lo que puede ser es el Favicon, que es el icono de las pestañas. Lo que deberías de hacer es, en todos los HTML que tengas, añadir este código para añadir un Favicon

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

Lo añades en el <head>, cambia el nombre del favicon por el que icono que tengas y listo.

Por cierto, te recomiendo llamar al archivo png favicon.png para que el buscador lo reconozca como icono

Me he dado cuenta que tienes algo raro en el <head> y es esto: type="image/gif"/>

Eso significa que el archivo que le estas diciendo es .gif, pero es .png asi que prueba a cambiar eso :)

0

El problema se encuentra justamente en la siguiente línea:

<link rel="shortcut icon" href="../images/logo_mini.png" type="image/gif" />

Donde los atributos href="../images/logo_mini.png" y type="image/gif" señalan al navegador que apunte a una imagen PNG con formato GIF. Por lo tanto, es contradictorio.

Para que funcione deberías definirlas así:

<link rel="icon" href="ruta/imagen.png" type="image/png" />

Donde la relación del documento enlazado rel="icon" (anteriormente rel="shortcut icon", aún es compatible) con el archivo actual sea el ícono y el tipo MIME image/png coincida con el formato al que se apunta.

También puedes consultar en Stack Overflow el tema Favicon: ¿formato ico o png?¿y qué rel?. Allí, el usuario @devconcept ofrece bastante detalles sobre el tema.

1
  • Si encuentran alguna laguna en esta respuesta estoy abierto a editarla para mejorarla. el 26 ene. 2020 a las 4:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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