Actualización 1 en caso de problemas con Blogger, vean Resolver problema del favicon en Blogger.
Un Favicon es un ícono que sirve para la presentación de nuestra página, es un elemento que ayuda a recordar al usuario el sitio que visita, es por así decirlo el logo del sitio web destinado para la barra de direcciones o navegación, así como para favoritos o marcadores...Son soportados por IE, Firefox y Opera por lo que será compatible con todos los sistemas de este tipo
Opera y Firefox soportan también la extensión PNG e ICO. Internet Explorer sólo soporta *.ICO
Si es HTML estándar que usan foros y páginas estáticas
poner entre la etiqueta <head>y</head>
Si tu icono es un archivo ICO:
<link href='http://misitioweb/favicon.ico' rel='shortcut icon' type='image/x-icon'>
Si tu icono está en PNG usa:
<link href='http://misitioweb/favicon.png' rel='shortcut icon' type='image/png'>
Para páginas como Blogger bajo XML o XHTML deberá usar la siguiente sintaxis: (poner entre la etiqueta <head>y</head>)
Si tu icono es un archivo .ICO:
<link href='http://misitioweb/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
Si tu icono está en .PNG usa:
<link href='http://misitioweb/favicon.png' rel='shortcut icon' type='image/png'/>
(la única diferencia es la diagonal al final de la etiqueta)
- El nombre debe ser favicon.ico de otra manera puede que algunas versiones de IE no lo acepten. Aunque a partir de Internet Explorer 7 el nombre no suponen ningún inconveniente.
- Tal vez para Internet Explorer sea obligatorio el uso de absolutas para que ubique correctamente los archivos ICO.
- Si tienes un blog en blogger (no acepta el formato ICO), puedes usar googles pages para subir archivos ICO.
Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.
La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...
Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.
Película lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.
Comentarios y Consultas
Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.
Puedes marcar Notificarme para recibir la notificación de la respuesta.
70 comentarios:
exelente aporte!
ResponderBorrarno podia hacerlo con boggler beta, ¡me salvaste!
Se ha xorregido el artículo en la parte de xml que no llevaba la "/" final.
ResponderBorraren lo general sólo se necesita un archivo .ico pero si tu host es gratuito generalmente no permitan subir estos archivos
saludos y espero que te haya servido la info
Saludos
ResponderBorrarUsando la linea < link href='http://misitioweb/favicon.ico' rel='shortcut icon' type='image/x-icon' > en IE 7 no funciona
Si es xhtml estricto debes usar al final
ResponderBorrar/>
También prueba cambiando las ' por " si es html normal.
O sea:
< link href="http://misitioweb/favicon.ico" rel="shortcut icon" type="image/x-icon" >
Este truco está actualmente en uso en esta web, a veces internet explorer lo carga hasta el final, pero sí sirve
Este es el mismo código que uso en xml:
<link href='http://cgnauta.googlepages.com/favicon1.ico' rel='shortcut icon' type='image/x-icon'/>
Me funciono excelente este aporte .. felicitaciones
ResponderBorrarDe que medida debe ser este tipo de iconos??
ResponderBorrar16 x 16 pixeles
ResponderBorrarwww.modelajeprofesional.com
ResponderBorrarHola... gracias por compartir tu información... estoy intentando aplicar el codigo a mi web site, crees que me podrias ayudar revisando en que estoy fallando?? porq no me esta cargando.
Gracias!!
Tu error es el más básico de todos, el archivo no es un archivo *.ico, es un archivo PNG renombrado a *.ICO y no es así como funcionan las cosas.
ResponderBorrarEl archivo debe .ico tanto en formato, como en extensión.
Además mi amigo, date una pasada a la W3C porque el html que manejas esta mal definido, sobre todo, el no definir los atributos de la tag HTML.
Barbaro!!!!! muchas gracias!!!! si tienes razón, uno por desconocimiento a veces prueba jejeje y no sabia que existian convertidores a .ICO
ResponderBorrarTe agradezco mucho por la información y seguire tus consejos de seguir capacitandome en HTML que actualmente lo llevo muy empiricamente.
Un abrazo y felicidades con tu blog, que es de mucha ayuda para quienes recien empezamos.
Un abrazo.
puedes usar irfanview para convertirlo a *.ico
ResponderBorrarmuchas gracias por su información sobre los íconos me fue de mucha utilidad
ResponderBorrarperdon, quise decir "public_html" NO "Index_html"....Uds me entienden ...
ResponderBorrardejo mi mail para la persona que se apiade de mi
josemaureira1@hot....
Hay unos sistemas que tienen la carpeta WWW y la carpeta Public_html ambas son la misma carpeta.
ResponderBorrarA veces la carpeta WWW está dentro de Public_html, de ser así, copia el favicon en la carpeta WWW.
Si tu tienes un sitio www.misitio.com y copiases el favicon a Public_html (o WWW), debiera aparecer como:
http://www.misitio.com/favicon.ico
hola entra a mi blog http://runescape-hispano.blogspot.com/ y mira cual es el problema que tengo.. he intentado muchas veces y el favicon no aparece donde debe estar; aparece en el blog y no en la direccion url. ayuda!!!!
ResponderBorrarEso es sencillo:
ResponderBorrarprimero el nombresito:
pm7qd4ct6h2am8u5an85.ico (incorrecto) debe ser favicon.ico (no mas de 7 letras).
Segundo, tienes algún error en la estructura de tu plantilla, lo recomendable sería que volvieras a aplicar la plantilla original.
muchas gracias, simple y contundente.
ResponderBorrarMuchas gracias, me ha venido de fábula.
ResponderBorrarmuchas gracias, con tu explicacione me funciono, en otras páginas no me funcionaba, muchas gracias :D
ResponderBorrarchicos en el codigo fuente: para html png
ResponderBorrardonde ubico la imagen y que mas tengo que agregar para explorador 7
Lee bien el articulo, lo dice muy claro.
ResponderBorrarAporte directo y de fácil búsqueda, gracias.
ResponderBorrarNo me sale :S quisiera que me dijeran en que estoy fallando
ResponderBorrarLes dejo el link:
http://roofdierwords.blogspot.com/
Es recomendable que en vez de PNG uses un archivo .ico con un tamaño de 16 x 16 pixeles.
ResponderBorrarLee:
1.-
Resolver problema del favicon en Blogger.
2.-Crear un favicon usando Photoshop
Gracias por la ayuda.!
ResponderBorrarResulto de maravilla.!!
Buen aporte!
Buen Blog!
GRACIAS
hola! emmmmm... no entendí.... NADA! nescesito una explicacion con mas explicación creo que ahi te quedó registrado mi correo porfavor ayuda. busqué por todos lados como hacerlo y cuando lo encuentro no entiendo
ResponderBorrargracias!
Lo siento no hago consultas personalizadas.
ResponderBorrarTe recomiendo aprendas un poco de HTML que es lo más básico que requieres fuera de eso ya lo he explicado en comentarios y el articulo.
Otra vez mas el resumen de lo que deben hacer:
Requieres un archivo de extensión ICO de 16 x 16 pixeles.
antes de la etiqueta < /head >
pon:
<link href='http://misitioweb/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
en href va la dirección absoluta donde está el icono.
Fuera de eso no se que más puedo decirte.
Si quieres crear un favicon ve:
Crear un favicon usando Photoshop
me funciono, pero no como .ico sino como .png. Gracias
BorrarAmigo Gracias justo lo k keria saber exelente muchas gracias
ResponderBorrarNo puedo poner el icono y me está enloqueciendo porque lo he puesto en otras páginas sin problema. Podrás ayudarme a decifrar que es lo que pasa? www.unionvecinal.com.uy
ResponderBorrarmuchísimas gracias
Gustavo
Pues yo lo veo perfectamente
ResponderBorrarMuchísimas gracias por fijarte, se ve que todos los cambios que hice estaban bien y el problema es que por alguna razón no lo veo desde mi máquina.
ResponderBorrarGracias
Saludos
Pues lo mas probable es que debas limpiar la cache de tu navegador eso puede ser el problema.
ResponderBorrarMuchísimas gracias. Mi pagina web www.mascotasymas.es
ResponderBorrarHola donde exactamnte coloco el codigo para que mi plantilla de blogger lo soporte, porque cada vez que lopuse me salia que mi codigo esta mal o algo asi...
ResponderBorrarsayuda porfavor
antes de la etiqueta </head> o sea entre <head>
ResponderBorrar<|--contenido de head -->
<link href='http://misitioweb/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
</head>
matius dijo...
ResponderBorrarPues lo mas probable es que debas limpiar la cache de tu navegador eso puede ser el problema.
5:42 PM
lary dijo...
GRACIAS!!!!!! Solucionado Gracias!!!!!
hola! mira, tengo un sitio web creado con un template en flash y xml, como lo hago para poner el codigo?
ResponderBorrarte dejo el sitio para que lo veas ;)
www.switchconcept.org
gracias!
Exactamente igual como lo harías en un HTML, el XML es un documento de lado del servidor, pero se sigue ejecutando embebido en HTML, flash es un contenido embebido que no tiene nada que ver con el favicon.
ResponderBorrarInserta el código en el código HTML <link href='http://misitioweb/favicon.ico' rel='shortcut icon' type='image/x-icon'/>
antes de </head>
Hola gracias por la ayuda, mi pregunta es si puede visualizar el icono previamente sin tener la página alojada en ningún servidor web todavía es decir todavía no he subido la página y queria comprobar que el icono se visualizara pero no me sale...
ResponderBorrarMuchas Gracias
Haz tus pruebas con Firefox, generalmente en archivos ICO de dirección relativa funciona perfectamente.
ResponderBorrarPon el icono en la misma carpeta donde está tu página html y pon
<link href='favicon.ico' rel='shortcut icon' type='image/x-icon'/>
Debería funcionar.
Recuerda que debe ser un archivo en formato ICO no vale renombrer archivos BMP, ni PNG.
para CSS como le hago para poner el icono
ResponderBorrarNo se puede por CSS. pues es un llamado a un recurso que no forma parte del diseño de la página, o sea, no está dentro de las especificaciones de Body, que es el único lugar donde se aplica el CSS.
ResponderBorrarHola!
ResponderBorrarCon Google Chrome no funciona si se hace de esta forma, ¿alguien sabría arreglarlo?
Muchas gracias!
Esto funciona Con Google Chrome y con cualquier navegador que acepte la especificación Link.
ResponderBorrarTal vez el problema se que tu icono no esté realmente en formato ico.
CGnauta blog usar este código y si visitas mi sitios en Chrome se ve perfectamente.
La tag Link no es un truco, es la única forma de implementar favicones en las pestañas.
Si usas relativas para apuntar al icono, es mejor probar con absolutas introduciendo la dirección completa del archivo.
Muchas gracias!!!!!
ResponderBorrarfue de mucha ayuda!!!
me la pasaba cometiendo muchso errores, muahcas muchas gracias por tu aporte , para ti debe ser sencillo hacerlo pero para mi, fue de mucha ayuda gracias.
Hola, gracias por tu tiempo y tus explicaciones. Mi unica duda es donde tengo que poner la imagen, en que carpeta. He intentado ponerla en public_html pero no me aparece como dices http://www.misitio.com/favicon.ico
ResponderBorrarGracias por todo y espero vuestra respuesta.
Mira si no puedes por public_html hazlo por medio de la carpeta www.
ResponderBorrarUsando una dirección absoluta da lo mismo donde lo pongas, lo que importa es que se llame favicon y sea un archivo ico con un programa como irfan view puedes convertir cualquier imagen en ICO.
Holaaaaa, gracias por la información de entre todas las ayudas que he buscado en internet esta es la mejor....,e salió por fin!!!!
ResponderBorrarHola! Antes que nada muchas gracias por el aporte.
ResponderBorrarIntente con el código para blogger, y mi archivo está en Fileden: http://www.fileden.com/files/2011/1/21/3063612/favicon.ico, mi problema es que aunque el código es correcto, aún no se ve el ícono. Muchas gracias!
Puedes utilizar el siguiente tutorial para almacenar tus archivos en Google
ResponderBorrarhttp://cgnauta.blogspot.com/2011/01/como-agregar-y-almacenar-archivos.html
Estimados, gracias por las aclaraciones. Me funciono ok en Chrome pero no en IE9, ya vi el codigo fuente de varias paginas que si se ve y esta bien, me podrán ayudar. Les paso la dirección de prueba para que lo vean.
ResponderBorrarMuchas Gracias
www.grandesierra.com.ar/icon.htm
Se hará otro tutorial al respecto este pendiente.
ResponderBorrarestoy montando mi blog, ya cambie el icono de la pestaña pero, pero funciona en mozilla v4 y no en IE8,
ResponderBorrarQuisiera saber como hago para que funcione en todos?!!
En el primer vinculo "Actualizacion Final" se explica eso precisamente, sin embargo yo no me centraría demasiado en IE8 no es un navegador muy usado que digamos.
ResponderBorrarHe mirado por esta página como crear mi favicon: http://www.vidablogger.com.ar/2009/01/cambiar-el-favicon-en-blogger.html
ResponderBorrarPero al crearlo, y al ponerlo en formato ico, me dice que tengo que ir a una página para subirlo, el problema es que esa página tiene un error y no me deja registrarme, conoceis alguna página en la que pueda subirlo?
Ya puedes asignar un favicon en Blogger draft ver:
ResponderBorrarhttp://cgnauta.blogspot.com/2011/06/faviconico-en-blogger-ahora-se-permite.html
Mi sugerencia es que si quieres subir un archivo ico de forma independiente uses Google sites que te permite subir archivos, ver:
http://cgnauta.blogspot.com/2011/01/como-agregar-y-almacenar-archivos.html
Hola! gracias por tu aporte...
ResponderBorrarmi pregunta sería, ¿en que parte recomiendas que se ponga la etiqueta? casi al principio? o después de que elemento?
Gracias! :)
Si es un sitio web propio, con tu propio hosting no importa.
ResponderBorrarPero en Blogger es mejor cargarlo como se dice aquí: favicon.ico en Blogger: Ahora se permite cambiar el favicon
mil gracias muy util los aportes,
ResponderBorrarsalu2
Buenas Matius pregunta de examen ... Mi favicon contiene transaparencias que me gustaría mantener. En este poyecto como te digo desearía quitar el parche de color similar al de la pestaña, pues si se habre otra in blank de la pagina, la inactiva se oscurece y el parche queda refeo. Cual es el truco? Al pasar a ico he probado creo casi todas las opciones salvando transp todos formatos, formatos aislados, sin salvar transp ... Y no doy con ello al salvarlas me pone por defecto el fondo negro del irfanviw, supongo se puede cambiar pero aunque no lo probe no creo que esa sea la solución. Por favor sabrias decirme?
ResponderBorrarCuando Salvas en Irfan y elijes *.ICO, verás que aparece un cuadro de diálogo, marca la casilla de "Save transparent color"
ResponderBorrarBuenas de nuevo muchas gracias por la pronta respuesta, aunque como comente antes salve transaparencias antes ticando la png y la ico juntas por separado etc. Y no me resulto, sinembargo he encontrado un plugin tras probar varios que me funcionó. Aqui les dejo el enlace por si le sirve de aporte a alguien más. http://www.xeduced.com/2008/12/24/como-crear-un-favicon-con-transparencia/.
ResponderBorrarMuchas gracias Matius a ti por los aportes de tallados en todo el post me han sido de mucha ayuda. Saludos nos vemos en otra consulta ciao!
La otra forma de hacerlo es usando photoshop
ResponderBorrarhttp://cgnauta.blogspot.com/2008/11/crear-un-favicon-usando-photoshop.html
Hola, (si idn...) jaja me preguntaba si podrias darme un par de claves. por que no me sale el favicon si he hecho lo que pones. Y una pregunta que te pido como favor. Como hago para que me quede estructurada de manera uniforme? me explico. Como lo hago para que el texto este encuadrado en la misma medida toda la pagina? un saludo gracias
ResponderBorrargracias me sirvio de mucho
ResponderBorraryo puedo poner esto en facebook
ResponderBorrarNo, facebook es una plataforma cerrada con un solo diseño.
Borrargracias por tu aporte
ResponderBorrarHola , me sirvio mucho gracias ;)
ResponderBorrar