Cómo crear tablas

Las tablas que podemos crear en nuestro blog se basan en el código HTML. Es posible que ya hayáis utilizado alguna, quizás sin saberlo -no sería la primera vez que me ocurre a mí...

Para empezar lo primero que hemos de saber es que las tablas se crean mediante estas etiquetas:

<table>XXX</table>

Todo lo que situemos entre dichas etiquetas adoptará la forma de una tabla. Pero esto no es suficiente. La etiqueta table puede tener multitud de atributos, si bien el más importante es < tbody > < /tbody > (table body = cuerpo de la tabla), ya que sin ésta etiqueta dentro de la etiqueta table es difícil conseguir los efectos deseados. Vamos a ver cuáles son esos atributos:

Borde

Tamaño de la tabla

Alineacion del texto dentro de la tabla

Color e imagen de fondo

Separación entre celdas

Espaciado dentro de la celda

Celdas: filas y columnas

Ampliación: color de fondo para una fila o una celda

Borde

El borde de la tabla es translúcido por defecto y tiene un grosor determinado que podemos modificar. Para cambiar el color utilizaremos el atributo border, señalando entre comillas el número del grosor que deseamos para el borde general de la tabla:

<table border="1"><tbody><tr><td></td></tr></tbody></table> (tamaño por defecto)

<table border="5"><tbody><tr><td></td></tr></tbody></table>

<table border="9"><tbody><tr><td></td></tr></tbody></table>

Por el contrario, si lo que queremos es que el borde no sea visible el número a emplear será el 0:

Border="0"

Si lo que queremos es cambiar el color del borde utilizaremos el atributo bordercolor:

<table border="1" bordercolor="red"><tbody><tr><td></td></td></tbody> </table>

<table border="1" bordercolor="red"><tbody><tr><td></td></td></tbody> </table>

Tamaño de la tabla

El tamaño de la tabla se ajustará por defecto al contenido de la misma, pero podemos modificar su tamaño
en altura: height="número de pixeles",
y en anchura: width="número".

<table border="1" height="90" width="70"><tbody><tr><td></td></tr></tbody>/table>

<table border="1" height="60" width="150"><tbody><tr><td></td></tr></tbody></table>

El orden, por lo general, es: primero el borde (border), segundo la anchura (width) y tercero la altura (height), aunque, por lo general, el editor de texto de Blogger nos corrige los códigos en cuanto órden, así que tampoco le prestéis demasiada atención.

Color e imagen de fondo

El color de fondo de la tabla se añade mediante el atributo bgcolor (bgcolor="XX") dentro de la etiqueta de la tabla:

<table bgcolor="yellow"><tbody><tr><td></td></tr></tbody></table>

<table bgcolor="#ff3311"><tbody><tr><td></td></tr></tbody></table>

Mientras la imagen se añade con el atributo background (background="URL de la imagen"):

<table background="http://i176.photobucket.com/albums/w192/comerxcomer/florfondo.jpg"> <tbody><tr><td></td></tr></tbody></table>

Celdas: filas y columnas

En general, las tablas están subdivididas en filas y columnas, recibiendo el nombre de celda cada uno de los recuadros internos de las mismas. ¿Cómo se consigue crear filas y columnas en el HTML? Muy sencillo: con las etiquetas <tr></tr> (table row) creamos las filas y con <td></td> (table data) dividimos dicha fila en celdas, tantas como queramos. Veamos un ejemplo:

<table border="1"><tbody><tr>caballito de mar</tr></tbody></table>

caballito de mar

<table border="1"><tbody><tr><td>caballito de mar</td><td>pulpo</td><td>calamar</td></tr></tbody></table>

caballito de mar

pulpo

calamar

<table><tr><td>caballito de mar</td></tr><tr><td>pulpo</td></tr><tr><td>calamar</td></tr></table>

caballito de mar

pulpo

calamar

Alineación del texto dentro de la tabla

El texto que escribamos dentro de cada celda (td) puede ser alineado arriba, abajo, en el centro, a la derecha o a la izquierda. La alineación horizontal por defecto es la izquierda y la alineación vertical, en el centro. Para cambiarla nos situaremos en la etiqueta td y dentro de ella señalaremos la alineación horizontal, denominada align y la alineación vertical, valign (vertical align).

alineación por defecto: izquierda y centro

Alineación horizontal a la derecha	derecha	centro
<td align="right">XXX</td>	<td align="right">XXX</td>	<td align="center">XXX</td>
Alineación vertical en la parte superior	Arriba	Abajo
<td valign="top">XXX</td>	<td valign="top">XXX</td>	<td valign="bottom">XXX</td>

Podemos utilizar los dos atributos de celda juntos:

<table border="1"><tbody><tr><td align="center" valign="top"></td></tr></tbody></table></p>

Separación entre celdas

La separación entre celdas es de 2 pixeles por defecto, pero podemos modificar aumentarla mediante el atributo cellspacing (cellspacing="XX"):

<table border="1" cellspacing="4">

<tbody>

<tr>

<td>

Globo

</td>

<td>

Cometa

</td>

</tr> <tr>

<td>

balón

</td>

<td>

pelota

</td>

</tr>

</tbody>

</table>

Globo	Cometa
balón	pelota

<table border="1" cellspacing="10">

<tbody><tr><td>Globo</td>

<td>Cometa</td></tr>

<tr><td>balón</td>

<td>pelota</td></tr>

</tbody>

</table>

Globo	Cometa
balón	pelota

<table border="1" cellspacing="25">

<tbody>

<tr><td>Globo</td>

<td>Cometa</td></tr>

<tr><td>balón</td>

<td>pelota</td></tr>

</tbody>

</table>

Globo	Cometa
balón	pelota

Espaciado dentro de las celdas

Al igual que podemos modificar la separación entre las celdas, podemos hacer con el espacio existente entre los bordes de la celda y el texto o contenido de la misma. En este caso el atributo se denomina cellpadding (cellpadding="XX"):

<table border="1" cellpadding="9">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

<tr><td>Puma</td>

<td>León</td>

<td>Leopardo</td></tr>

</tbody></table>

Gato	Pantera	Tigre
Puma	León	Leopardo

<table border="1" cellpadding="15">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

<tr><td>Puma</td>

<td>León</td>

<td>Leopardo</td></tr>

</tbody></table>

Gato	Pantera	Tigre
Puma	León	Leopardo

Por supuesto, podemos mezclar el espaciado y la separación entre celdas en una misma tabla, al igual que, supuestamente, puede hacerse con cualquiera de los atributos de la tabla y las celdas, todo depende del resultado que busquéis y de las ganas que tengáis de complicaros... jaja


Como último dato, comentaros que las etiquetas pueden ir todas seguidas o en distinta línea, es indistinto, el efecto será el mismo si escribís:

<table border="1" cellpadding="15">

<tbody><tr><td>Gato</td>

<td>Pantera</td>

<td>Tigre</td></tr>

</tbody></table>


Como si lo escribís así:

<table border="1" cellpadding="15"><tbody><tr><td>Gato</td><td>Pantera</td><td>tigre</td></tr></tbody></table>

(es posible que aquí el código se corte, pero os aseguro que está todo seguido)

Ampliación: color de fondo para una fila o una celda

Aquí os presento dos tablas de prueba con distintos colores de fondo, la primera por filas y la segunda de ellas por celdas. Esta segunda me ha dado problemas, al mezclarse los colores de fondo con el de la fuente del texto, no sé bien cómo quedarán cuando publique la entrada... Espero que os sea de ayuda.

prueba de color para esta fila	se supone que debe tener color rojo de fondo	de no ser así, a ver qué pasa y cómo puedo arreglarlo
nueva fila	esta vez sin color de fondo	para comparar con la anterior
y esta tercera fila	para comprobar si funciona	con color verde de fondo

<table border="3"><tbody>

<tr bgcolor="red"><td>prueba de color para esta fila</td>

<td>se supone que debe tener color rojo de fondo</td>

<td>de no ser así, a ver qué pasa y cómo puedo arreglarlo</td></tr>

<tr><td>nueva fila</td><td>esta vez sin color de fondo</td>

<td>para comparar con la anterior </td></tr>

<tr bgcolor="green"><td>y esta tercera fila</td><td>para comprobar si funciona</td>

<td>con color verde de fondo</td></tr>

</tbody></table>

celda con fondo color verde	celda con fondo color rojo	celda con fondo color #ff6600
celda sin color de fondo	fondo azul, letra color amarillo con font	celda sin color de fondo, letra color rojo con span

<table><tbody>

<tr><td bgcolor="green">celda con fondo color verde</td>

<td bgcolor="red">celda con fondo color rojo</td>

<td bgcolor="#ff6600">celda con fondo color #ff6600</td></tr>

<tr><td>celda sin color de fondo</td>

<td bgcolor="blue">

<span style="color:yellow;">fondo azul, letra color amarillo con font</span></td>

<td><span style="color: rgb(255, 0, 0);">celda sin color de fondo, letra color rojo con span</span></td></tr>

</tbody></table>

Barra lateral que desaparece o desplaza hacia abajo

Quería introducir brevemente un tema que me ha traído Karen al blog, al consultarme sus dudas y mencionarme dónde había encontrado la solución. No sé demasiado al respecto, así que me limitaré a describirlo, daros un enlace de ayuda y deciros en qué lugar de la plantilla podéis ir probando para buscar la solución.

Se trata de un tema que, al parecer, ha traído y probablemente siga trayendo problemas a los bloggeros: la barra lateral -o sidebar en inglés- que parece desaparecer y se nos desplaza hacia abajo, permaneciendo en su lado derecho o izquierdo, pero debajo de las entradas.

Aunque sólo sea por curiosidad os contaré que la existencia de distintas partes en nuestro blog (barra lateral, título, entradas y barra inferior) son en realidad páginas distintas, de ahí que en la plantilla tengan distinto nombre ("main", "sidebar", "title"...) cargadas desde lo que podemos llamar una página índice que las enlaza y nos permite verlas todas a la vez. Esto quiere decir que cada una de ellas puede (o al menos deberían poder) ser modificadas por separado.


La "página índice" tiene un tamaño determinado. Dentro de ella se encuentran la barra lateral y la barra principal (la de las entradas o posts) que, lógicamente, no pueden medir lo mismo, porque no cabrían, desplazándose la barra lateral hacia abajo; además, si la suma del tamaño de las dos, de la barra lateral y la principal, superase el tamaño máximo de esa "página índice" tendríamos el mismo resultado: una barra lateral desplazada hacia abajo.

Karen me comentaba que había conseguido solucionar su problema gracias a una entrada del Blog de blogs; imagino que se refería a ¿Por qué la sidebar se va hacia abajo? en cuyos comentarios podemos encontrar muchos datos valiosos sobre el tema, como, por ejemplo, que las imágenes demasiado grandes pueden provocar ese efecto de desplazamiento hacia abajo de la barra lateral.


Gracias a otro de los comentarios he podido acudir a la plantilla de mi blog y ponerme a experimentar, a ver qué resultado obtenía según los cambios que hacía.

La conclusión a la que he llegado es, como decía antes, que el tamaño o proporción de la barra lateral y de la barra principal tiene que estar compensado si no queremos que la barra lateral se nos desplace hacia abajo. Lo mejor, en mi opinión, es experimentar con la plantilla, utilizando las opciones "vista previa" y "borrar cambios" hasta que consigamos ver el blog como nos guste; y sólo entonces hacer uso de la opción "guardar plantilla" para guardar los cambios realizados. Por cierto, en todos los blogs de ayuda se aconseja guardar una copia de la plantilla en nuestro ordenador de modo que nos sirva de copia de seguridad en caso de que necesitemos borrarla entera y, así, no perdamos todos los cambios anteriormente realizados. Para guardar la plantilla sólo tenemos que usar la opción que nos da Blogger en Plantilla - Edición de HTML "Descargar plantilla completa".

Y dicho todo esto, si queremos intentar solucionar el problema de esa barra lateral que se desplaza hacia abajo o si, como quería Karen, queremos que haya más separación entre la barra lateral y barra de las entradas, acudiremos a Plantilla - Edición de HTML y buscaremos lo siguiente:

#sidebar-wrapper {

width:200px;

float:left;

font-size:87%;

padding-bottom:20px;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Aquí podemos modificar el ancho de la barra lateral (width) que, en el caso de mi plantilla está en píxeles (width:200px). Podemos aumentarlo o disminuirlo. Si lo aumentamos demasiado puede que el efecto que obtengamos sea el que decíamos antes: que la barra lateral se coloque en su posición laterla pero debajo de todas las entradas. ¿Qué podemos hacer entonces? Disminuir el ancho de la barra de las entradas. Para ello buscaremos:

#main-wrapper {

width:450px;

float:right;

padding:100px 0 20px;

font-size:88%;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

y disminuiremos el ancho (width) de esta barra. Aquí, por ejemplo, es de 450; si lo disminuimos a 400 y hacemos click en "vista previa" veremos la diferencia.

Tened en cuenta que, a menos que necesitéis que la barra lateral sea más grande por alguna imagen o accesorio que incluyáis, no es necesario aumentar el ancho de la barra lateral, es suficiente con disminuir el ancho de la barra principal o de entradas (main-wrapper).



¡Y hasta aquí mis humildes y quizás confusas y confundidas explicaciones! Espero que os sirva de algo.

Contadores y estadísticas

A la mayoría de los que poseemos un blog nos gusta la idea de tener un contador de visitas, así como información acerca de dichas visitas: frecuencia, tiempo que permanecen en el blog, procedencia, búsquedas que han llevado al blog, etc. Por eso existen en Internet numerosas páginas que nos ofrecen este servicio de forma gratuita.

En mi otro blog podéis observar tres de estas páginas:

Ecoestadística. Página en castellano que, como su nombre indica, nos ofrece la posibilidad de conocer las estadísticas de nuestro blog o página web. Es necesario registrarse y añadir un código en nuestro blog. Las estadísticas pueden ser públicas o permanecer privadas para que sólo nosotros accedamos a ellas, variando así la imagen y el enlace que debamos incluir en nuestro blog. En este blog las estadísticas a través de esta página son públicas, podéis ver el icono de enlace en la barra lateral; mientras en mi otro blog son privadas. Los elementos que incluye esta página son: cuándo (visitas por mes, semana, día y horas del día), quién (de qué países proceden nuestros visitantes), navegación (duración de las visitas, entradas más visitadas de nuestro blog, sistema operativo y navegador empleado por los visitantes, tamaño de la pantalla), enlaces (origen de los mismos y búsquedas que han llevado a nuestro blog o web).

EstadisticasGratis.com. Otra opción en castellano que nos ofrece tanto estadísticas como contadores para nuestro blog o web. También es necesario registrarse. Dispone de más de 60 modelos de contadores entre los que poder elegir. Las estadísticas están divididas de forma similar a la página anterior: tráfico (mensual, diario, por horas y anual), teconología de los usuarios (navegador, sistema operativo), ubicación geográfica (país e idioma) y de dónde vienen (top refers, buscadores y páginas más populares). En este caso no existe opción de compartir públicamente las estadísticas, es un servicio privado (al menos hasta ahora).

Amazing counter. Si sólo queremos disponer de un contador, ésta es nuestra página. Hay numerosos modelos a elegir. Como en los anteriores, es necesario registrarse. La página está en inglés pero en tres sencillos pasos nos proporcionan el código que debemos incluir en el blog. Lo interesante de este contador, desde mi punto de vista, es que nos permite elegir entre incluir todas las veces que es visitada la web o blog, sean o no del mismo visitante -es lo que denominan "all hits"-, y sólo visitas de distintos usuarios -"Unique visits only". Aunque la página ofrece estadísticas, éstas son únicamente el número de visitas del blog por día.

Alex Sanhz nos propone los siguientes enlaces (para más información acudir a su blog: Contadores):

Globetrackr. Servicio gratuito que nos ofrece un contador con los lugares (países) de procedencia de quienes nos visitan.

Visitor Visualization. También en inglés. Ofrece un contador con un pequeño mapamundi en el que las visitas aparecen en diferentes colores según la antigüedad de la misma.

Pero disponemos de oras muchas opciones más.
Geo visitors. Parecido al anterior. Sólo hemos de copiar y pegar el código, aunque, lo cierto es que, después de probarlo, veo que no se visualiza directamente en el blog/web, sino que es necesario hacer click en el botón de enlace y que se abra una nueva pestaña o ventana para ver las visitas a nuestro blog.

Geo visita. En castellano. A través de su servicio podemos visualizar en nuestro blog o web un mapa mundi con las visitas on line en tiempo real y/o un pequeño globo terráqueo con las visitas recibidas. Para más información sobre cómo utilizar este servicio, consultad en esta entrada de Gema blog.

Contadorwap. Otra página más en castellano. Me resulta curioso haber llegado hasta ella desde Si quieres puedes, ya que sólo nos da un enlace y, a pesar de todos los que ya tenía, no era ninguno de ellos. (es que esto de las estadísticas está muy difundido por la web, por lo que veo...).

Buscando por la Comunidad de Ayuda para tu blog he encontrado esta otra página (in English): Site Meter, que nos ofrece un servicio básico gratuito de contador y de estadísticas, así como otros servicios más completos si aportamos algo de dinero. El servicio básico está bastante bien; es similar a los ya comentados anteriormente, si bien en este caso tenemos que visualizarlos en inglés: visitantes recientes (detalles, mapa, página de entrada y de salida), visitas (por día, en la última semana, mes, año), visitas y páginas vistas, ranking de páginas (de entrada y salida). Nos ofrecen cinco o seis tipos de contadores, podemos elegir el nivel de privacidad de las estadísticas entre medio y alto y, algo muy interesante, nos da la opción de ignorar nuestras propias visitas al blog, de forma que las estadísticas sean más realistas, más puras. Si queréis ver un ejemplo, podéis ver las estadísticas de este blog con este serivicio abajo, al final de la página.


Si lo que queremos es un contador de visitas en tiempo real (cuántos visitantes están en línea o conectados a nuestro blog/web), podéis utilizar, además de los ya mencionados arriba (Geo Visite): Geo visits.

Y si lo que buscas es un contador de cuenta atrás, Alex, que utilizó uno para el primer aniversario de su blog, nos aconseja ésta: Yourminis: Countdown Counter. No necesitamos registrarnos, sólo incluir los datos de nuestro "especial evento" y copiar y pegar el código.

¿Lo que te guscaría es un calendario lunar? Carolina de El blog de blogs nos da el enlace: Daily Moon Phases.

Las posibilidades son inmensas, así que dejo abierto el tema a futuras ampliaciones.

Firmar las entradas

La estresante vida que llevamos hoy en día y la comodidad que nos aportan los aparatos electrónicos están a la orden del día. Por eso Blogger nos da la opción de incluir una firma o frase final para que cada vez que escribamos una entrada nos olvidemos de teclear el código con la imagen,la palabra o frase que queramos que aparezca en cada entrada. ¿Cómo hacerlo? Muy sencillo: ve a la pestaña Opciones > Formato; abajo del todo dispones de un recuadro denominado "Plantilla de entrada", ahí puedes escibir el código/frase que quieras que aparezca en cada nueva entrada que crees. Haz click en "guardar valores" y listo. Cuando crees una nueva entrada te aparecerá por defecto dicho código/frase; no hay más que situar el curso al principio de dicho código, de modo que éste permanezca siempre después de lo que escribáis. Si no quieres que aparezca, no tienes más que borrarlo y la entrada en cuestión se publicará sin firma. Fácil, ¿no? ¡Blogger nos da muchas ayudas, reconozcámoslo!

Relojes

A pesar de que hay a quien no le agrada ver ni poner un reloj en su blog, son numerosos los blogs que los emplean. Por eso hoy os traigo algunos enlaces de páginas que nos ofrecen un "servicio horario", es decir, relojes varios, a elegir, para incluir en nuestro blog.

Los utilizados en mi blog los encontré gracias a Gem@.

Puesto que existen numerosos modelos, os aconsejaría buscar primero los tres o cuatro que más os gusten y ya después incluirl el elegido/s en vuestro blog, no sea que acabéis como me pasó a mí, con más de un reloj "porque son muy chulos" (ya sabéis que cuantas más imágenes tengáis para descargar, más tardará en cargarse el blog).

Los dos que podéis ver en mi otro blog (uno bajo la imagen 3D y otro al final del blog) os dirigirá a ClockLink.com; la página está en inglés pero merece la pena echar un vistazo; ofrece relojes con distintas franjas horarias, por si queréis incluir la distintos países (esto según nos comenta Alex de Bloggea2).
Al principio tuve otro más que eliminé con el tiempo, conseguido también gracias a Gem@. Ella y otros bloggeros nos ofrece estos links:


Pannasmontata

RelojesWeb.com

Relatime

Relojes Flash

Tollshel


POQbumDirigiros a Flash Toys & Gens, Flash Clocks. En esta página podéis econtrar otros muchos "accesorios" para incluir en el blog.

Aquí encontraréis algunos relojes con motivos políticos y futoblísticos, así como otros.

Compteur.cc. Aquí podéis crear un sencillo reloj, eligiendo el color y la forma. Hay cuatro modelos básicos a personalizar.

Widgetbox. Aquí encontraréis diversos widgets o accesorios, como yo los llamo, entre ellos, relojes. Teclead "clock" en la barra de búsqueda y elegid el que más os guste. Sólo tenéis que hacer click sobre el nombre del reloj elegido y en la nueva pantalla hacer click en "Get widget". Os aparecerá una lista para que eligáis el servidor de blog que tenéis, seleccionais el que tengáis (Blogger, en mi caso) y hacéis click en "Install Panel"; se os abrirá el blogger en una nueva ventana con la opción "Añadir artilugio", click ahí y lo colocáis donde queráis. Hice la prueba en este blog con un calendario que podéis ver arriba en la barra lateral; está en inglés, es la única pega que le encuentro.

Y si lo que os apetece es poner un salvapantallas con reloj en la pantalla de vuestro ordenador, podéis acudir a: Clock-desktop.com. O si preferís un reloj despertador que no necesita actualización horaria y te sirva como alarma mientras tengas el navegador abierto, pásate por: Genbeta: tu reloj on line con alarma. No tiene nada que ver con el blog, pero me pareció interesante...


Buscando, buscando, he dado con un curioso reloj:




Acudid a Uniqlock si queréis ponerlo en vuestro blog.


Me gustaría acercaros más páginas, pero eso es todo por hoy; mi búsqueda no ha dado para más...

Technorati Profile

FavIcon

El FavIcon o Favorite Icon es un pequeño dibujo (un icono) que aparece en la barra de dirección del navegador y en la pestaña del mismo y sirve para personalizar la página. El que tengo en mi blog es un pequeño pastel. Ojo, con el código que he utilizado el favicon sólo puede verse con el navegador de Firefox.

Si disponemos de alguna imagen que nos gustaría utilizar como favicon, antes de incluirlo en el blog lo que tendremos que hacer será crear la imagen específica, para ello entraremos en FavIcon from Pics, haremos click en examinar para seleccionarla y a continuación haremos click en "generate FavIcon". El motivo de que haya que crear una nueva imagen a partir de la que tenemos es que el tamaño del favicon debe ser de 16x16; además, el formato también cambia (.png o .ico). En esa página, además, podemos obtener el icono animado, es decir, en movimiento (cuando se abre la página el icono se desplaza una vez hacia arriba), incluso se puede añadir texto, también en movimiento ("Scrolling text"). Podéis probar todos los que queráis y descargároslo a vuestro ordenador. FavIcon from Pics lo genera comprimido; no hay más que descomprimir el archivo una vez descargado, y subir a Blogger o a vuestro hosting de fotos habitual el favicon que queréis.

Para subir el favicon a blogger no hay más que descargar la imagen en una nueva entrada del blog y guardarla como borrador. En la pestaña "Edicion de HTML" de la entrada os aparecerá la dirección de la imagen (img src="XXX"), que es la que nos hará falta para el siguiente paso.


Aviso: si la imagen que queremos utilizar es muy grande, FavIcon from Pics no será capaz de transformarla, tendremos que reducir su tamaño antes (puede hacerse fácilmente editando la imagen en el Paint: Imagen - Expandir/Contraer).

Una vez tengamos la dirección de la imagen, iremos a la plantilla de nuestro blog, Edicion HTML, y buscaremos el siguiente código en la cabecera (head) de nuestro blog:

<title><data:blog.pageTitle/></title>

ahí pegaremos el siguiente código:

<link href='URL DE TU IMAGEN' rel='shortcut icon' type='image/x-icon'/>



<link href='URL DE TU IMAGEN' rel='icon' type='image/png'/>


cambiando el texto url de tu imagen por la dirección de la imagen que quieras tener como favicon.

Una vez hecho esto, hacemos click en guardar cambios y ¡listo!

Este código lo pude utilizar gracias a la entrada Favicón para Blogger Beta de Gemablog
, pero se ha escrito sobre ello en más blogs, por ejemplo: Favicon en el "Nuevo Blogger" o Favicon, Qué es y como se hace de Bloggea2 o Favicon en web o blog

.

Existen otras webs que nos permiten crear nuestro favicon: Dynamic Drive- FavIcon. En MpP Favicon Gallery podemos encontrar favicones ya hechos, según nos informa Bloggea2, que nos explica aquí cómo hacerlo. Y en Favicon.cc podemos crearlo manualmente, según se explica en Crea tu favicon en línea

.

Espero que se entienda y os sea de ayuda.