Ir al contenido principal

Poner un Favicon (favicono) a tu web

De


¿Qué es un favicon o favicono?
  • Es el icono que aparece en la parte izquierda de la barra de direcciones (URL) en el caso de Mozilla Firefox
  • Es el icono que aparece en la pestaña de la web que estamos visitado (Chrome, Firefox etc)
¿Cómo crear un favicono?
  • Con cualquier software de edición de imágenes, como Photosop o Gimp.
  • Mediante cualquier aplicación on line, como por ejemplo: favicon.cc | genfavicon.net

--------------------------

Formato y dimensiones que ha de tener un favicono
  • 16x16, 32x32, 48x48, 64x64 y 128x128. Dependerá del navegador. Pero se aconseja no sobrepasar los 64x64 píxeles.
  • El favicono se aconseja que esté en los siguientes formatos de imagen: .PNG, .JPG o .GIF. *Con IE: puede que IE no lea bien el favicono, para lo cual, ponerlo en formato NO estandar: .ICO o .BMP.
--------------------------

Insertar el favicono en BLOGGER
  • Una vez que hayas accedido a tu cuenta blogger, ir al menú de DISEÑO.
  • Una vez ahí pinchar sobre el menú FAVICON, y darle a editar.
  • Añadir el favicono, y dar a guardar los cambios.
--------------------------

Insertar el favicono en GOOGLE SITES (gracias a @pauetc)
Tal y como afirmaba @pauetc en los comentarios, también se puede poner el favicono en Google Sites.
El compañero y colaborador de #enlanubetic, @capileratic, también nos lo explica en su site.
  1. Accedemos a nuestro SITES.
  2. Vamos as la parte superior derecha de nuestro SITES y hacemos click en: Más acciones>Administrar sitio>Archivos adjuntos
  3. Subimos el favicono en formatos de imagen estándar: .JPG, .PNG, .GIF
  4. Renombramos la imagen como:favicon.ico
  5. Volvemos al SITES y comprobamos que, efectivamente, se ha subido correctamente el favicon.
--------------------------

Insertar el favicono en cualquier WEB
  • Para incluir el favicono en cualquier web, blog... ir a las etiquetas HEAD de la plantilla base de HTLM.


  • PARA CUALQUIER EXPLORADOR (excepto IE): Si vuestro favicono sigue los estándares (formatos .PNG; .JPG y .GIF), incluir lo siguiente:
<link rel="icon" type="image/png" href="/images/mifavicon.png"/>



  • PARA IE: Si vuestro favicno no sigue los estándares (formatos .ICO y .BMP), incluir lo siguiente:
<link rel="shortcut icon" type="image/x-icon" href="/images/icon1.ico"/>


--------------------------

Fuentes consultadas para la elaboración de este post:
- Kioskea.net
- Wikipedia - Favicon
- Favicon.net

Etiquetas:

Comentarios

  1. @PauetC18 de febrero de 2012 a las 21:48

    ¡Magnífico, Alazne! Muy buenas las herramientas para diseñar iconos que comentas... muy útiles.
    Comentar que también funciona en GoogleSites. Hay que subir el archivo favicon.ico a la raíz del site, desde Administrar sitio>Archivos adjuntos.

    ResponderEliminar
  2. Joan Padrós18 de febrero de 2012 a las 23:35

    Magnífica información. Muchas gracias

    ResponderEliminar
  3. Juan Sánchez Martos18 de febrero de 2012 a las 23:40

    Gracias por tu completo post, Alazne. Perfectamente claro el procedimiento ;-).

    ResponderEliminar
  4. Unknown19 de febrero de 2012 a las 0:03

    PAU >> mañana completo el post, no lo había probado para sites
    JOAN y JUAN me alegra que os haya sido de utilidad

    ResponderEliminar
  5. Unknown19 de febrero de 2012 a las 16:38

    actualizado

    ResponderEliminar
  6. Anónimo19 de febrero de 2012 a las 16:57

    está genial alazne! ahora solo queda hacer uno para los que tenemos wordpress, jaja

    ResponderEliminar
  7. Unknown19 de febrero de 2012 a las 17:30

    jmorsa, puedes cambiar tu favicon de Wordpress editando la plantilla, y metiendo entre los códigos head y /head esto < link rel="icon" type="image/png" href="/images/mifavicon.png" />

    ResponderEliminar
  8. MANUEL LOPEZ19 de febrero de 2012 a las 19:44

    Alazne
    Estupenda y completísima la entrada
    Enhorabuena y gracias por esa mención.

    Saludos compañera

    ResponderEliminar
  9. Carlos19 de febrero de 2012 a las 23:39

    Probado y confirmado, es muy fácil. Ideal para personalizar sites y blogs de centro.
    Gracias Alazne.

    ResponderEliminar
  10. Unknown19 de febrero de 2012 a las 23:43

    Me alegra que os haya resultado fácil, porque realmente lo es.

    ResponderEliminar
  11. Franco Utrera20 de febrero de 2012 a las 17:30

    Muchas gracias por compartir esta experiencia la verdad es que es muy practica y útil.

    ResponderEliminar
  12. Diego Redondo22 de febrero de 2012 a las 17:54

    Se trata de una forma muy interesante de personalizar nuestro propio espacio. Muy interesante y práctico

    ResponderEliminar
  13. Unknown22 de febrero de 2012 a las 18:02

    me alegra que os haya gustado

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Fluky.io: Tu "ruleta de la fortuna" personalizada

De
¡Hoooola a todos! Hacía mucho que no escribía una entrada en la nube TIC, y ya tenía ganas. Hemos hablado de tantas herramientas, que ya casi no quedan sin repetir… En esta ocasión voy a presentaros una web suuuuuúper sencilla y en mi opinión muy práctica: Fluky.io . Son muchas las ocasiones en las que queremos hacer una elección aleatoria en clase (otras muchas nos interesa que la elección parezca aleatoria, pero no lo sea, jeje). Varios de los programas o apps que utilizamos en el aula tienen alguna opción que nos permite hacerlo: el software de la pizarra digital (Notebook, Active Inspire…), webs como ClassDojo, o la app que utilizamos como "cuaderno del profesor” (Additio, iDoceo, CuadernoProfesor…) por ejemplo. Pero esta que os presento hoy hace sencilla, exclusiva y perfectamente eso: elecciones aleatorias. Sin registros ni cosas raras. Cuando entras en fluky.io , solo tienes que pulsar el botón “START” y aparecerá una barra a la izquierda en la que pu...
45 comentarios
Leer más

Quizlet Live, tarjetas de aprendizaje o flash-cards.. ¡en equipo!

De Laura Folgado Galache
En el 2016, nuestra compañera Isabel Etayo ya nos habló sobre Quizlet, una fantástica plataforma que permite al usuario crear tarjetas de aprendizaje , o flash cards , con el fin de practicar como si de tarjetas físicas se tratase: por un lado escribes un término y por el otro la definición; o una operación y por el otro el resultado... Por aquel entonces la plataforma era bastante limitada, pero en los últimos años han dado una vuelta de tuerca y ahora tiene un potencial increíble. Las tarjetas, que en principio solo contenían palabras y definiciones (y en algunos casos, imágenes), permiten ahora colocar partes de un mapa, dibujos, etc. Además, puede practicarse con ellas mediante distintos juegos interactivos que harán del estudio un rato entretenido. Pero hoy no vengo aquí a hablaros de Quizlet , sino de su versión de equipo: Quizlet Live , una opción que desatará la adrenalina de nuestro alumnado, ¡garantizado! Para jugar a Quizlet Live en primer lugar debemos crear las tarj...
2 comentarios
Leer más

Anatronica, el cuerpo humano en 3D

De
Existen multitud de herramientas y aplicaciones online para la visualización del cuerpo humano en 3D. Hace unos días le recomendé  Anatronica  a una compañera de mi centro por sus buenos gráficos (necesitarás el plugin Unity3D para la mejor calidad, aunque también hay versión Chrome o Flash) En efecto, estas utilidades pueden ser muy válidas para el trabajo en Ciencias, Educación Física... o para todo aquel que quiera conocer mejor su cuerpo.   Acceso al canal de Youtube Ventajas : 1. Versión online Free y completa. 2. Buenos gráficos, transparencias a la carta, flexibilidad de visualizaciones... 3. Buena barra de navegación con función orbital, zoom... 4. Buscador de órganos, huesos, músculos, tejidos...  5. Precio "razonable" de las aplicaciones PRO, con enlaces a Wikipedia, diferentes tests (quizzes)... Inconvenientes : 1. Las versiones de escritorio, Android e Ipad están limitadas al sistema óseo y muscular. Si q...
1 comentario
Leer más