Creando un Favicon personalizado

Tabla de contenido:

Anonim

Voy a admitir algo un poco geek. Me gustan mucho los favicons. Ellos son divertidos. Son una gran herramienta de marca. Y son algo simple que los propietarios de pequeñas empresas pueden hacer para animar sus sitios e incluso aumentar la facilidad de uso para los usuarios.

Si no sabe qué es un favicon, permítame ofrecerle algo de ayuda:

$config[code] not found

Los Favicons son los mini gráficos de 16 × 16 píxeles que representan su sitio web en la barra de direcciones, en la lista de marcadores de un usuario o en las pestañas de su navegador. Permiten a sus visitantes crear una conexión visual con su sitio.

¡Ordenado! ¿Cómo se crea uno?

Diseña tu favicon:

  • A mano: Abre tu programa de gráficos favorito y entra en él. Querrá crear un nuevo archivo que tenga 16 × 16 píxeles y ampliarlo hasta que el área sea viable O bien, abrir un área que sea más grande, pero aún así una especie de múltiplo de 16 × 16. Cuando diseñe su favicon a mano, use algo que represente con precisión su marca, ya sea un esquema de color común, las iniciales de su empresa, etc. Lo que cree tendrá que soportar las estrictas restricciones de 16 × 16 píxeles.
  • Con herramientas: Si tiene problemas de diseño (no se preocupe, yo también lo estoy), hay algunas herramientas excelentes que facilitan que incluso las personas como nosotros creen grandes favicons. Por ejemplo, Favicon.cc te dará algo de estructura y te permitirá crear la tuya directamente desde su sitio o FavIcon de Pics te permitirá subir una foto y generar el favicon para ti. ¡Sencillo!

Salva tu favicon: Al guardar su archivo, redúzcalo a 16 bits y guárdelo como "favicon.ico" si está utilizando Photoshop o "favicon.gif" o "favicon.png" si está usando otra cosa. Si está utilizando Photoshop y desea darle un impulso adicional a su favicon, se recomienda descargar el complemento de formato de archivo del Icono de Windows para que pueda guardar en el formato ICO.

Sube tu favicon: Conéctese a su servidor y cargue su favicon a la carpeta raíz de su sitio. Luego, agregue el siguiente código HTML a la sección de encabezado de su página web (entre las dos etiquetas de encabezado) (elija su tipo de archivo):

Refrescar: Una vez que haya terminado, actualice su navegador y debería ver aparecer su favicon. Si no, dale unos minutos. A veces se necesita un poco para que todo se sincronice.

¡Y eso es! Cuatro pasos y tiene un gran favicon de marca que ayudará a los usuarios a reconocer su sitio en la lista de marcadores o en su navegador. Bastante simple, ¿verdad?

Solo por diversión, aquí están algunos de mis favoritos favoritos en la Web:

  • Fuegos artificiales de michigan
  • Jeffrey Zeldman
  • Boing Boing
  • Enciclopedia
  • Fool.com
  • El blog SEO de Michael Gray

¿Algún otro favorito personal?

17 comentarios ▼