Pular para o tutorial
lil cactus

Como criar um favicon em arquivo ICO

Iniciante4 minutosAtualizado em

Resposta rápida

No Lil Cactus, abra sua arte e escolha Arquivo e depois Exportar e depois ICO… Em Nome do arquivo, troque o nome por favicon.ico. Em Tamanhos de ícone, deixe os seis tamanhos marcados (de 16 a 256 px; é o padrão) e clique em Exportar. O download contém as seis versões quadradas num só arquivo ICO.

Os seis tamanhos de ícone da folha exportados sobre faixas clara e escura: 16, 32, 48, 64, 128 e 256 pixels em cada linha de cima, com 16 e 32 pixels ampliados quatro vezes abaixo
Os seis tamanhos dentro de favicon.ico sobre um fundo claro e um escuro: 16, 32, 48, 64, 128 e 256 px na linha de cima, com 16 e 32 px ampliados 4× abaixo.
Tempo
4 minutos
Nível
Iniciante
Você precisa de
Um ícone ou outra arte aberta no editor
Funciona com
PNG, JPG, SVG, PSD e projetos do Lil Cactus (a transparência é mantida)
Abrir o exemplo no Lil CactusUsar uma foto sua

Grátis, sem cadastro. Sua foto fica no seu computador.

Um favicon é o pequeno ícone ao lado da aba ou do favorito de um site. Formas simples, com áreas amplas de cor, são mais fáceis de ler em tamanho pequeno. Nesta prática, você usa uma folha em dois tons com uma única nervura clara.

Exporte um favicon ICO em quatro passos

  1. Abra a arte

    Abra a arte de prática desta página. Para um arquivo seu, escolha Arquivo e depois Abrir… e selecione a imagem. O quadriculado em volta da folha indica o fundo transparente. Pode aparecer um aviso curto sobre a suavização das bordas do SVG; ele fecha sozinho.

    Menu Arquivo com Abrir circulado
    Carregue a arte que você quer transformar em ícone.

  2. Escolha Arquivo › Exportar › ICO…

    Escolha Arquivo e depois Exportar e depois ICO… A caixa de diálogo Exportar como ICO abre com uma visualização da arte.

    Menu Arquivo e submenu Exportar com ICO circulado
    Abra a caixa de diálogo de exportação ICO.

  3. Escolha o nome do arquivo e os tamanhos

    Em Nome do arquivo, troque o nome por favicon.ico. Em Tamanhos de ícone, mantenha 16, 32, 48, 64, 128 e 256 marcados. Esses são os seis tamanhos disponíveis.

    Campo Nome do arquivo do ICO com favicon.ico, circulado
    Dê nome ao arquivo de ícone baixado.
    Opções de exportação ICO com 16, 32, 48, 64, 128 e 256 marcados e o grupo Tamanhos de ícone circulado
    Cada número indica a largura e a altura de um ícone quadrado, em pixels.

  4. Exporte o ICO

    Confira se o rodapé mostra 6 tamanhos de ícone e clique em Exportar. O navegador salva favicon.ico usando os próprios controles de download ou de local para salvar.

    Rodapé da caixa de diálogo ICO mostrando 6 tamanhos de ícone, Cancelar e o botão Exportar circulado
    Confira a quantidade selecionada antes de exportar.

Use o ícone no seu site

Envie favicon.ico para a pasta principal do seu site, para que ele abra em /favicon.ico. Você também pode apontar para ele no <head> da página com <link rel="icon" href="/favicon.ico"> (veja a referência de ícones do MDN).

Os navegadores guardam os favicons em cache, então um ícone atualizado pode precisar de uma recarga da página ou de algum tempo para aparecer.

Se o ícone de 16 px estiver difícil de ler

Simplifique a arte: menos detalhes, formas maiores e traços mais grossos. A figura no topo desta página mostra o que sobrevive em 16 px: as duas áreas amplas de cor da folha e sua única nervura grossa.

Confira se a forma se destaca em barras de abas claras e escuras. Na figura, a metade verde-escura da folha quase desaparece no fundo escuro, e é a metade verde-clara que sustenta a forma. Uma arte numa única cor escura ficaria difícil de ver ali.

Próximos passos

Favicon em ICO: perguntas e respostas

Posso transformar um PNG ou JPG em ICO?

Sim. No Lil Cactus, os dois formatos podem ser abertos e exportados com os controles de ICO. A arte visível vira o ícone.

Um ICO pode ter fundo transparente?

Sim. No Lil Cactus, o ICO mantém a transparência que já existe na sua arte. Remova primeiro um fundo sólido quando quiser que o espaço em volta do ícone fique livre.

O que acontece com uma imagem retangular num ICO?

No Lil Cactus, a imagem é encaixada dentro de cada quadrado selecionado sem ser esticada. Uma margem transparente preenche o espaço que sobra.

Posso exportar um ICO com um só tamanho?

Sim. No Lil Cactus, deixe selecionado em “Tamanhos de ícone” só o tamanho de que você precisa. O ICO vai conter apenas esse tamanho.

Posso fazer um ICO de 512 × 512 px?

Não. No Lil Cactus, o maior tamanho de ICO é 256 × 256 px. Use PNG quando precisar de dimensões maiores em pixels.

Minha imagem é enviada a algum servidor quando faço um ICO?

Não. O Lil Cactus cria o ICO no navegador e o baixa para o seu dispositivo; a imagem não é enviada a um servidor. As estatísticas de uso opcionais são descritas na página de privacidade.

Publicado em  · Revisado em