5 herramientas y todos los detalles para crear un Favicon

¿Qué es un Favicon?

Favicon viene del inglés: favorites icon y se trata de una pequeñísima imagen (icono) por la que se asociará la página web y así podrá ser identificada fácilmente de entre un conjunto de pestañas abiertas, barra de marcadores, favoritos, historial, lector de noticias...
Normalmente este icono suele ser el logo de la web o algo que represente la marca.

Con este pequeño icono estás atrayendo la atención del lector haciendo resaltar tu web de entre cientos que tienen la B de Blogger o nada más que el nombre de la página abierta.

El favicon nació con Internet Explorer 5. Si colocabar un archivo llamado favicon.ico en el directorio raíz de tu web, se creaba automáticamente, sin necesidad de HTML, un pequeño icono de 16x16 píxeles en la barra de direcciones y en los favoritos.
En la actualidad, los favicones no sólo se usan en el diseño web sino también en app móviles, iconos de programas, smartTVs...

¿Por qué usar Faviconos?

Reconocimiento de Marca: Lo dicho; los faviconos conllevan facilidad para reconocer la marca del sitio y que se quede grabada en la mente del usuario final.

Fácil Navegación: si las pestañas tienen estos pequeños iconos y un usuario tiene abiertas varias, el favicon le ayudará a navegar entre ellas sabiendo en todo momento cuál está escogiendo.

Marcadores: Por la misma razón que con las pestañas; si un usuario tiene muchos marcadores sabrá distinguir tu web de entre las demás con un golpe de vista al favicon.

Aspecto y sentimiento: Es muy importante cuidar todos los detalles de tu web para causar buena sensación a los visitantes. Una web completa, produce una sensación de profesionalidad difícil de olvidar.

Nota: En los inicios del favicon, este icono se usaba para calcular el tráfico de la web contando el número de visitantes que lo agregaban a sus marcadores.

¿Cómo puedo crear un favicon?

Este icono que vas a crear preferiblemente será llamado favicon, tendrá la extensión .ico y será transparente. Antiguamente sólo se podía usar .ico y era algo difícil de conseguir. La mayoría de las páginas que ofrecían servicio de almacenamiento de imágenes no reconocían la extensión y, si no dabas con alguna de ellas o tenías un alojamiento contratado, acababas con un buen dolor de cabeza.
En la actualidad es fácil ya que se pueden usar diversas extensiones: .gif, .png y .ico...

1. Extensión .ico: El archivo con esta extensión será el mejor soportado por los navegadores. También es el único formato que el navegador detectará sin usar el elemento . Soporta transparencia alpha.
2. Extensión .png: No requiere ninguna herramienta especial para su creación y soporta transparencia alpha.
   Internet Explorer no lo soporta, sólo lee ICO.
3. Extensión .gif: El archivo GIF y GIF animado no ofrece mucha más ventaja que el ser soportado por todos los navegadores, incluso los más antiguos. También es la extensión que se suele usar (junto con ICO) para hacer un icono animado eso sí, siempre teniendo en cuenta que estos suelen ser un poco irritables. Haz una animación sutil y lenta.
4. Extensión .jpg: Mejor no uses este formato, no tiene definición y al comprimir lía los colores.
5. Extensión .svg: demasiado nueva, sólo Opera la lee pero sería la extensión ideal y probablemente acabe convirtiéndose en la norma.

¿De qué tamaño tiene que ser?

Los tamaños de favicon que puedes crear son los siguientes (en píxeles).
16x16 Compatible con todos los navegadores. Se mostrará en la barra de direcciones y marcadores.
24x24 Pinned Site en Internet Explorer 9.
32x32 Nueva pestaña en Internet Explorer. Safari and Chrome leerán este icono pero lo mostrarán en el tamaño 16x16 creando algo ilegible.
128x128 Chrome Web Store
195x195 Opera Speed Dial
Se pueden crear varios tamaños y añadirlos con el elemento o si prefieres, puedes crear un ICO con todos los tamaños con un programa como Iconbuilder.



Existen multitud de sitios online donde puedes crear un favicon y también programas de edición.

¿Dónde puedo crear online el favicon?

1. ­ http://www.shaheeilyas.com/favicon/ Es una herramienta simple y concisa, sin muchas opciones. Crea un favico de 16x16 con unos colores predeterminados. Tampoco tiene goma para borrar y el lienzo es blanco no transparente. La opción guardar está un poco escondida. Se trata de un botón que dice "Save" y descarga automáticamente (y con la extensión.ico) lo que hayas dibujado.
2. ­ http://favicon­generator.org/editor/ Herramienta un poco más completa que la anterior en cuanto a color ya que tienes plena elección sobre él. También tiene fondo transparente, goma de borrar, vista previa del icono en su tamaño real y la posibilidad de subir un archivo y editarlo.
   Para descargar el favicon pulsa el boton "Create favicon" y te dirigirá a una página en la que te explica cómo descargarlo y configurar tu blog.
   Además, puedes ver los alucinantes iconos que ha hecho la gente en su galería.
3. http://www.favicon.cc/ Muy parecido al anterior pero más completo aún porque tienes la opción de crear un favicon animado y previsualizarlo.
   
   
   Para guardar pulsa el botón "Download favicon" que se encuentra bajo la vista previa.
   Si prefieres crearlo con algún programa de edición

¿Con qué programa crear un favicon?

1. Photoshop: Necesitarás descargar un plugin para crear un archivo con extensión .ico
   Descarga este archivo. Descomprímelo y guarda ICOFormat.8bi en la siguiente ruta: “C:\Archivos de Programa\Adobe\Adobe Photoshop\Plugins\Formato de Archivos”
   También puedes descargar la extensión Iconbuilder de Iconfactory (también válida para Fireworks). Con esta extensión puedes crear un ICO con múltiples resoluciones.
2. Illustrator: puedes exportar el archivo final como PNG y convertirlo en ICO con alguna herramienta online como
   http://www.animatedfavicon.com
   http://www.favicongenerator.org
3. Cualquier otro editor de imagen. Por ejemplo, puedes crear una imagen PNG y renombrar el archivo a .ico

Implementación

Coloca el elemento dentro de de tu plantilla(en header.php de tu tema o manualmente en cada página).
Para saber cómo implementarlo en un blog Blogger sigue este tutorial

1. Extensión ICO:
   Con poner el archivo nombrado favicon.ico en el directorio raíz de tu sitio los navegadores lo leerán sin poner ninguna línea de código en la plantilla. Sin embargo, si quieres renombrar el archivo de otra manera o colocarlo en una ruta distinta necesitarás este código:
   

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

2. Extensión PNG:

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

3. Extensión JPG:

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

4. Gif animado: Usaremos estas dos líneas de código (una con un archivo ICO y otra con el GIF) porque muchos navegadores no leen gifs
   

   <link rel="shortcut icon" href="http://www.tusitio.com/favicon.ico" />
   <link rel="icon" type="image/gif" href="http://www.tusitio.com/favicon.gif" />

5. Opera Speed dial: Opera muestra un icono en lugar de una miniatura de la web en su página Speed dial:
   
   

   <link rel="icon" type="image/png" href="195x195imagen.png"/>

6. Implementarlo a través del archivo functions.php de tu tema en lugar de en header.php o página por página.
   

    function my_favicon() {
   echo '';
   }
   add_action('wp_head', 'my_favicon');

   Puedes usar otros formatos en lugar de ICO
7. 
   Nota: existen algunos plugins para Wordpress como:
   Favicon Rotator
   All In One Favicon

Y eso es todo. Espero que te sea de utilidad y ¡que me enseñes los iconos que has creado!

Cambiar Pie de Página (Footer) en Blogger

Tener un blog es para muchos un medio para un pequeño negocio o aumentar tu presencia pública; captar nuevos clientes y comunicarte con ellos.
Tanto si este es tu caso como si no, Blogger permite customizar o personalizar tu blog para que puedas expresar con él lo máximo posible con un sólo golpe de vista.
Por eso es importante que cuides hasta el último detalle y, precisamente el último que ve el visitante, es el footer o pie de página.

¿Qué es el footer o pie de página?

Es la parte donde la página llega a su fin que suele usarse para mostrar información adicional como año de creación, avisos legales, correo de contacto...

Ejemplo para página seria:

Ejemplo para página original:

Ejemplo término medio:

¿Cómo personalizo el pie de página?

Accede al panel de control de Blogger, a la sección "Diseño" y haz clic en Editar "Reconocimiento":

Se abrirá una ventana emergente donde puedes escribir tu nombre de autor, fecha, email, etc:

(No olvides pulsar "Guardar" para conservar los cambios realizados).

Puedes agregar hasta 3 columnas al pie de la página a través de "Plantilla", "Personalizar", "Diseño": Diseño de pie de página:

(¡Pulsa "Aplicar los cambios" para que se guarden!)

Tu plantilla se verá así en el panel principal de Blogger, en "Diseño":

Y podrás agregarle los gadgets que consideres apropiados (Enlaces de interés, archivo del blog, una imagen...)

En tutoriales más avanzados, cuando hayamos visto algo de programación HTML básica, nos centraremos en aspectos más concretos como ¿Cómo elimino, oculto o cambio el footer por un diseño mejor?

Modificar el pie de entrada del blog Blogger

¿Te gustaría quitar el "Publicado por" o cambiarlo por otra frase?
¿No te interesa que salga la fecha de publicación de las entradas?
¿No te gusta que salgan las etiquetas?
Pues todo esto y más, tiene solución:
Los elementos del pie de entrada pueden ser modificados a través del panel de "Diseño" de blogger, sin necesidad de utilizar código HTML o PHP de diseño.

A través de esta sección, puedes cambiar rápidamente los elementos de pie de entrada:

Opciones de la página principal
✔ Número de entradas en la página principal:
✔ Texto del enlace de la página de entrada:

Opciones de la página de entrada
✔ Cambiar formato de Fecha
✔ Cambiar el texto en "Publicado por"
✔ Cambiar el texto "en" y formato de hora
✔ Cambiar el texto en x "comentarios"
✔ Mostrar u ocultar las etiquetas
✔ Mostrar u ocultar "edición rápida" (hará que no se muestre el icono del lápiz)
✔ Mostrar u ocultar botones para compartir
✔ Mostrar u ocultar anuncios
...
Sólo tienes que desmarcar las opciones que no quieras mostrar.

También podrás recolocar los elementos y decidir en qué orden serán mostrados.

Entradas y Páginas qué son y cómo se usan en Blogger

Un blog tiene la finalidad de archivar el contenido que publicas tanto por orden periódico como de forma organizada expresamente por ti.
Existen dos formas principales de organización de los elementos de un blog a la hora de publicar en él:
✔ Las entradas.
✔ Las páginas.

¿Qué son las Entradas blog?

Las entradas son las publicaciones que se realizan de forma periódica; una aportación al blog.
Los blogs se componen de varias entradas que se archivan cronológicamente según el año, mes y día en que las publicas (la fecha se asigna automáticamente) y también, según la categoría que les asignes.

Las entradas se pueden guardar como borrador pendiente de revisión (mientras se termina de escribir) y también se pueden publicar definitivamente.

Una vez que alcanzas un número de posts o entradas en la portada del blog, se añade una página dinámica nueva (Paginación) donde se seguirán publicando tus próximas entradas de forma secuencial. En futuras entradas explicaremos el término Paginación con más detenimiento.

¿Qué son las Páginas de un blog?

Las Páginas son secciones web que alojan contenido estático. El contenido que colocas en tus Páginas no se mueve o cambia a menos que tú, manualmente, lo edites y lo cambies. No se ordenan cronológicamente sino como tú decidas.
Se suelen usar para almacenar contenido importante que no quieres publicar en entradas por temor a que se pierda a lo largo de años en el blog.

Por ejemplo:
- Un músico podría publicar las siguientes páginas:
Discografía, biografía, contacto, vídeos musicales, audio...
- Un fotógrafo: galería (fotobook), vídeo (videobook), sobre mí, contratación...
- Un productor de vídeo: galería (fotobook), vídeo reel, vídeo (videobook), making of, acerca de, contratación...

A la sección páginas se accede haciendo clic en el menú principal Blogger:

Pulsando sobre "Página nueva" te mostrará dos opciones:

Página blanco: Es un editor de páginas muy parecido al de entradas. En él puedes añadir la información que desees.

Por ejemplo:
Si eres una manitas y te encantaría mostrar una galería de tus bolillos, podrías crear una página llamada "Fotos bolillos" y en ella mostrar todas tus obras como si de una galería se tratase.

Dirección Web:
En esta opción añadirías una dirección web que enlace a otro sitio externo (una tienda online, Pinterest) o interno (alguna entrada en concreto, un resultado de una búsqueda...)

¿Dónde aparecen las páginas?

Puedes mostrar (u ocultar) las páginas estáticas desde la siguiente opción:

Como veis, las páginas pueden ser mostradas como un menú horizontal bajo el título del blog o en la barra lateral del blog como si fueran enlaces.

Una vez creadas veremos lo siguiente en el panel Páginas:

y en el blog:

Si has dado a mostrar páginas, todas ellas aparecerán en el lugar que le has indicado pero quizá no quieras enseñar una de ellas. Quizá simplemente deseas cambiar el orden en el que se muestran.
En cualquier caso, ve a "Diseño", al gadget "Páginas" y pulsa "Editar":

Una ventana emergente te mostrará las páginas actuales para que las arrastres hasta tener el orden correcto y tendrás la opción de deseleccionar las páginas que no deseas que aparezcan en el menú. Pulsa Guardar para conservar los cambios realizados.

Por tanto existen notables diferencias entre entradas y páginas pero su uso depende de la organización que desees para tu blog.

Qué es y cómo subir una cabecera blogger

Cuando empezamos un blog, solemos querer personalizarlo rápidamente y, a veces, tendemos a sobrecargarlo y equivocarnos con el mensaje que transmite el diseño.

Uno de los aspectos a cuidar es la cabecera del blog tanto colores (procurando que sea una paleta armónica), como la fuente, diseño, mensaje...
Puede ser cuestión de gustos pero es merecedor de tener en cuenta.
Vayamos por partes:

¿Qué es la cabecera del blog?

La cabecera del blog es una imagen alargada que suele representar el blog con alguna fotografía, dibujo o texto. Según la temática del blog, nos inclinaremos por una o varias de las opciones.