Qual é o ponto de favicons?

Quando começo a falar às pessoas sobre a importância de um favicon para sua estratégia geral de branding on-line, elas costumam dizer a mesma coisa: "Você não está levando essa ideia de branding um pouco longe demais?"

Minha resposta costuma ser: "Não, se você está falando sério sobre seus próprios esforços de branding!"

É verdade, os favicons são coisas muito pequenas, provavelmente o bit menos importante de um site, mas é a atenção ao detalhe que faz um site se destacar; e mesmo que pareça louco, os favicons são muito importantes do ponto de vista da marca.

Considerando que o WDD é um site orientado para um público de designers, meu palpite é que muitos de vocês já sabem o que são favicons e como criá-los; mas este artigo ainda pode ajudá-lo a entender por que você deve fazê-lo e também serve como uma boa página de recursos.

Estou compartilhando uma lista grande com os recursos relacionados a favicon abaixo, portanto, considere marcar esta página para referência futura. Ah, e se você fizer isso, observe o favicon WDD diretamente na sua lista de favoritos;)

Apenas no caso de você não ser um designer, ou qualquer tipo de faixa-preta nas artes-favicon, este artigo aborda provavelmente tudo o que você precisa saber sobre esses pequenos quadrados esquivos de 16 × 16 pixels, e até algumas favicuriosities interessantes também . Então aproveite!

O que é um favicon?

Favicons são imagens quadradas pequenas, geralmente de 16 × 16 pixels, usadas pelos navegadores da Web para mostrar uma representação gráfica do site visitado no lado esquerdo da barra de endereços do navegador. Você provavelmente já viu muitos favicons antes, mesmo que você não saiba o que eles são. Se houver alguma dúvida, a imagem abaixo ajudará.

Dois exemplos de favicons em um navegador com guias do Google Chrome.

Se você estiver interessado em entender um pedaço da história da internet, aqui está um fato interessante:

A palavra favicon é um portamentau feito das palavras “favorito” e “ícone”, e foi nomeado como tal porque foi suportado pela primeira vez pelo Internet Explorer 5 da Microsoft e apenas no caso de você não usar o IE, este recurso de bookmarking do navegador é chamado de favoritos.

Qual é o propósito de um favicon?

Nos primórdios da Internet, ferramentas como o Google Analytics eram meros sonhos na mente de alguns nerds da Web, por isso, por mais estranho que isso possa parecer, naquela época, os favicons eram usados como uma forma de estimar o tráfego do website contando o número de visitantes que marcaram a página. (Esse é outro trecho interessante na história da internet!)

Mas fatos interessantes à parte, a principal razão para ter favicons hoje em dia é melhorar a experiência do usuário. Os favicons são usados em todos os navegadores modernos na barra de endereços, na barra de links, na área de favoritos e nas suas guias de navegação. Além disso, alguns navegadores também exibem ícones de favoritos sempre que você cria um link de atalho para o site correspondente em sua área de trabalho e em seu dispositivo móvel.

Certamente, a principal razão para ter um favicon é a melhoria óbvia na experiência do usuário. Um site sem um mostrará um símbolo de navegador genérico em todos os pontos de interação que mencionei acima, e se você se importa com sua experiência de usuário, deve se preocupar com favicons.

Mas eu não posso evitar ver as coisas através da lente da marca, minha área de especialização, então acho que os favicons são ainda mais relevantes do ponto de vista da marca. Mais uma vez, com tantos pontos de interação, não usá-los para aumentar a notoriedade da marca é um crime. A verdade é que encontrar maneiras criativas de melhorar sua marca on-line é sempre uma tarefa desafiadora, e ter um favicon é uma maneira fácil e simples de realizar isso. Então pegue um amigo meu!

Como criar um favicon?

Criando um site favicon é fácil como torta. De fato, você nem precisa ser um designer para fazer isso. Certamente ajuda se você estiver, pois você pode colocar suas habilidades para trabalhar e criar algo que realmente se destaca, mas até mesmo o menos conhecedor da tecnologia pode fazê-lo em cerca de 5 minutos ou menos, usando as ferramentas certas.

Os sites na lista abaixo permitem que você crie um favicon simplesmente fazendo o upload de uma imagem pré-existente. Então, se você quiser criar um favicon para sua marca, tudo o que você precisa fazer é enviar seu logotipo para um dos seguintes sites e baixar o arquivo favicon. Fácil demais.

Aqui está a lista de geradores de Favicon que você está procurando:

Os sites acima variam muito em termos do arquivo resultante que você recebe; especialmente em termos de tamanho e extensão de arquivo. Se você deseja obter o arquivo mais compatível possível, recomendo fazer o download de uma imagem de tamanho 16 × 16 pixels com o formato “ico”.

Se você precisar de alguma inspiração, tente conferir as galerias de favicon abaixo:

Como usar seu favicon?

Depois de ter seu favicon cuidadosamente projetado, instalá-lo em seu servidor não deve demorar mais do que alguns minutos em duas etapas fáceis. Para isso, você precisará acessar a pasta raiz do seu site e uma ferramenta de edição de texto para alterar o código HTML do seu site.

Passo 1

Você precisará fazer o upload do arquivo “favicon.ico” para o seu servidor. Para fazer isso, aponte a barra de endereço do seu navegador para o seu servidor FTP; seu URL deve ser semelhante a este:

ftp://[email protected]

Pressione enter e o navegador solicitará um nome de usuário e senha antes de conceder acesso ao servidor de arquivos. Quando estiver, basta carregar o arquivo “favicon.ico” na pasta raiz e pronto.

Passo 2

Agora você precisará editar a página HTML do seu website para ajudar os navegadores a encontrar sua imagem favicon. Mantenha sua janela FTP aberta, encontre e baixe o arquivo “index.html” ou “header.php” do seu servidor e siga os passos abaixo de acordo com o arquivo que você obtiver:

Se o seu site for HTML simples, insira o código abaixo na área HEAD do arquivo “index.html” e não se esqueça de alterar “yoursite.com” para o endereço do seu próprio site.

Se você usa o WordPress, insira o código abaixo na área HEAD do seu arquivo “header.php”.

Com isso feito, envie o arquivo de volta para onde você o tirou. Você está feito!

Na verdade, os navegadores mais modernos são espertos o suficiente para encontrar seu arquivo favicon mesmo sem qualquer pedaço de código, mas somente enquanto a imagem do favicon tem 16 × 16 pixels, ele foi nomeado como “favicon.ico” e é salvo na pasta raiz da pasta do seu site.

Como criar um favicon no Photoshop

Com tantas ferramentas disponíveis para ajudá-lo a criar seu favicon, por que você gostaria de tomar o caminho mais difícil e criá-lo no Photoshop? Bem, se você é um designer e quer tirar o melhor proveito do seu favicon, certamente essa é a maneira profissional de fazê-lo. O truque é que o Photoshop não suporta nativamente arquivos “ico”, então você precisa baixar este plugin da Telegraphics .

Certifique-se de instalá-lo antes de seguir o tutorial abaixo. O Photoshop não funcionará sem ele.

Procure a opção "ICO" na caixa "Salvar como" do Photoshop para confirmar se o plug-in está instalado.

Crie um novo documento no Photoshop selecionando o item de menu "Arquivo" e a seguinte opção "Novo" e defina sua tela em 64 × 64 pixels. Por quê? Uma vez que o tamanho final do favicon de 16 × 16 é tão pequeno, ter uma tela maior para trabalhar ajudará você a fazer seu suco criativo fluir. Em seguida, cole seu logotipo no documento e libere seu poder mágico criativo de unicórnio.

Assim que estiver pronto, basta selecionar o menu “Image” e a seguinte opção “Image Size” e reduzir a imagem para 16 × 16 pixels. Lembre-se de clicar em "Resample Image" e escolha "Bicubic Sharper", para garantir que a imagem não seja borrada quando redimensionada. Se você não gosta do resultado final, simplesmente desfaça suas alterações mais recentes com “AltCtrl / AltCmd + Z” e continue trabalhando no design até ficar satisfeito com ele.

Para finalizar o seu favicon basta clicar no menu “File” e na opção “Save As”, lembre-se de nomear seu arquivo como “favicon.ico”. Mais uma vez, trabalho feito!

Conclusão

Os favicons são uma daquelas pequenas coisas às quais normalmente não prestamos muita atenção, mas a verdade é que, longe de serem insignificantes, são uma parte muito importante da Web, tanto da perspectiva da interface do usuário quanto do ponto de vista da marca. de visão.

Alguns dizem que grandes coisas vêm em tamanhos pequenos, e acho que se aplica também a favicons, porque qualquer web designer e / ou especialista em branding que sempre reservam um tempo para adicionar um favicon aos sites de seus clientes, mesmo quando o cliente não tem idéia do que é um favicon, demonstra um grande profissionalismo e atenção aos detalhes; o tipo de qualidade que todo cliente aprecia.

Você cria favicons para seus clientes? Eles são muito problemáticos por pouca recompensa? Deixe-nos saber seus pensamentos nos comentários.

Imagem em destaque / miniatura, imagem confusa via Shutterstock

Designer de Web marca como favicon dicas e truques