Creando un favicon [cerrado]

95

¿Cómo puedo crear un favicon para mi sitio web?

html favicon Ry-
fuente
1
Posible duplicado de ¿Cómo agregar un ícono de pestaña del navegador (favicon) para un sitio web?
Michał Perłakowski
@Gothdo ¡Esto no es un duplicado! ¡El que señalas ES! ¡Este precedió a aquél por año y medio!
Dov Miller
5
Voy a votar para cerrar esta pregunta como fuera de tema porque no se trata de programación sino de diseño web.
Kyll
@DovMiller La mejor pregunta con mejores respuestas es la que debería permanecer abierta.
mbomb007

Respuestas:

100

Buscando favicons, descubrí que necesitaba más de 10 tipos de archivos para funcionar en todos los navegadores y dispositivos :(

Me cabreé y creé mi propio generador de favicon, que crea todos estos archivos y el encabezado HTML correcto para cada uno de ellos: faviconit.com

Espero que lo disfrutes.

Eduardo Russo
fuente
14
Excelente app. Este es uno de los mejores sitios de generación de favicon que he visto.
Chris Livdahl
1
Gracias, Chris. ¡Me alegra poder ayudar!
Eduardo Russo
3
@EduardoRusso esto es simplemente increíble, ¡gracias!
davnicwil
4
Buen trabajo. Funciona como se esperaba.
Dilshan
1
¡Funciona mejor de lo esperado! Pequeño error (?): Cuando se usa avanzado, la ruta y la versión no se incluyen en el browserconfig.xml. Sin embargo, todavía me encanta. : D
mrjink
42

Si ya tiene una imagen de logotipo que desea transformar en un favicon, puede convertirla usando http://www.favicomatic.com/ . Crea favicons nítidos y no he tenido que editarlos después de crearlos. Generará favicons en 16x16 y 32x32 y para citarlos: "¡Todos los malditos tamaños, señor!". El sitio también admite / conserva la transparencia presente en algunos png. Además, su sitio se ve genial y es fácil de usar.

Por ejemplo, aquí hay un logotipo de stackoverflow: ingrese la descripción de la imagen aquí

Estos son algunos de los favicons generados:

ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí ingrese la descripción de la imagen aquí

También generan el html necesario:

<link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="favicon-128.png" sizes="128x128" />
<meta name="application-name" content="&nbsp;"/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="mstile-310x310.png" />

Miré los primeros 20 o más resultados de Google, y este fue de lejos el mejor.

Jared Menard
fuente
1
¿Cómo puedo mejorar esta respuesta para evitar más votos negativos?
Jared Menard
3
No lo sé. Tu respuesta hizo que esto fuera un trabajo de cinco minutos para mí. Gracias.
andyb
1
a algunas personas simplemente les gusta votar en contra sin motivo alguno. SO necesita tener una política en su contra. Por cierto, ¿realmente necesitamos muchos tamaño diferente o que 16x16 y 32x32 somos lo suficiente como página web genera
batmaci
Personalmente, no sé cuál es la mejor práctica aquí. En mi sitio creo que solo usamos uno. Estos podrían ser útiles para las aplicaciones web progresivas de Chrome cuando se combinan con un manifest.json.
Jared Menard
Encontré este recurso en favicomatic.com , se llama "Favicon Cheat Sheet" github.com/audreyr/favicon-cheat-sheet
Jared Menard
20

GIMP es un buen programa para eso. Simplemente guarde la imagen como PNG, luego agregue

 <link rel="SHORTCUT ICON" HREF="/favicon.png">

en la <HEAD>sección de su página.

Stefano Borini
fuente
7
Gimp también ofrece la opción de guardarlo como favicon.ico, lo que evitaría la molestia de agregar el enlace.
4
Lástima que los antiguos MSIE (que aún son bastante populares) no acepten el PNG en lugar de un archivo con formato ICO "adecuado".
Már Örlygsson
Para anclar sitios web a la barra de tareas, Windows también requiere un ico.
Necriis
8

Crea un archivo de icono de 16 x 16 o 32 x 32 o 64 x 64. Nómbrelo favicon.ico y colóquelo en la raíz de la carpeta pública de su sitio web.

Hay sitios web que convertirán otros formatos gráficos a .ico por usted. es decir. http://tools.dynamicdrive.com/favicon/

Jim
fuente
4
Además: puede guardar su archivo de favicon en cualquier lugar si agrega un <link rel="shortcut icon" href="link/to/fav.ico" />al <head>bloque de sus páginas.
Már Örlygsson
1
tools.dynamicdrive.com/favicon también le permitirá fusionar varios tamaños en un favico, lo cual es genial
hdorio
3

Si desea crear archivos .ico, también puede usar GIMP para crear favicons. Los navegadores modernos pueden usar archivos de imagen normales, pero originalmente creo que eran solo archivos .ico. Es un editor de imágenes de código abierto similar a Photoshop. Crea y edita una imagen del tamaño correcto (digamos 32 x 32), aplana en una capa (a menos que quieras varios íconos en el mismo archivo) y guárdala como .ico. Lo formateará correctamente, luego usará Stefano <link rel="SHORTCUT ICON" HREF="/favicon.ico">para usarlo en su página web.

rocketmonkeys
fuente
3

Utilizo el programa Paint.net de código abierto junto con el complemento Icon .

A continuación, puede crear y guardar una imagen en formato .ico con todos los tamaños diferentes incrustados en el archivo .ico.

Matthew Lock
fuente
Mmmm, ¿paint.net.amihotornot.com.au como anfitrión del complemento Icon? ¿Eso es legítimo?
RonaldB
@RonaldB sí, es el hogar de ese complemento. Dominio extraño, ¿no es así
Matthew Lock
2

Al crear un favicon, debe tener en cuenta los siguientes factores:

  • Plataformas compatibles Hace diez años, solo deseaba admitir navegadores de escritorio y la solución fue generar la favicon.icoimagen clásica . Hoy en día, desea admitir iOS (y iOS Safari) y Android (y Android Chrome). Tal vez Windows 10 (y Edge) y la nueva barra táctil Mac Book Pro también (macOS Safari). Ya no puede usar una sola imagen de "talla única".
  • Diseño Tan pronto como admita múltiples plataformas, se enfrentará a múltiples pautas de diseño. Por ejemplo, Google está usando íconos transparentes para sus propias aplicaciones nativas en Android, mientras que los íconos de iOS no pueden ser transparentes en absoluto. No se puede utilizar un enfoque de "diseño único que se adapte a todos".
  • Iconos generados y código HTML Durante dos o tres años, la referencia ha sido generar tantos iconos como sea posible para cubrir todos los casos. Me temo que creé esta tendencia yo solo: - / El problema es que terminas con 20 y tantos líneas o HTML, que es demasiado. Para tener una solución técnica satisfactoria, debe equilibrar la cantidad de iconos / HTML generados y las plataformas compatibles.

Como de costumbre, puede crear todos estos activos manualmente. A menos que tenga necesidades muy, muy específicas y un presupuesto, definitivamente este no es el camino a seguir.

La forma correcta para la mayoría de las personas es usar un generador de favicon que le permite decidir el aspecto de todos los iconos y se encarga de todos los detalles. El único que hace esto es Real Favicon Generator . Divulgación completa: soy el autor de este sitio.

philippe_b
fuente
1

Y si está utilizando asp.net, intente de esta manera aplicar favicon a su página:

<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />

pero puede encontrar más información aquí: http://doctype.com/

Tarik
fuente
1
Como nota, doctype.com cerró el 15 de febrero de 2013. Lea más al respecto .
Krease
1

Hago mis favicons 16 x 16 o 32 x 32 usando Photoshop. Entonces lo guardo como gif y uso IrfanView para convertir el gif en un ico.

Max
fuente