¿Cómo hago un favicon?

Este es el logotipo que estoy usando y es la parte de PSA que estoy tratando de convertir en un favicon.

Estoy tratando de hacer un favicon con la primera parte del logotipo (PSA) para un sitio web que estoy construyendo, pero estoy perplejo, ¿cómo? Todavía soy un novato en lo que respecta a Photoshop cc e Illustrator cc, por lo que cualquier ayuda será excelente.

Hola Dominic, bienvenido a GD.SE. No quiero ser grosero, pero ¿has buscado en Google tu pregunta? El término 'cómo hacer un favicon' me arroja unos 8 millones de resultados. Revise algunos de ellos y edite su pregunta con detalles específicos si hay alguna parte en la que se atasca. ¡Gracias!
Hola Vincent, lo siento, debería haber buscado mejor, me aseguraré de que no vuelva a suceder.
Está bien, no hay necesidad de disculparse tan profusamente :) Sin embargo, pedimos un poco de esfuerzo de investigación en sus preguntas. Eche un vistazo al recorrido y al centro de ayuda para comprender mejor cómo funcionan las cosas aquí. ¡Gracias!

Respuestas (3)

En Photoshop:

Comience usando la herramienta de recorte para recortarlo en un cuadrado con solo el Círculo. No lo distorsione para que sea un círculo perfecto; déjelo como un óvalo y solo tenga espacio adicional a los lados. (Asegúrese de guardar una copia de la obra de arte original)

Luego use la selección de varita mágica para eliminar todo el blanco, hágalo transparente (si no lo hace, terminará pareciendo extraño en el navegador (ya que el color de la mayoría de los navegadores no es blanco)

ingrese la descripción de la imagen aquí

Tenga en cuenta que puede verse mejor dejar el blanco en el interior y el exterior transparente, eso depende de usted.

ingrese la descripción de la imagen aquí

Luego cambie el tamaño de la imagen a 16x16px o posiblemente más . Lea más sobre esto en Stack Overflow. .

Guarde el archivo como png (para preservar la transparencia; jpg y otros formatos no lo harán)


Luego puede usar una herramienta en línea para convertir su png en un favicon (algunos de los creadores de sitios web simples y populares le permitirán simplemente ponerlo como un png)

Vale la pena señalar que algunas herramientas de creación de sitios web le permiten simplemente cargar un png de alta resolución del favicon y harán el escalado por usted; solo carga la imagen y el sistema se encarga del resto.

No lo haga usted mismo, especialmente si no está seguro de cómo proceder. Para que sea totalmente compatible (y, por lo tanto, útil), se debe crear un favicon en una variedad de formatos y tamaños.

Recomendaría usar una solución / generador en línea como https://realfavicongenerator.net/ , una vez que haya recortado su imagen con éxito (usando una de las otras respuestas). Otra opción sería seguir el tutorial (largo, inclusive, con Photoshop) en http://www.emergeinteractive.com/insights/detail/The-Essentials-of-FavIcons-in-2017

Proporciono más detalles técnicos, orientados a webmasters, en otra respuesta .

Usa la herramienta de recorte en Photoshop, y configura la altura y el ancho tanto como necesites, normalmente 16x16, 50x50 o 150x150. Esto creará el cuadrado de cultivo.ingrese la descripción de la imagen aquí

Arrastre la imagen hacia la derecha para que el cuadrado de recorte se ajuste a la izquierdaingrese la descripción de la imagen aquí

Recorta la imagen y guárdala en PNGingrese la descripción de la imagen aquí

¡Hecho!

En tamaño de píxel, es (puede ser) 16x16, etc... pero en realidad [con respecto al recorte] es solo una proporción de 1x1, y luego se redimensiona a una imagen más pequeña.