Como, Design

Como criar um favicon: dicas, truques e os serviços do Logaster

A estrutura:

1. Criando um favicon usando o Adobe Photoshop
2. Como criar um favicon usando o GIMP – GNU Image Manipulation Program
3. Principais vantagens do arquivo .ICO em relação ao .PNG e .GIF
4. Como transformar .PNG em .ICO usando conversores online especiais
5. Como instalar um favicon no WordPress?

Um favicon é um pequeno ícone ou um emblema, que é usado para identificar visualmente o seu site nos Favoritos. Além disso, um favicon é sempre mostrado perto do endereço ou do nome do site, sempre que você usa o navegador. Na maioria dos casos, o favicon é um quadrado de 16 por 16 pixels que contém uma imagem salva em um formato favicon.ico. Neste artigo, vamos falar sobre a ‘base’ necessária para iniciar todo o processo. Vamos mostrar-lhe como criar um favicon para seu site usando diferentes editores gráficos, bem como, compartilhar o principal método para adicionar o favicon ao site.

O que precisamos para começar?

1. Primeiro de tudo, é necessário ter o logo com a resolução de pelo menos 512 por 512 pixels (tem que ser quadrado).
2. O logo deve estar no formato .PNG
3. Adobe Photoshop ou o editor gráfico GIMP.

Criando um favicon com o Adobe Photoshop

Veja como fazer um favicon com um fundo transparente:

1. Abra o logo no formato PNG com o fundo transparente clicando em “Arquivo” – “Abrir” e escolhendo a imagem salva em seu computador.

Open the file

2. Exclua o nome da empresa do logo para deixar apenas o ícone usando a ferramenta “Borracha” e alterando a cor principal para branco.

3. Para alterar o tamanho do logotipo para 16 por 16 pixels clique em “Imagem” – “Tamanho” da imagem.

Decrease the size

4. Escolha o tamanho de 16 por 16 pixels. Seu favicon vai ficar muito pequeno, mas você não precisa se preocupar porque tudo está de acordo com o plano.

5. Salve a imagem clicando em “Arquivo” – “Salvar Como” e escolha o formato PNG.

Se você estiver satisfeito com o seu logo no favicon, vá para a 4ª etapa deste manual.

Veja como fazer um favicon usando uma de suas cores corporativas:

1. Da mesma forma como na primeira opção, precisamos abrir um arquivo PNG. A principal diferença é o fato de que ele terá uma cor corporativa em segundo plano, e não transparente.

Open the file

2. Remova o texto, deixando apenas o ícone: use a ferramenta Conta-gotas para escolher a cor do fundo; clique e a cor na paleta será a mesma que a do plano de fundo. Agora, use a ferramenta “Pincel” e remova o nome da empresa do logotipo.

3. Altere o tamanho da imagem clicando em “Imagem” – “Alterar” tamanho e escolha o tamanho de 16 por 16 pixels. Se a imagem parecer proporcional e atraente, salve no formato .PNG e passe para a 4ª etapa deste manual.

Como criar um favicon usando o GIMP – GNU Image Manipulation Program

O GIMP é um programa de edição de gráficos que permite aos usuários trabalhar com vários tipos de imagens vetoriais. A principal vantagem deste software é o fato de que é possível criar um favicon no formato .ICO sem a necessidade de usar vários conversores de imagem, como no caso do Adobe Photoshop..

1. Abra o arquivo no editor clicando em “Arquivo” – “Abrir” e escolha uma das imagens salvas no seu PC.

create favicon with GIMP

2. Agora, é preciso remover qualquer frase que tenha em seu logo para deixar apenas o ícone: clique na paleta de cores e escolha o código da cor do fundo corporativo. Se você não souber o código, use a ferramenta Conta-gotas, passe o cursor sobre a cor de fundo e clique com o botão esquerdo. A cor será selecionada automaticamente. Agora, use a ferramenta “Pincel” para remover todas as letras do favicon.

3. Diminua o tamanho do logo para as dimensões padrão do favicon, ou seja, 16 por 16 pixels usando o seguinte comando: “Imagem” – “Alterar” tamanho da imagem.

4. Exporte o logotipo em “Arquivo” – “Exportar como

Export favicon

5. Escolha o formato de exportação, por exemplo, o ícone do Microsoft Windows com a extensão .ICO. Em seguida, clique no botão “Exportar”.

Choose the export format

Tudo está pronto agora! Agora você pode usar o favicon no seu site!

Principais vantagens do arquivo .ICO em relação ao .PNG e .GIF

1. Compatibilidade: todos os navegadores, incluindo o IE 5.0, suportam o formato .ICO.
2. Não há chance de receber o Erro 404 do servidor: todos os navegadores modernos (testado com o Chrome 4, Firefox 3.5, IE8, Opera 10 e Safari 4) sempre solicitarão o arquivo favicon.ico, portanto, é altamente recomendável ter um em seu site.
3. O arquivo no formato .ICO pode conter vários ícones e não é necessário criar mais de um arquivo para ter um ícone no tamanho 16 por 16 e outro no 48 por 48 pixels.

Como transformar .PNG em .ICO usando conversores online especiais

Para transformar o formato .PNG no formato .ICO, pode-se usar vários conversores online. Aqui nós optamos pelo site online-convert.com, mas você está livre para usar qualquer outra opção que seja adequada para você, já que todas funcionam de maneira semelhante. Então, vamos começar:

1. Acesse o site e use a barra lateral esquerda para escolher “Image converter” – “Convert to ICO”.

Open the website

2. Escolha o arquivo no seu computador clicando em “Choose files…” ou arrastando e soltando os arquivos no campo correspondente. Em seguida, clique em “Start conversion”.

Choose the files on your computer

3. Clique no botão “Download” para baixar o favicon no formato .ICO para o seu computador. Pode-se também enviar o arquivo para o armazenamento em nuvem ou baixá-lo diretamente no formato ZIP.

download a favicon

Como instalar um favicon no WordPress?

Você pode carregar seu favicon (favicon.ico) para a pasta principal (raiz) do site.
A pasta raiz é o diretório principal do site. Ela contém todos os arquivos chave do WP, incluindo ‘index.php’ e outras pastas como “wp-admin”, “wp-content” e “wp-includes”. É obrigatório salvar o arquivo “favicon.ico” na mesma pasta que o “index.php”.

1. Abra o painel administrativo do WordPress.

WordPress Dashboard2. Vá para a seção “Aparência”.

“Appearance” section.

3. Abra o “Editar Tema”.

Open "Theme editor"

4. Escolha o arquivo chamado “Header” ou “Header.php” para editá-lo.

choose header

5. Encontre a linha do código que começa com <link rel=»shortcut icon» e terminar com /favicon.ico «/>. Será preciso alterar ou adicionar o seguinte código logo abaixo da tag HTML <head>. Em nosso exemplo, usamos o arquivo “favicon.ico”. Você é livre para escolher qualquer outro nome.

Aqui está o código: <link rel=»shortcut icon» href=»<?php echo get_stylesheet_directory_uri();?>/favicon.ico»/>

6. Salve as alterações.

Conclusão:

Durante o processo de desenvolvimento do site, é preciso garantir que até mesmo os detalhes menos importantes, como o favicon, sejam levados em consideração. É muito fácil adicionar o favicon ao site. No entanto, este pequeno elemento mostra a sua abordagem abrangente ao design e sua atenção aos usuários. Você tem alguma dúvida ou quer compartilhar sua experiência em termos de criação de favicon? Deixe um comentário abaixo!

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...


Sobre Shpitula Natalia

Nenhuma informação sobre o autor.

Deixar uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *