¿Cómo crear un favicon .ico con Photoshop?

Este tutorial te mostrará cómo crear un favicon para tu sitio web con la ayuda de Photoshop.

Favicon es una herramienta pequeña pero significativa para promocionar tu marca en tu sitio web. Así es como puede verse en tu sitio web:

Photoshop es un excelente y flexible programa de edición de gráficos para crear favicons personalizados.

Favicon suele ser un logotipo de 16 × 16 que puedes usar en tu sitio web, pero si necesitas un poco más de espacio para trabajar, puedes comenzar con un documento de 64 × 64 píxeles y luego escalarlo.

1. Vamos a crear un nuevo documento en Photoshop. Abre el menú 'Archivo'> 'Nuevo':  
2. Usa la herramienta 'Zoom' y aumenta el documento para la edición futura:
3. Para nuestro favicon de ejemplo, crearemos un fondo degradado sencillo con 2 letras 'TM' '(TradeMark).
4. Aplica la herramienta de degradado/gradiente a tu documento. Siéntete libre de usar cualquier preajuste de colores disponible por defecto o crea uno nuevo: 
5. Usa la herramienta ‘Texto horizontal’ para añadir tu propio texto. Establece la familia de fuentes, el tamaño de fuente y el color de fuente:
   
6. Por medio de la herramienta de transformación (Ctrl + T) ajusta la posición del texto: 
7. Combina capas como se muestra en la captura de pantalla a continuación:  
8. Haz clic en ‘Archivo’ > ‘Guardar como’ y se abre el menú desplegable en el que necesitas seleccionar .PNG (*.PNG). Haz clic en el botón ‘Guardar’: 
9. Has creado con éxito tu propia imagen de favicon. Se guardó como el archivo 'favicon.png' en tu disco duro.
10. Los favicons se guardan como archivos .ICO, un formato de archivo que guarda varias imágenes en diferentes tamaños para escalar. Por lo tanto, el último paso sería convertir el formato de imagen de .PNG en .ICO. Este será el paso más fácil del tutorial.
11. Abre cualquier sitio web de conversión de imágenes en línea en tu navegador. Usaremos este sitio web.
12. Arrastra y suelta el archivo ‘favicon.png’ en el área ‘Subir’ (como se muestra en la captura de pantalla). La conversión se inicia automáticamente. El proceso toma 1 o 2 segundos: 
13. Haz clic en el botón ‘Descargar’ para guardar el archivo ‘favicon.ico’ en tu disco duro.

¡Listo! Has creado un favicon único para tu sitio web con el software Adobe Photoshop. Siéntete libre de subir este favicon a tu servidor.

También te podrían interesar otros tutoriales de nuestro blog

¿Dónde encontrar el archivo php.ini?
50 Tutoriales cuidadosamente seleccionados para crear efectos de texto con Photoshop
Guía paso a paso: cómo convertir Muse a WordPress