Favicon design é mais importante do que você poderia pensar,. O tamanho realmente importa aqui como um logotipo bem projetado precisa ser reconhecível em qualquer tamanho que é visto em. Ele precisa escalar de telas massivas até um ícone que pode ser tão pequeno quanto 16 x 16 pixels, conhecido como um favicon. Um grande exemplo de design favicon é o logotipo do Google. Funciona perfeitamente para telas maiores com o seu grande ‘G’ e texto distintivo de quatro cores., E ainda é reconhecível quando encolhido para o minúsculo ” G ” de quatro cores visto numa barra de endereços de navegadores da web.
O favicon também pode ser visto como um ícone de atalho, um ícone de tabulação ou um ícone de favorito, então ele precisa olhar a parte. Para ver os projetos favicon que funcionam, veja o nosso roundup de inspiração de design de logotipo e confira esta impressionante coleção de ícones app iOS que obtê-lo exatamente certo.
neste artigo, vamos percorrer o processo de como desenhar o favicon perfeito., Vamos incluir dicas específicas para a criação de um favicon para dispositivos Apple, Android, Chrome, Opera e Safari. Além disso, um guia prático para os diferentes tamanhos e formatos de favicon que você precisa saber. Use as ligações rápidas (à direita) para saltar directamente para a secção que deseja.
- à procura de um tipo diferente de ícone? Veja nosso guia para os melhores conjuntos de ícones livres
nos primeiros dias da web, um favicon era simplesmente um arquivo de ícone 16x16px, mas hoje em dia é um pouco mais complicado., Existem diferentes tamanhos e processos de favicon para diferentes contextos. Criar um favicon adequado é uma ciência.
assim, vamos começar com algumas dicas de topo para o que o seu favicon deve parecer, e depois passar para conselhos específicos sobre como criar um favicon para diferentes contextos. Vamos usar o modelo disponível na Apply Pixels para gerar facilmente os diferentes tamanhos de favicon necessários, e o favicon da Apply Pixels como exemplo.,
regras de design de Favicon
torne reconhecível
a primeira coisa a considerar ao desenhar um favicon é o que precisa ser representado na tela. Lembre-se que o seu favicon só é exibido ao usuário quando eles já estão em seu site ou tê-lo marcado como favoritos. Então não há necessidade de tentar atrair o usuário com o seu favicon.
Use o seu logótipo
considere os favicons como sinais sóbrios que ajudam os utilizadores a reconhecer o seu sítio Web quando navegam nas suas listas de favoritos e nos seus registos pessoais., Portanto, você quer usar o seu logotipo, ou qualquer símbolo mais facilmente permite que o usuário reconhecer o seu site. Se você não tem um logomark que se encaixa na tela quadrática, use a parte mais reconhecível do seu logotipo.
mantenha claro
há também algumas coisas que você deve evitar. Não use o favicon como uma ferramenta de marketing – isso significa que não há etiquetas de preço, banners ‘novos’ ou ‘atualizados’ e assim por diante. Na verdade, você não quer colocar texto dentro do favicon. O texto não tem grande escala, e as hipóteses são de que seja ilegível de qualquer maneira., Finalmente, não use uma foto – ela será lamacenta e irreconhecível no tamanho que vai aparecer.
Criar duas versões
Quando favicons foram introduzidas pela primeira vez no Internet Explorer 5, que apareceu na barra de endereços e na lista de favoritos. Hoje, favicons são exibidos em muitos outros contextos, incluindo listas de favoritos, menus de atalho e até mesmo homescreens móveis e de TV., Isso torna difícil prever como seu favicon será exibido para o usuário final.
Para garantir que seu favicon parece ser bom em muitos contextos diferentes, ele vai aparecer, idealmente, você deve fornecer dois favicon estilos:
Logo em plano de fundo transparente
Esta versão é mostrado na barra de endereços, favoritos, listas e outros lugares onde o favicon aparece junto a URL do seu website ou nome.,
Logo no preenchimento sólido
esta versão é usada em favoritos e menus de atalhos Tipo Grelha, onde o navegador ou dispositivo mascara o fundo, para obter uma aparência uniforme no contexto.
Favicon size cheatsheet
como mencionado anteriormente, diferentes contextos requerem favicons de tamanho diferente. Abaixo você pode ver um guia rápido para os diferentes formatos e dimensões que você vai precisar fornecer para cobrir todos os principais casos de uso.
anteriormente, os favicons tinham de ser fornecidos no formato ICO., Hoje é OK para fornecer os arquivos em formato PNG (exceto para o ícone Safari Pin Tab que deve ser fornecido como SVG).
Se quiser uma forma fácil de desenhar e exportar todos os tamanhos de favicon, dê uma vista de olhos no modelo favicon em Apply Pixels.
Agora vamos dar uma olhada mais de perto as necessidades específicas de diferentes casos de uso.,
navegador de Ecrã favicons
Como criar um navegador de ecrã favicon
vamos começar com o favicon mais simples que terá de criar: um favicon clássico para os navegadores de ecrã clássicos. Este tipo de favicon funciona melhor em fundos transparentes, como muitas vezes irá aparecer na barra de URL e nas listas de favoritos.,
Você precisará fornecer este tipo de favicon em três tamanhos, todas em formato PNG com fundo transparente.,
- 16×16
- 32×32
- 48×48
Apple
como criar Favoritos do toque da maçã
Apple iOS usa ícones do toque da maçã para representar sítios web que foram guardados no ecrã principal da iOS como favoritos. Isto significa que o ícone do toque da maçã será arredondado para a máscara de squircle de ícones da aplicação iOS.
ele também será exibido em qualquer fundo que o usuário tenha escolhido para a sua homescreen. Com isso em mente, Seu ícone de toque de maçã deve ter um estilo de fundo de preenchimento sólido.,
Apple favicons deve ser fornecido num formato PNG. Você pode se livrar de fornecer um ícone de toque de maçã 180×180 que irá escalar automaticamente para os vários tamanhos de iPhone e iPad. Isto vai funcionar bem na maioria dos casos.,
Se não, você pode fornecer outros tamanhos para diferentes dispositivos da Apple:
- 60×60
- 76×76
- 120×120
- 152×152
- 180×180
o Android, Google Chrome e o Opera
Como criar um favicon para o Android, Chrome e Opera
o Android, Chrome e Opera usar o android-chrome-192×192.png e android-chrome-512×512.png que o Google recomenda.,
desde a introdução de ícones adaptativos no Android, os sites adicionados ao homescreen Android irá mascarar o projeto 192×192, então o ícone toma forma após o estilo de mascaramento preferido do Usuário. Pode ser uma forma de squircle, ellipsis, retângulo, retângulo arredondado ou lágrima.
Você precisa criar um PNG favicon com o plano de fundo sólido, em 192×192 e 512×512.,
implemente estes favicons adicionando um manifesto.JSON file to your site and linking to it within the tags:
<link rel="manifest" href="/manifest.json">Aqui está o código para o manifesto.json arquivo:
Safari
Como criar um favicon para o Safari é fixado guia
Este é o fora um estranho, e ele é o único favicon que precisa ser fornecidos em formato vetorial como um arquivo SVG. Ele mostra como o ícone da miniatura quando um usuário Pina uma página para a janela do navegador Safari.,
Este favicon precisa ser 100% preto ficheiro SVG com um plano de fundo transparente. O SVG pode ser apenas uma camada, e safari requer que o atributo viewBox do SVG seja definido como “0 0 16 16”.
<link rel="mask-icon" href="your_icon.svg">outros tipos de favicon
Existem algumas dimensões e formatos de favicon que não foram incluídos neste artigo, por exemplo., Google TV,Chrome Web Store e ícones pré-iOS 7 Apple Touch. Por quê? Porque eles foram depreciados ou porque eles raramente são relevantes para o desenvolvedor médio da web.
em geral, desenvolvedores e designers devem se esforçar para suportar a maior variedade possível de dispositivos e sistemas operacionais, mas às vezes isso simplesmente não faz sentido. Mas, se você quiser ver uma lista mais completa de imagens favicon, certifique-se de dar uma olhada neste favicon cheat sheet no GitHub.,
- O top design tendências para 2020
- 15 fontes profissionais para designers
- 27 melhores conjuntos de livre ícones
