Criando um favicon [fechado]

95

Como posso criar um favicon para meu site?

html favicon Ry-
fonte
1
Possível duplicata de Como adicionar um ícone de guia do navegador (favicon) para um site?
Michał Perłakowski
@Gothdo Esta não é uma duplicata! Aquele que você aponta é! Este precedeu aquele por um ano e meio!
Dov Miller
5
Estou votando para fechar esta questão como fora do tópico porque não se trata de programação, mas de web design.
Kyll
@DovMiller A melhor pergunta com as melhores respostas é aquela que deve permanecer em aberto.
mbomb007

Respostas:

100

Pesquisando sobre favicons, descobri que precisava de mais de 10 tipos de arquivos para funcionar em todos os navegadores e dispositivos :(

Fiquei chateado e criei meu próprio gerador de favicon, que cria todos esses arquivos e o cabeçalho HTML correto para cada um deles: faviconit.com

Espero que goste.

Eduardo russo
fonte
14
Excelente app. Este é um dos melhores sites de gerador de favicon que já vi.
Chris Livdahl
1
Obrigado, Chris! Fico feliz em ajudar!
Eduardo Russo
3
@EduardoRusso isso é simplesmente incrível - obrigado!
davnicwil
4
Bom trabalho. Funciona conforme o esperado.
Dilshan
1
Funciona melhor do que o esperado! Bug minúsculo (?): Ao usar avançado, o caminho e a versão não são incluídos no browserconfig.xml. Ainda amo isso, no entanto. : D
mrjink
42

Se você já tem uma imagem de logotipo que deseja transformar em um favicon, pode convertê-la usando http://www.favicomatic.com/ . Ele cria favicons nítidos e não precisei editá-los depois de criá-los. Ele irá gerar favicons em 16x16 e 32x32 e citá-los: "Todo tamanho maldito, senhor!". O site também suporta / preserva a transparência presente em alguns pngs. Além disso, o site deles parece legal e é fácil de usar.

Por exemplo, aqui está um logotipo stackoverflow: insira a descrição da imagem aqui

Aqui estão alguns dos favicons gerados:

insira a descrição da imagem aqui insira a descrição da imagem aqui insira a descrição da imagem aqui insira a descrição da imagem aqui insira a descrição da imagem aqui

Eles também geram o html necessário:

<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" />

Eu olhei para os primeiros 20 ou mais resultados do Google e este foi de longe o melhor.

Jared Menard
fonte
1
Como posso melhorar essa resposta para evitar mais votos negativos?
Jared Menard
3
Eu não sei. Sua resposta fez deste um trabalho de cinco minutos para mim. Obrigado.
andyb
1
algumas pessoas simplesmente gostam de votar negativamente sem motivo. O SO precisa ter uma política contra isso. A propósito, realmente precisamos de muitos tamanhos diferentes ou 16x16 e 32x32 são apenas o suficiente para a geração do site
batmaci
Eu pessoalmente não sei qual é a melhor prática aqui. No meu site, acho que usamos apenas um. Eles podem ser úteis para aplicativos da web progressivos do Chrome quando combinados com um manifest.json.
Jared Menard
Encontrei este recurso em favicomatic.com , ele é chamado de "Folha de dicas do
Jared Menard
20

O GIMP é um bom programa para isso. Basta salvar a imagem como PNG e adicionar

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

na <HEAD>seção de sua página.

Stefano Borini
fonte
7
O Gimp também oferece a opção de salvá-lo como favicon.ico, o que evitaria o trabalho de adicionar o link.
4
É uma pena que os MSIEs antigos (que ainda são bastante populares) não aceitem o PNG no lugar de um arquivo ICO "adequado".
Már Örlygsson
Para fixar sites na barra de tarefas, o Windows também requer um ico.
Necriis
8

Você cria um arquivo de ícone de 16x16 ou 32x32 ou 64x64. Nomeie-o como favicon.ico e coloque-o na raiz da pasta pública do seu site.

Existem sites que irão converter outros formatos gráficos para .ico para você. ie. http://tools.dynamicdrive.com/favicon/

Jim
fonte
4
Além disso: você pode salvar seu arquivo favicon em qualquer lugar se adicionar um <link rel="shortcut icon" href="link/to/fav.ico" />ao <head>bloco de suas páginas.
Már Örlygsson
1
tools.dynamicdrive.com/favicon também permitirá que você mescle vários tamanhos em um favico, o que é ótimo
hdorio
3

Se você deseja criar arquivos .ico, também pode usar o GIMP para criar favicons. Os navegadores modernos podem usar arquivos de imagem normais, mas originalmente acho que eram apenas arquivos .ico. É um editor de imagens de código aberto semelhante ao Photoshop. Crie e edite uma imagem do tamanho certo (digamos, 32 x 32), achatar em uma camada (a menos que você queira vários ícones no mesmo arquivo) e salve como um .ico. Ele vai formatar corretamente, então usar o Stefano's <link rel="SHORTCUT ICON" HREF="/favicon.ico">para usar em sua página.

rocketmonkeys
fonte
3

Eu uso o programa Paint.net de código aberto junto com o plugin do ícone .

Você pode então criar e salvar uma imagem no formato .ico com todos os tamanhos diferentes incorporados ao arquivo .ico.

Matthew Lock
fonte
Hmm, paint.net.amihotornot.com.au como o host para o plugin do ícone? Isso é legítimo?
RonaldB de
@RonaldB sim, é a casa desse plugin. Domínio estranho, não é
Matthew Lock,
2

Ao criar um favicon, você deve levar em consideração os seguintes fatores:

  • Plataformas com suporte Há dez anos, você só queria oferecer suporte a navegadores de desktop e a solução era gerar a favicon.icoimagem clássica . Hoje em dia, você deseja oferecer suporte a iOS (e iOS Safari) e Android (e Android Chrome). Talvez o Windows 10 (e o Edge) e o novo Mac Book Pro Touch Bar também (macOS Safari). Você não pode mais usar uma única imagem "tamanho único".
  • Design Assim que você oferece suporte a várias plataformas, você se depara com várias diretrizes de design. Por exemplo, o Google está usando ícones transparentes para seus próprios aplicativos nativos no Android, enquanto os ícones do iOS não podem ser transparentes de forma alguma. Você não pode simplesmente usar uma abordagem de "design único para todos".
  • Ícones gerados e código HTML Há dois ou três anos, a referência tem sido gerar o máximo de ícones possível para cobrir todos os casos. Acho que criei essa tendência sozinha: - / O problema é que você acaba com 20 e poucos linhas ou HTML, o que é demais. Para ter uma solução técnica satisfatória, você precisa equilibrar a quantidade de ícones / HTML gerados e as plataformas suportadas.

Como de costume, você pode criar todos esses ativos manualmente. A menos que você tenha necessidades muito específicas e um orçamento, este definitivamente não é o caminho a percorrer.

A maneira certa para a maioria das pessoas é usar um gerador de favicon que permite decidir a aparência de todos os ícones e cuidar de todos os detalhes. O único que faz isso é o Real Favicon Generator . Divulgação completa: eu sou o autor deste site.

philippe_b
fonte
1

E se você estiver usando asp.net, tente esta maneira de aplicar favicon à sua 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" />

mas você pode encontrar mais informações aqui: http://doctype.com/

Tarik
fonte
1
Como observação, doctype.com encerrou em 15 de fevereiro de 2013. Leia mais sobre ele .
Krease de
1

Eu faço meus favicons 16 x 16 ou 32 x 32 usando o Photoshop. Eu o salvo como gif e uso o IrfanView para converter o gif em um ico.

Max
fonte