Xerador de favicon en liña: ICO, PNG e manifest

Q: Que tamaño debe ter un favicon?

O favicon.ico leva 16, 32 e 48 px. Ademais convén un PNG de 180 px para iPhone e outros de 192 e 512 px para Android. Esta ferramenta xéraos todos.

Q: Por que non se actualiza o meu favicon?

Os navegadores gárdano na caché moito tempo. Engade ?v=2 á ligazón, ou abre a web nunha xanela privada para comprobar o novo.

Q: Por que a icona do iPhone ten fondo?

Porque iOS non admite transparencia en apple-touch-icon e pintaría o fondo de negro. A ferramenta pon a túa cor de fondo, ou branco se escolliches fondo transparente.

Que ficheiros precisa unha web hoxe

Xa non fan falla vinte tamaños. Con estes cinco ficheiros quedas ben en todos os navegadores, na pantalla de inicio do móbil e nas buscas de Google:

favicon.ico con 16, 32 e 48 px dentro: pídeno os navegadores antigos, os lectores de RSS e Google, que o busca na raíz aínda que non o ligues.
icon.svg: un só ficheiro vectorial que se ve nítido a calquera tamaño. Só se xera en modo texto.
apple-touch-icon.png de 180 px, para a pantalla de inicio do iPhone. Vai sen transparencia, porque iOS enche o fondo de negro.
icon-192.png e icon-512.png, que liga o site.webmanifest para Android e as aplicacións web instalables.

Como instalalo

Descarga o ZIP, copia os ficheiros na raíz da túa web (onde está o index.html) e pega o HTML dentro do <head>. Se cambias a icona máis adiante, o navegador pode tardar en decatarse porque a garda na caché: cambiar o nome do ficheiro ou engadir ?v=2 á ligazón resólveo.

Consellos de deseño

A 16 px non se len detalles: unha letra, un símbolo ou o trazo máis recoñecible do logo funcionan mellor ca o logo enteiro.
Comproba a icona nas dúas lapelas da vista previa: un favicon escuro desaparece no tema escuro do navegador.
Cada tamaño debúxase á súa resolución real, non reducindo o de 512, para que o de 16 px saia o máis nítido posible.

Un favicon provisional nunha liña

Se só precisas algo mentres maquetas, o xerador de ximg.es xa serve unha imaxe cadrada cunha letra, sen descargar nada:

<link rel="icon" href="https://ximg.es/32x32/2563eb/fff.png?text=X">

Preguntas frecuentes

Que tamaño debe ter un favicon?

O favicon.ico leva 16, 32 e 48 px. Ademais convén un PNG de 180 px para iPhone e outros de 192 e 512 px para Android. Esta ferramenta xéraos todos.

Fai falla o favicon.ico se xa teño o SVG?

Si. Safari e algunhas ferramentas seguen sen usar o SVG, e Google e os lectores de RSS piden /favicon.ico directamente.

Súbense as miñas imaxes a algún servidor?

Non. As iconas debúxanse con canvas no teu navegador e o ZIP créase tamén aí.

Por que non se actualiza o meu favicon?

Os navegadores gárdano na caché moito tempo. Engade ?v=2 á ligazón, ou abre a web nunha xanela privada para comprobar o novo.

Por que a icona do iPhone ten fondo?

Porque iOS non admite transparencia en apple-touch-icon e pintaría o fondo de negro. A ferramenta pon a túa cor de fondo, ou branco se escolliches fondo transparente.

Que é o site.webmanifest?

Un JSON que describe a túa web como aplicación: nome, iconas e cores. Android úsao ao engadir a web á pantalla de inicio.

Xerador de favicon

HTML para o <head>

Que ficheiros precisa unha web hoxe

Como instalalo

Consellos de deseño

Un favicon provisional nunha liña

Preguntas frecuentes

Máis ferramentas