Como crear un logo y un favicon para un blog o sitio web

Cada sitio web o blog de internet debe tener su propio logo o logotipo que lo identifique en la red.
Permiten que los lectores asocien esta imagen con nuestro contenido y lo que publicamos o compartimos en internet.
El logotipo puede mostrarse de diferentes formas, una de ellas es el archivo "favicon.ico" que aparece en el navegador de los lectores cada vez que acceden a cualquier página de nuestro sitio.

¿Qué es un logo y un favicon?

El logo y el favicon son dos archivos completamente distintos.
El logo
El logo es un archivo de imagen, generalmente en formato PNG ya que este formato soporta la transparencia y se puede optimizar para su uso en la red.
Se puede usar de formas diferentes y de distintos tamaños.
Al igual que el nombre de un sitio web hace referencia al mismo, por lo que podemos emplearlo en las redes sociales, artículos, firmas de correo, avatares, de forma tal que nuestros lectores se habitúen y lo relacionen con el contenido que publicamos.
El favicon
El favicon es un archivo de imagen en formato ICO que puede contener en su interior varias imágenes de distinto tamaño.
En la actualidad de usan 16, 24, 32 y 64 pixeles.
El navegador del equipo o dispositivo escogerá la necesaria para mostrar.
Por ejemplo:
✓ En el tope superior se usará el icono de 16 pixeles.

✓ En Google Chrome al crear un acceso directo (aplicación) en el escritorio usará el icono de 64 pixeles.
✓ Internet Explorer al crear un icono en la pantalla de inicio de Windows 8, usará un icono de 144 pixeles. Lee como hacerlo
✓ También se puede crear un icono de 57 pixeles para mostrar en el escritorio del iPhone u otros dispositivos de Apple.

¿Cómo crear un logo para nuestro blog o sitio web?

Usando cualquier programa de edición de imágenes se puede crear un logo.
Solo es necesario tener en cuenta guardar la imagen en formato PNG como decíamos anteriormente y optimizarla para el uso en la red o sea disminuir su tamaño.
Para la tarea puede utilizarse el clásico Photoshop, Gimp o Paint.NET (los dos anteriores gratuitos) y hasta el sencillo Paint incluido en Windows.
También hay varios servicios en la red como http://userlogos.org/ donde se pueden crear un logotipo.
Si te animas a hacerlo manualmente puedes descargar la siguiente plantilla para Photoshop.
Permite crear un logo de estilo Metro, o sea el formato plano y sencillo como el que usamos en nuestro sitio.
Solo es necesario modificar el color del fondo e insertar el texto, iniciales o la letra que deseas u una de las formas que ofrece el programa.

Al terminar en el menú Archivo selecciona "Salvar para la web". Escoge el formato PNG y marca la casilla de transparencia.
La plantilla original mide 500 x 500 pixeles, pero puedes crear varios logos a distinto tamaño.
La plantilla también se puede abrir con el programa Paintshop u otros editores compatibles.
Descargar plantilla PSD

¿Cómo crear un FAVICON para nuestro blog o sitio web?

Un favicon a partir de una imagen se puede crear de dos formas, usando programas como el famoso MicroAngelo (de pago) o empleando una herramienta disponible en la red gratis.
Por supuesto sugerimos la segunda opción que es excelente y mucho más sencilla de utilizar.
Haz lo siguiente:

Agregar el favicon en un blog de WordPress

Sube el favicon creado a la carpeta raíz de tu blog.
Agrega el siguiente código en el archivo "header.php" del tema que usas.

<link rel="shortcut icon" href="http://ideas.norfipc.com/favicon.ico" />

Sustituye http://ideas.norfipc.com/ por la dirección URL de tu blog.
El archivo header.php se encuentra en la ruta: "wp-content/themes/NombreDelTema"
Puedes copiarlo a tu PC, modificarlo y volverlo a subir o usar el editor integrado en WordPress.

Como refrescar la cache de iconos en Windows, el navegador o en un servidor de internet

Los iconos al ser elementos pequeños y que se usan de forma repetida son guardados en la che (memoria) para evitar tener que leerlos en cada acceso.
Esto trae como consecuencia que al cambiar un icono y usar el mismo nobre de archivo se siga mostrando en la miniatura el anterior.
Esto sucede en la vista de miniatura de Windows, en los navegadores y en los servidores de internet.

Como limpiar la cache de iconos en Windows

Accede a la carpeta C:\Users\NombredeUsuario\AppData\Local y elimina el archivo "IconCache.db"
Reinicia el equipo.

---

Como limpiar la cache de iconos en el navegador

Elimina la cache del navegador web.

---

Como limpiar la cache de iconos en internet

Esta es la cuestión más difícil ya que a veces la imagen necesaria está alojada y cacheada en varios servidores, más difícil aun si se usa una red CDN.
No basta con eliminar el archivo del servidor y en el caso del favico.ico no se puede renombra porque los navegadores no lo reconocerán.
Depende en cada caso del servicio de hosting, algunos dan la opción de eliminar un archivo específico de la cache.
En otros casos solo resulta esperar.