Como adicionar um favicon em HTML

Três tags cobrem 99 % dos casos. Mais duas completam um setup de nível PWA.

3 min de leitura

A tag mínima

<link rel="icon" href="/favicon.ico"> — só isso. Todo navegador vai buscá-la.

O conjunto moderno recomendado

Adicione SVG e apple-touch-icon para renderização nítida em todas as plataformas:

<link rel="icon" href="/favicon.ico">

<link rel="icon" type="image/svg+xml" href="/favicon.svg">

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Prompts de instalação PWA

Adicione um manifest.json com entradas 192×192 e 512×512 em PNG e vincule <link rel="manifest" href="/site.webmanifest">.

Experimente as ferramentas

Continuar lendo

Explorar FetchFavicon

Categorias

Conversores

Utilitários

Guias

Tutoriais