NorfiPC
NorfiPC » Diseño y edición web » Crear logotipos

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


Compartir en Google Compartir en Facebook Compartir en Twitter Pinear imágenes en Pinterest
Plantilla gratis para crear un logotipo de alta resolución que identifique tu blog o sitio en internet. Como crear el favicon, pequeño icono que se muestra en el navegador web de los lectores, en los accesos directos creados a tus páginas y en el escritorio de los teléfonos celulares.
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.
Diferencias en el navegador web de un blog sin favicon y después de agregarlo
✓ 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.
Crear un logo para un blog o sitio web con una plantilla en PSD
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.




¿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:
1- Después de crear y tener tu logo accede a X-IconEditor usando el siguiente enlace: http://www.xiconeditor.com/Default.aspx
2- Presiona el botón "Import"
3- En la ventana que se abre presiona el botón "Upload" para subir la imagen desde tu equipo.
Dale el tamaño correcto a la imagen y marca las casillas de las distintas medidas, para que el favicon contenga varias imágenes en su interior.
Crear un favicon con una imagen en el servicio de X-IconEditor
4- Presiona OK.
5- Presiona el botón "Export" y descarga el favicon creado.
Descargar el archivo favicon.ico creado
6- Sube el archivo favicon.ico al servidor web.
7- Incluye la siguiente etiqueta en todas las páginas o en la plantilla del blog:
<link rel="shortcut icon" href="favicon.ico">



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.
Agregar un archivo favicon.ico al código de un blog de 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.

Otras páginas relacionadas



Síguenos en las redes sociales


Norfi Carrodeguas en Google+ Trucos de NorfiPC en Facebook @NorfiPC en Twitter NorfiPC en Pinterest

Buscar en este sitio

 
 
Inicio | Mapa del sitio | Sobre mí | RSS