Como criar um favicon
Para criar um favicon, adicione acima o seu logótipo - ou escreva uma letra ou emoji -, ajuste o aspeto e descarregue o ZIP. As pré-visualizações mostram o ícone em cada tamanho real e num separador do navegador, em modo claro e escuro.
- Escolha a origem. Um logótipo PNG ou SVG funciona melhor; qualquer outra imagem é ajustada dentro de um quadrado. Não tem logótipo? Use uma letra ou emoji sobre um fundo colorido.
- Defina o aspeto. Cor de fundo ou transparente, a forma (quadrado arredondado, quadrado ou círculo) e quanto espaçamento fica à volta da imagem.
- Descarregue. Descarregar todos os ícones dá-lhe o pacote completo; Só favicon.ico dá-lhe apenas esse ficheiro.
O que inclui o pacote de favicon
| Ficheiro | Tamanho | Utilizado por |
|---|---|---|
favicon.ico | 16, 32 e 48 px | Todos os navegadores, Windows, resultados de pesquisa |
favicon-16x16.png, favicon-32x32.png | 16 e 32 px | Separadores do navegador e marcadores |
apple-touch-icon.png | 180 px | Ecrã principal do iPhone e do iPad |
android-chrome-192x192.png, -512x512.png | 192 e 512 px | Ecrã principal do Android, aplicações web instaladas |
site.webmanifest | - | Define os nomes dos ícones e as cores para Android e aplicações web |
favicon-html.txt | - | As tags para colar nas suas páginas |
O ícone Apple tem sempre um fundo sólido e cantos quadrados: os iPhones arredondam os cantos por si e mostram as áreas transparentes a preto.
Adicione o favicon ao seu site
- Descompacte o pacote e carregue os ficheiros para a pasta raiz do seu site, junto da página
inicial, para que
yoursite.com/favicon.icoabra o ícone. - Cole as tags HTML (mostradas acima e em
favicon-html.txt) no<head>das suas páginas. - Recarregue com a cache limpa. Os navegadores guardam favicons antigos, por isso uma janela privada é a verificação mais rápida.
No WordPress pode, em alternativa, definir o ícone de 512 px como Ícone do site no Personalizador, que cria os outros tamanhos automaticamente.
Dicas para um favicon nítido
- Simplifique. Com 16 píxeis, um logótipo detalhado fica desfocado. Use o símbolo do seu logótipo, ou a respetiva primeira letra, em vez do logótipo completo com texto.
- Use contraste. Os separadores são claros ou escuros consoante o tema do navegador - verifique as duas pré-visualizações.
- Cuidado com o espaçamento. Menos espaçamento torna o ícone maior no separador; um pouco mais fica melhor no ecrã principal do telemóvel.
Precisa antes de um único ficheiro .ico com outro tamanho? O conversor de imagens guarda qualquer imagem como ICO.
Perguntas frequentes
Como faço um favicon?
Adicione o seu logótipo ou qualquer imagem quadrada na caixa desta página, ou escreva uma letra ou emoji. Ajuste o fundo, o espaçamento e a forma e depois descarregue o ZIP com todos os tamanhos de ícones e o HTML para colar no seu site.
Que tamanhos precisa um favicon?
Um favicon.ico com versões de 16, 32 e 48 píxeis serve os navegadores e o Windows; um apple-touch-icon de 180 píxeis serve iPhones e iPads; ícones de 192 e 512 píxeis servem o Android e as aplicações web instaladas. O pacote inclui todos.
Como adiciono o favicon ao meu site?
Carregue os ficheiros do ZIP para a pasta raiz do seu site, de forma que o favicon.ico abra em oseusite.com/favicon.ico. Depois cole as tags HTML na secção head das suas páginas.
Porque é que o meu novo favicon não aparece?
Os navegadores guardam os favicons em cache durante muito tempo. Abra diretamente o endereço do favicon, recarregue-o ou experimente uma janela privada. Os resultados de pesquisa podem demorar semanas a atualizar.
Posso criar um favicon a partir de texto ou de um emoji?
Sim. Escolha "Letra ou emoji", escreva um ou dois carateres e escolha as cores. É uma forma rápida de obter um ícone limpo sem ter um logótipo.
A minha imagem é carregada?
Não. Todos os ícones são criados no seu navegador e a sua imagem nunca sai do seu dispositivo.