Quando você está tendo problemas com o computador, uma das primeiras soluções é reiniciar o aparelho no modo de segurança. Com o modo ativado, o Windows é iniciado em um estado básico, usando um conjunto limitado de arquivos e drivers.
A maneira mais conhecida de entrar no modo de segurança é iniciando o PC e pressionando F8. Porém, no Windows 10 isso não funciona. Veja o que fazer:
Primeira opção:
Segunda opção:
\o/ Uhulll 7.078 Alunos em 63 países na plataforma EAD Maykon Silveira
7.078 Alunos em 63 países na plataforma EAD Maykon Silveira
Venha você também para a plataforma EAD maykonsilveira.com.br
#MaykonSilveira
#BoraAprender
cor é uma das mais importantes decisões no design de um site. Dado que uma pessoa julga rapidamente um site, a sua paleta de cores deve ser um dos fatores que fará com que seu público queira permanecer nele. Claro, existem muitos outros fatores de sucesso envolvidos no design de um site, mas a cor é certamente um dos mais poderosos.
Use essas paletas para te ajudar a decidir qual tipo de vibe, humor ou estética geral você gostaria de comunicar com seus designs. Esses sites foram escolhidos baseados na seleção do Awwward`s website of the day. Vamos analisar portfólios, lançamentos de produtos e páginas simplesmente lindas da web para você se inspirar.
*Por favor, note que os códigos de cores correspondem às cores usadas nos sites. As cores apresentadas nas paletas podem estar ligeiramente desativadas devido às imagens salvas na internet.
#18181a, #e5b622, #bf3e43, #bec2c1
2. Hypergiant
#0c1f38, #e65401, #fef200, #a7e0d7
3. Ono Meals
#ff623f, #14521d, #d2c520, #dcd4d2
#0a1a34, #015f9d, #dec5c8, #e9e9e9
#252529, #ac4186, #f6a9b8, #01b1af
#193e51, #146666, #6b6b87, #c3bd2e
7. Momkai
#270425, #e36662, #f57923, #d5d5d5
8. Mutt
#871628, #cd0021, #003a74, #f8cba9
#f35166, #ff634d, #2c1d44, #f0ff42
10. EVS Wishes 2018
#060024, #370043, #e671ad, #4ac2ed
11. 10×17
#2d2d13, #fa4a32, #ffc70e, #4b4be1
12. Monopo
#151219, #60323d, #323858, #346369
13. Duroc
#334188, #7799d9, #fc7478, #e7d952
14. Fotonaut Events
#5252d4, #8b8be2, #eb1636, #242130
15. MING Labs
#fe2739, #f6505e, #e98c94, #e7e3e0
16. Bolden
#1a1907, #f41d08, #1cd3e3, #ffffff
#41485a, #3d5267, #97a9bd, #c86466
#010b14, #082640, #825b56, #84b99b
19. Garden Estúdio
#382d3b, #d84361, #c6ce9d, #eedeab
20. Ondo
#063640, #5e9e47, #112a52, #f29c9f
Não sabe como aplicá-las? Talvez nossa capa sobre dicas de design gráfico para não designers te ajude a começar. Volte para o básico da teoria das cores para aplicar seu conhecimento.
Os esquemas de cores podem ajudar na legibilidade, beleza e coesão da sua página. O que as cores traduzem? Que tipo de combinação vai enviar a mensagem certa sem palavras? Por fim, o que você espera alcançar com suas cores escolhidas? Todas essas questões são muito importantes na fase inicial de tomada de decisão e de brainstorming. Esperamos que nosso artigo tenha ajudado você a ver como até mesmo os menores detalhes resultam em mensagens intencionais no design de site.
O WordPress é a plataforma mais utilizada no Brasil e no mundo, e traz diversos benefícios para seus usuários. Por isso, também é comum ser alvo de ataque de hackers. Estudos mostram que 90% dos sites hackeados em 2018 eram WordPress.
Isso significa que o CMS é inseguro e ninguém deveria utilizá-lo? Certamente não, mas mostra a importância de ficar atento e se prevenir.
Aprender a atualizar o WordPress corretamente ajuda a manter seu site mais seguro e com um bom desempenho. As atualizações servem para corrigir possíveis falhas, introduzir novas funcionalidades e melhorar o desempenho da plataforma.
Se você ainda não sabe fazer esse processo e quer entender como atualizar o WordPress com segurança, esse artigo é para você!
Separamos um passo a passo para fazer tanto a atualização automática quanto a manual, assim como medidas para evitar problemas no futuro.
Algumas pessoas criam seus sites, colocam conteúdo e simplesmente esquecem da parte técnica. Assim, passam-se os meses, o WordPress lança novas versões e o site fica desatualizado. Isso é um erro grave que prejudica a sua página na internet.
Escolheu utilizar o WordPress para seu site? Então você precisa aproveitar todas as suas ferramentas, inclusive novas atualizações.
Confira os principais motivos para aprender a atualizar o WordPress e fazer isso com frequência!
Quem utiliza o WordPress para gerenciar o conteúdo do seu site escolheu uma plataforma de código aberto. Isso significa que ele é gratuito e pode ser usado em qualquer projeto comercial ou pessoal, seguindo as leis da licença GPL (General Public License).
Ser código aberto não significa que qualquer desenvolvedor terá acesso ao seu site e poderá fazer modificações. E sim, que ele terá acesso ao código original desenvolvido pelo time do WordPress, onde ele pode ser modificado, atualizado e disponibilizado para a comunidade.
Ou seja, desenvolvedores de todo o mundo têm a possibilidade de sugerir melhorias na plataforma.
Com isso, o WordPress lança atualizações de segurança rotineiramente para impedir que os sites que o utilizam fiquem vulneráveis. Algumas novas versões são lançadas somente para consertar problemas de segurança da plataforma.
Quem deixa de entender como atualizar o WordPress corre risco de ser hackeado ou ter informações vazadas. Se você lida com informações sensíveis de clientes ou tem um e-commerce, essas atualizações devem ser uma prioridade.
Por acaso você já teve pequenos problemas no WordPress que impediram seu site de ficar perfeito? Os bugs são comuns em qualquer plataforma, mas os desenvolvedores trabalham constantemente para consertá-los.
Cada vez que uma atualização é lançada ela passa por processos de teste rigorosos para identificar e corrigir bugs. Mas alguns deles ainda passam e afetam o funcionamento da atualização. Mesmo que seu site não seja diretamente afetado por esses pequenos problemas, é interessante corrigi-los.
As novas versões do WordPress surgem para melhorar problemas que existiam nas anteriores. Vale muito a pena utilizá-las.
Todo desenvolvedor ou dono de site já sabe que a velocidade do site influencia na experiência do usuário. Ninguém gosta de esperar muitos segundos para que uma página carregue e o WordPress pode ser um dos culpados pela demora.
Conforme a tecnologia avança, o WordPress também tenta acompanhar com soluções para problemas de velocidade. Suas atualizações estão cada vez mais otimizadas para proporcionar a melhor experiência ao usuário e diminuir o tempo de carregamento do site. É possível otimizar a performance usando suas atualizações.
Uma dica: quanto mais tempo você demorar para atualizar, menor será o desempenho do seu site. Se estiver curioso e quiser saber mais sobre a velocidade, pode conferir algumas ferramentas de teste.
Além de solucionar vulnerabilidades no sistema, bugs e dificuldades de velocidade, suas atualizações também trazem novas funcionalidades.
Em atualizações anteriores, criadores de conteúdo conseguiram inserir vídeos nos posts com maior facilidade, encontraram uma nova biblioteca de plugins e muito mais. A intenção é tornar a tarefa de gerenciar um site sempre mais fácil e intuitiva.
Além disso, outro exemplo de nova funcionalidade é o novo editor do WordPress, o Gutenberg. Ele foi criado com o objetivo de facilitar a vida de quem não entende nada de HTML, trazendo o conceito de blocos arrasta-e-solta.
Essas alterações são úteis tanto para o usuário quanto para você. Então não existem mais desculpas para deixar de atualizar o WordPress.
O WordPress disponibiliza atualizações automáticas desde sua versão 3.7. Elas facilitam a vida do usuário por serem rápidas e simples de fazer. É possível dividi-las em alguns tipos, que são atualizações:
No momento da instalação do WordPress existe a opção para deixar as atualizações automáticas ativadas. Essa é uma forma de garantir melhor performance para seu site e permitir que, mesmo quem não possui conhecimentos avançados da plataforma, consiga atualizar.
Se você não habilitou a opção durante a instalação, você precisará abrir o arquivo wp-config.php na pasta raiz e adicionar uma linha de código. Se está em dúvida sobre como fazer isso, ensinaremos como acessar a pasta usando o FileZilla mais abaixo. Você deverá adicionar as seguintes linhas para ativar atualizações automáticas:
Abaixo você vai entender o passo a passo de como atualizar o WordPress de forma automática. Confira!
Para ter acesso aos arquivos de atualização automática do WordPress, você precisa fazer login como administrador. Acesso o site dominio.com.br/wp-admin (exemplo: hostgator.com.br/wp-admin) e entre com o nome de usuário e senha que você definiu na instalação da plataforma.
Quando existe uma atualização automática pendente no WordPress geralmente aparece um aviso ainda na primeira página do painel.
Essa é a forma mais simples de encontrar as atualizações. Basta clicar no aviso para ser direcionado à página correta. Caso você faça o login no painel do administrador e não encontrar essa mensagem, ainda existe outra forma.
Clique na opção atualizações, no menu do lado esquerdo da tela, para ver todas as disponíveis para o site WordPress.
Agora você verá uma mensagem com o número da atualização do WordPress disponível para seu site. Basta clicar em atualizar agora para iniciar o processo. Como você consegue ver, entender como atualizar o WordPress de forma automática é bem simples.
Ao clicar na opção “Atualizar agora”, o WordPress iniciará o download de todos os arquivos de atualização e sua instalação. Você pode acompanhar o andamento do processo na mesma página, como é possível ver abaixo.
Ao final do processo você será direcionado para uma página de boas-vindas da nova versão do WordPress. Ela possui explicações completas sobre o que mudou com a atualização, bugs corrigidos, soluções de segurança e outras alterações.
Também é possível aprender a atualizar o WordPress utilizando um programa de FTP (File Transfer Protocol). Esses sistemas realizam a conexão entre um computador pessoal e um servidor para transferência de arquivos.
Existem diversos softwares que te ajudam a trabalhar com FTP. Confira uma lista deles antes de começar a entender como atualizar o WordPress manualmente:
É simples aprender como atualizar o WordPress sem usar a ferramenta automática oferecida pela plataforma. Para conseguir os resultados mostrados nesse artigo, você precisará de um software de FTP. Os prints mostrados são do FileZilla, que você consegue baixar gratuitamente.
Além disso, procure na sua hospedagem as seguintes informações:
Se estiver em dúvida sobre onde encontrar as informações entre em contato com o suporte do seu serviço de hospedagem. Com tudo isso em mão você está pronto para aprender como atualizar o WordPress.
Acesse o site do WordPress para fazer o download da sua versão mais recente.
Para conseguir abrir o arquivo de download que está no seu computador será necessário usar um programa para extraí-lo. Recomendamos o Winrar ou Winzip para essa tarefa.
Depois de extrair os arquivos você deve ter uma pasta chamada WordPress no destino selecionada. Ela possui pastas para wp-admin, wp-content, wp-includes e outros arquivos individuais.
Para realizar essa etapa você já deve ter o software FTP instalado. Use as informações obtidas com o servidor de hospedagem para acessar o software e o diretório raiz do WordPress. Se não conseguiu realizar o download do programa, acesse o site do FileZilla e selecione a opção “client”.
Dentro do FileZilla, preencha as informações do servidor nos quadros da parte superior. Você precisará do host, nome de usuário, senha e porta. Depois clique no botão “conexão rápida”.
Agora você está somente a um passo de finalizar a atualização do seu site WordPress.
Antes de fazer upload das pastas da versão mais recente do WordPress para o FileZilla, você precisa excluir algumas pastas. Selecione os arquivos wp-admin e wp-includes que estão atualmente no servidor. Depois clique com o botão direito do mouse e selecione “deletar”.
Atenção! Não mexa na pasta wp-content. É nela que estão todos os conteúdos do seu site, assim como plugins e informações de temas. Se você apagá-las por engano perderá todas as informações. Por isso é importante também ter um backup do seu site antes de começar, como você verá mais à frente neste artigo.
Deletou as duas pastas indicadas? Agora precisa fazer upload das novas versões que você já baixou. Selecione a pasta WordPress no lugar que está salva no seu computador usando o painel esquerdo.
Clique com o botão direito do mouse e selecione a opção “upload”. Já com as duas pastas novas no servidor, é possível começar a substituir o restante dos arquivos. Não será necessário deletá-los dessa vez.
Selecione todos os arquivos individuais na pasta “WordPress” e clique com o botão direito do mouse. Quando surgirem as opções clique em “upload”. Caso surja uma caixa de confirmação clique em “sobrescrever” e continue o processo. Agora é só acessar o painel de controle do site (dominio.com.br/wp-admin) e conferir se tudo está funcionando corretamente.
Boa parte dos plugins do WordPress também recebem atualizações regulares. Elas corrigem bugs e melhoram as funcionalidades. Por isso, é essencial ficar atento para o momento de atualizá-los, ajudando seu site a manter sempre o melhor desempenho. Não basta somente aprender como atualizar o WordPress e deixar os plugins de lado.
A primeira forma de fazer isso é acessando o painel de controle do administrador do seu site (dominio.com.br/wp-admin). Depois de fazer login, clique na opção “atualizações” no menu à esquerda. O número ao lado do “atualizações” indica a quantidade de plugins que precisam do processo.
Já na próxima página selecione os plugins da lista que deseja atualizar e depois a opção “atualizar plugins”. No caso do exemplo usamos a caixa “selecionar todos” para conseguir atualizar todos ao mesmo tempo. No entanto, você pode selecionar somente um ou poucos.
A próxima página te mostrará quais plugins já foram atualizados e permite acompanhar o andamento da operação. Aguarde até que todos estejam terminados.
Provavelmente você já ouviu histórias de alguém que depois de atualizar o WordPress fez todo o processo e perdeu seus plugins. Em outros casos usuários acabam sem conseguir acessar o site ou com problemas no tema.
Essas situações são mais comuns dos que gostaríamos. Afinal de contas, um site WordPress utiliza temas e plugins produzidos por terceiros. Eles também precisam de atualizações de seus desenvolvedores para acompanhar as atualizações do WordPress.
Em alguns casos os plugins ou temas deixam de ser compatíveis com a nova versão. Isso pode gerar pequenos problemas, como ficar incapaz de usar formulários ou otimizar imagens. Mas também pode tirar seu site do ar ou deixá-lo impossível de navegar.
Isso significa que você deveria deixar de entender como atualizar o WordPress? Claro que não! As atualizações são importantíssimas e garantem que seu site funcione com segurança.
Como dono de um site WordPress você deve tomar algumas atitudes preventivas antes de fazer a atualização. Explicaremos abaixo as principais delas.
Quando você realiza uma atualização do WordPress e tem algum problema, é possível restaurar a versão anterior. No entanto, para conseguir isso você precisa ter um backup dessa versão.
Recomenda-se realizar backups rotineiramente para evitar perder arquivos importantes do seu site. O backup é, inclusive, uma proteção no caso de invasão ou problemas com o servidor.
O WordPress possui diversos plugins para fazer seu backup. Você também pode fazer isso manualmente usando um software de FTP, como o FileZilla, que apresentamos nesse artigo.
Mesmo que os backups sejam feitos automaticamente usando plugins, salve uma versão no seu dispositivo. Se algum problema grave acontecer e mesmo o plugin utilizado não resolver, você ainda pode substituir as pastas do WordPress pelas que estão salvas.
Baixou plugins e não sabe se eles recebem atualizações para continuarem compatíveis com o WordPress? Isso significa que existe o risco de ter problemas mais tarde. Antes de instalar qualquer atualização confira se eles permanecerão compatíveis. O mesmo vale para os temas.
Na realidade, o ideal é conferir se o plugin ou tema recebe atualizações regulares antes mesmo de baixá-lo ou comprá-lo. Também veja se a fonte do plugin é confiável e se não existem reclamações na sua página em relação à falta de compatibilidade com novas versões do WordPress.
Mesmo tomando todas as precauções possíveis, alguns errinhos ainda podem afetar seu site depois da atualização. Por exemplo, é possível não conseguir acessar o site ou perder plugins. Veja quais são os principais e como corrigir.
Você resolveu atualizar os plugins conforme as instruções desse artigo, mas a atualização nunca acaba? Isso é comum, especialmente quando o site utiliza uma hospedagem com capacidade abaixo da sua necessidade.
Realizar atualizações exige o uso de recursos do servidor de hospedagem. Se você já está utilizando uma hospedagem inadequada para seu site, esses recursos se esgotam e impedem a finalização do processo.
Mas muitas vezes não é um erro, a página simplesmente não conseguiu atualizar. Para confirmar, abra uma nova aba e vá até seus plugins. Confira o número da versão e compare com o número da atualização. As chances de que tudo atualizou normalmente são altas. Se esse for o caso, pode fechar a primeira aba e continuar usando seu site normalmente.
Caso você ainda esteja com a versão antiga espere alguns minutos e atualize a página. Depois faça a atualização novamente.
Enquanto um site baixa atualizações do WordPress usuários que entrarem na página receberão uma mensagem avisando que ele está em manutenção. O WordPress faz isso adicionando um arquivo chamado .maintenance em seus arquivos. Na maioria dos casos ele é excluído automaticamente quando tudo termina, mas em raras exceções ele falha.
Acesse o software de FTP e localize o arquivo .maintenance que ainda está na pasta. Basta deletá-lo para que seu site volte a funcionar normalmente.
Qualquer outro problema que surja durante a atualização pode ser corrigido usando os backups do site. Basta substituir os novos arquivos no servidor pelos antigos que você guardou no seu dispositivo, mas lembre que o backup possui as versões desatualizadas.
E aí, gostou do conteúdo? Se inscreva em meu canal:
https://www.youtube.com/c/MAYKONSILVEIRA
Aprenda criar sites do zero e fácil:
https://maykonsilveira.com.br/cursos-online/criando-sites-para-empresas-so-arrastando-e-soltando
Se você ainda não sabe, Favicons são aqueles pequenos ícones que ficam ao lado da barra de endereços de um navegador e servem, entre outras funções, para identificar rapidamente um site. Os Favicons são um velhos conhecidos dos designers e desenvolvedores. Já são 14 anos de história. E neste meio tempo muita coisa evoluiu. Surgiram smartphones, tablets, televisores, sistemas operacionais modernos, telas de alta resolução e o favicon foi mudando de tamanho, posição e formato, conquistando um espaço muito além da barra de ferramentas do navegador. Neste artigo vamos conhecer mais profundamente esta parte tão importante, mas muitas vezes tão negligenciada, do webdesign.
A função de um favicon não é apenas ser, como o nome nos leva a deduzir, um símbolo relacionado aos favoritos. Favicons são parte integrante do branding.
O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5. Naqueles idos tempos de 1999 os simpáticos ícones de 16 pixels tinham outras funções como estimar o número de usuários que favoritavam um site com base em requisições do ícone no servidor. Este método deixou de ter utilidade quando os browsers passaram a exibir favicons também na barra de tarefas, independente do site estar salvo nos favoritos ou não. Mas o nome – uma junção dos termos favorite e icons – ficou.
Ícones podem ter diversos propósitos como representar uma determinada ação, superar barreiras de linguagem, sinalização e/ou transmitir uma mensagem. Você não precisa conhecer a língua local em uma estação de trem de outro país para saber onde é a saída. A figura de um homem passando por uma porta acompanhada de uma seta é suficiente para comunicar esta informação. Da mesma forma, portas de banheiro são demarcadas com silhuetas masculinas ou femininas para você não errar na hora do aperto. Estas representações imagéticas acabam rapidamente se tornando convenções sociais. Não é necessário pensar muito para saber qual botão toca ou pausa um aparelho de som ou vídeo…
A função de um favicon não é apenas ser, como o nome nos leva a deduzir, um símbolo relacionado aos favoritos. Favicons são parte integrante do branding. Eles servem para representar um website como uma entidade dentro de um browser.
Criar um ícone é uma atividade multidisciplinar. Semiótica, gestalt, branding e cultura pop são alguns dos assuntos importantes para se ter em mente na hora de projetar ícones. Pesquisa e bom senso também são fundamentais, afinal, um mesmo símbolo pode ter dezenas de significados diferentes de acordo com idade, sexo, nacionalidade, profissão, religião e cultura do público alvo. Além, é claro, do conhecimento técnico necessário para garantir uniformidade, visibilidade, nitidez e identificação de uma imagem em tamanhos reduzidos. Este artigo não tem a pretensão de ensinar design de ícones, mas sim fornecer informações relevantes para utilizar de maneira mais inteligente os recursos disponíveis em diferentes browsers, sistemas operacionais e aparelhos para fazer da iconografia uma ferramenta de divulgação uma marca.
O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5.
Se você precisa de algumas dicas sobre o por que e como criar um ícone vale a pena ler o livro The Icon Handbook por Jon Hicks.
Existem diversas opções de ferramentas digitais para a criação de ícones. Desde plugins para Photoshop até alguns softwares exclusivos para este fim. O importante é ter o cuidado de repensar o design com mais ou menos detalhes de acordo com o tamanho do ícone ao invés de simplesmente redimensionar o arquivo. Até mesmo reduções proporcionais podem gerar um resultado distorcido e com baixa nitidez. Como em qualquer outro trabalho, quanto mais tempo e carinho você dedicar para criar o seu ícone melhor será o resultado final. Faça o que fizer, passe longe dos conversores automáticos online! O resultado é tão desastroso quanto um layout WYSIWYG em tabela com gifs animados de gatos tocando teclado.
Este tipo de arquivo ainda é o mais utilizado devido ao grande suporte por parte dos navegadores e pela opção de conter diversas imagens encapsuladas. Ou seja, em um mesmo arquivo é possível atender diversas funções e resoluções de tela. (E não. Você não vai conseguir isto simplesmente renomeando um .gif ou .png. É necessário buscar um software próprio)/ Mas é necessário cuidado para que o arquivo final não fique muito pesado. Alguns desenvolvedores recomendam um tamanho máximo de 20K.
Os browsers modernos – leia-se todo mundo menos o Internet Explorer – já suportam outras extenções como PNG, por exemplo. As vantagens do PNG é a qualidade maior da imagem, tamanho reduzido e a conveniência na fase de criação. É bem provável que você já tenha no seu computador algum software capaz de salvar ou exportar arquivos para este formato. Mas como não é possível incluir diversas resoluções em um único arquivo é necessário declarar manualmente cada uma das resoluções.
Existe a possibilidade de uso para alguns outros formatos além de ICO e PNG, mas ainda não existem vantagens consistentes para a adoção de nenhum. JPG, por exemplo, não é adequado devido a pixelização das imagens e a falta de um canal de transparência. O GIF tem uma qualidade inferior e ainda não encontrei quem é o cidadão que acha uma boa ideia utilizar APNG (uma espécie de PNG animado).
Como em qualquer outro trabalho, quanto mais tempo e carinho você dedicar para criar o seu ícone melhor será o resultado final.
Uma opção promissora é o SVG. Como o SVG é um arquivo vetor não teriamos que nos preocupar com os diversos tamanhos. Mas até agora só Opera e o Google Chrome suportam. Então, como grande parte das novidades interessantes, teremos que esperar os outros browsers para começar a brincar…
Se você tem curiosidade em saber qual navegador aceita o que a partir de qual versão, esta é a tabela de compatibilidade segundo a Wikipedia.
| Browser | ICO | PNG | GIF | animated GIFs | JPEG | APNG | SVG |
| Firefox | 1.0+ | 1.0+ | 1.0+ | Sim | Sim | 3.0+ | – |
| Chrome | Sim | Sim | 4.0+ | 4.0+ | 4.0+ | – | Sim |
| IE | 5.0+ | – | – | – | – | – | – |
| Opera | 7.0+ | 7.0+ | 7.0+ | 7.0+ | 7.0+ | 9.5+ | 9.6+ |
| Safari | Sim | 4.0+ | 4.0+ | – | 4.0+ | – | – |
Se quer um conselho amigo passe longe de favicons animados. Além de bregas eles distraem o usuário e passam a impressão que você é carente por atenção.
A melhor pedida é utilizar PNG com um fallback em ICO para o Internet Explorer.
Aqui começa a confusão. Os favicons clássicos tinham 16px quadrados. Mas hoje grande parte dos browsers utilizam uma versão de 32px. Esta é a versão padrão para a barra de ferramentas do Internet Explorer 10, pro exemplo. Ícones para home screen de dispositivos móveis são outro pepino… Só o iOS vai ter 4 tamanhos diferentes de acordo com o aparelho e resolução de tela. Ainda existem outras coisas para se considerar como tiles do Windows 8 e quadradinhos do Opera Speed Dial e até mesmo Google TV. Segue uma listinha básica de tamanhos:
– 16px: Barra de endereço, abas e favoritos da maior parte dos navegadores.
– 24px: Barra de ferramentas do Internet Explorer 9
– 32px: Nova aba no IE, site fixo na barra de tarefas do Windos 7 e sidebar do Safari – 57px: iPhone sem tela retina e iPod Touch
– 72px: iPad sem tela retina
– 96px: GoogleTV
– 114px: iPhone com tela retina
– 128px: Chrome Web Store
– 144px: iPad Retina, Windows 8 Tiles
– 256x160px: Opera Speed Dial
Parece muita coisa, mas raramente você vai precisar utilizar todos estes tamanhos. Isto vai variar de acordo com as necessidades do público alvo de cada projeto, que incluem navegador, aparelho e sistema operacional mais utilizados. Minha recomendação é incluir ao menos o clássico de 16px, uma versão HD de 32px e os touch icons para iOS. Segundo estatísticas da Microsoft um site fixado na barra de tarefas do Windows 7 recebia uma porcentagem de visita de 15% a 50% maior… Segundo esta lógica criar um tile para o Windows 8 também é uma boa prática, já que as opções de interação se estendem além do navegador.
Esta é simples. Basta deixar um arquivo de nome favicon.ico na pasta raíz do servidor. Certo?
Sim e não. Isto funcionaria bem para apenas um arquivo… Mas se você deseja trabalhar com múltiplos tamanhos e formatos vai ser necessário declarar no HTML. Vamos supor que temos um arquivo favicon.png dentro de uma pasta chamada IMG.
Antigamente você provavelmente faria isto da seguinte maneira:
<link rel="icon" type="image/png" href="img/favicon.png" />
<link rel="icon" href="demo_icon.gif" type="image/gif" sizes="16x16">
Como somos bacanas e utilizamos HTML5 as coisas ficam mais simples:
<link rel="icon" href="img/favicon.png" />
Okay. Isto funciona para a maior parte dos browsers inteligentes. Falta o fallback para o IE…
Aviso mega Importante! Não cometa o erro de declarar o png E o ico sem comentários condicionais. Sério. Isto da problemas. Cada navegador possui a sua lógica. Uns vão ler o primeiro que você declarar, outros o último, alguns escolhem aleatoriamente… Sério! Caos!
Poderíamos fazer o fallback através de comentários condicionais:
<!--[if IE]><link rel="shortcut icon" href="img/favicon.ico"><![endif]-->
<link rel="icon" href="img/favicon.png">
Poderíamos… mas para a Microsoft não basta atrapalhar a vida dos desenvolvedores com os problemas dos navegadores antigos. Ela gosta de criar novos problemas! O IE10 não suporta comentários condicionais. É isto mesmo. A salvação mágica para aquelas longas noites insones desenvolvendo não funciona mais. Pode esquecer. Ah, e não sei se você deu uma espiadinha na tabela lá em cima, mas também não suportam PNG. Legal, né? Bem, são estas pequenas coisas que fazem a vida de um desenvolvedor web preocupado com acessibilidade e experiência do usuário um pouco como resolver quebra cabeças… Uma solução possível seria declarar apenas o arquivo em PNG e manter o ICO na raíz.
<link rel="icon" href="img/favicon.png" />
Se você desejar incluir diversos tamanhos, basta declarar cada um deles.
<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">
No caso de dispositivos que utilizam o sistema iOS (iPhone, iPod e iPad) existe a opção de fixar qualquer site como um favorito diretamente na tela de inicio, independente da existência de uma versão mobile ou design responsivo. Por padrão uma thumbnail é gerada automaticamente a partir de uma screenshot da página, mas o resultado é não apenas visualmente confuso como nada prático do ponto de vista da rápida identificação em meio a tantos outros ícones… Muitas vezes o usuário pode até resolver desafixar o seu site dali por que deixou a tela “feia”. Criar uma imagem exclusiva, chamada apple touch icon, é portanto uma boa prática de usabilidade.
Para isto basta criar 4 imagem quadradas com os cantos retos em formato png nos tamanhos 57px, 72px, 114px e 144px. [## Favicons
Se você ainda não sabe, Favicons são aqueles pequenos ícones que ficam ao lado da barra de endereços de um navegador e servem, entre outras funções, para identificar rapidamente um site. Os Favicons são um velhos conhecidos dos designers e desenvolvedores. Já são 14 anos de história. E neste meio tempo muita coisa evoluiu. Surgiram smartphones, tablets, televisores, sistemas operacionais modernos, telas de alta resolução e o favicon foi mudando de tamanho, posição e formato, conquistando um espaço muito além da barra de ferramentas do navegador. Neste artigo vamos conhecer mais profundamente esta parte tão importante, mas muitas vezes tão negligenciada, do webdesign.
A função de um favicon não é apenas ser, como o nome nos leva a deduzir, um símbolo relacionado aos favoritos. Favicons são parte integrante do branding.
O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5. Naqueles idos tempos de 1999 os simpáticos ícones de 16 pixels tinham outras funções como estimar o número de usuários que favoritavam um site com base em requisições do ícone no servidor. Este método deixou de ter utilidade quando os browsers passaram a exibir favicons também na barra de tarefas, independente do site estar salvo nos favoritos ou não. Mas o nome – uma junção dos termos favorite e icons – ficou.
Ícones podem ter diversos propósitos como representar uma determinada ação, superar barreiras de linguagem, sinalização e/ou transmitir uma mensagem. Você não precisa conhecer a língua local em uma estação de trem de outro país para saber onde é a saída. A figura de um homem passando por uma porta acompanhada de uma seta é suficiente para comunicar esta informação. Da mesma forma, portas de banheiro são demarcadas com silhuetas masculinas ou femininas para você não errar na hora do aperto. Estas representações imagéticas acabam rapidamente se tornando convenções sociais. Não é necessário pensar muito para saber qual botão toca ou pausa um aparelho de som ou vídeo…
A função de um favicon não é apenas ser, como o nome nos leva a deduzir, um símbolo relacionado aos favoritos. Favicons são parte integrante do branding. Eles servem para representar um website como uma entidade dentro de um browser.
Criar um ícone é uma atividade multidisciplinar. Semiótica, gestalt, branding e cultura pop são alguns dos assuntos importantes para se ter em mente na hora de projetar ícones. Pesquisa e bom senso também são fundamentais, afinal, um mesmo símbolo pode ter dezenas de significados diferentes de acordo com idade, sexo, nacionalidade, profissão, religião e cultura do público alvo. Além, é claro, do conhecimento técnico necessário para garantir uniformidade, visibilidade, nitidez e identificação de uma imagem em tamanhos reduzidos. Este artigo não tem a pretensão de ensinar design de ícones, mas sim fornecer informações relevantes para utilizar de maneira mais inteligente os recursos disponíveis em diferentes browsers, sistemas operacionais e aparelhos para fazer da iconografia uma ferramenta de divulgação uma marca.
O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5.
Se você precisa de algumas dicas sobre o por que e como criar um ícone vale a pena ler o livro The Icon Handbook por Jon Hicks.
Existem diversas opções de ferramentas digitais para a criação de ícones. Desde plugins para Photoshop até alguns softwares exclusivos para este fim. O importante é ter o cuidado de repensar o design com mais ou menos detalhes de acordo com o tamanho do ícone ao invés de simplesmente redimensionar o arquivo. Até mesmo reduções proporcionais podem gerar um resultado distorcido e com baixa nitidez. Como em qualquer outro trabalho, quanto mais tempo e carinho você dedicar para criar o seu ícone melhor será o resultado final. Faça o que fizer, passe longe dos conversores automáticos online! O resultado é tão desastroso quanto um layout WYSIWYG em tabela com gifs animados de gatos tocando teclado.
Este tipo de arquivo ainda é o mais utilizado devido ao grande suporte por parte dos navegadores e pela opção de conter diversas imagens encapsuladas. Ou seja, em um mesmo arquivo é possível atender diversas funções e resoluções de tela. (E não. Você não vai conseguir isto simplesmente renomeando um .gif ou .png. É necessário buscar um software próprio)/ Mas é necessário cuidado para que o arquivo final não fique muito pesado. Alguns desenvolvedores recomendam um tamanho máximo de 20K.
Os browsers modernos – leia-se todo mundo menos o Internet Explorer – já suportam outras extenções como PNG, por exemplo. As vantagens do PNG é a qualidade maior da imagem, tamanho reduzido e a conveniência na fase de criação. É bem provável que você já tenha no seu computador algum software capaz de salvar ou exportar arquivos para este formato. Mas como não é possível incluir diversas resoluções em um único arquivo é necessário declarar manualmente cada uma das resoluções.
Existe a possibilidade de uso para alguns outros formatos além de ICO e PNG, mas ainda não existem vantagens consistentes para a adoção de nenhum. JPG, por exemplo, não é adequado devido a pixelização das imagens e a falta de um canal de transparência. O GIF tem uma qualidade inferior e ainda não encontrei quem é o cidadão que acha uma boa ideia utilizar APNG (uma espécie de PNG animado).
Como em qualquer outro trabalho, quanto mais tempo e carinho você dedicar para criar o seu ícone melhor será o resultado final.
Uma opção promissora é o SVG. Como o SVG é um arquivo vetor não teriamos que nos preocupar com os diversos tamanhos. Mas até agora só Opera e o Google Chrome suportam. Então, como grande parte das novidades interessantes, teremos que esperar os outros browsers para começar a brincar…
Se você tem curiosidade em saber qual navegador aceita o que a partir de qual versão, esta é a tabela de compatibilidade segundo a Wikipedia.
| Browser | ICO | PNG | GIF | animated GIFs | JPEG | APNG | SVG |
| Firefox | 1.0+ | 1.0+ | 1.0+ | Sim | Sim | 3.0+ | – |
| Chrome | Sim | Sim | 4.0+ | 4.0+ | 4.0+ | – | Sim |
| IE | 5.0+ | – | – | – | – | – | – |
| Opera | 7.0+ | 7.0+ | 7.0+ | 7.0+ | 7.0+ | 9.5+ | 9.6+ |
| Safari | Sim | 4.0+ | 4.0+ | – | 4.0+ | – | – |
Se quer um conselho amigo passe longe de favicons animados. Além de bregas eles distraem o usuário e passam a impressão que você é carente por atenção.
A melhor pedida é utilizar PNG com um fallback em ICO para o Internet Explorer.
Aqui começa a confusão. Os favicons clássicos tinham 16px quadrados. Mas hoje grande parte dos browsers utilizam uma versão de 32px. Esta é a versão padrão para a barra de ferramentas do Internet Explorer 10, pro exemplo. Ícones para home screen de dispositivos móveis são outro pepino… Só o iOS vai ter 4 tamanhos diferentes de acordo com o aparelho e resolução de tela. Ainda existem outras coisas para se considerar como tiles do Windows 8 e quadradinhos do Opera Speed Dial e até mesmo Google TV. Segue uma listinha básica de tamanhos:
– 16px: Barra de endereço, abas e favoritos da maior parte dos navegadores.
– 24px: Barra de ferramentas do Internet Explorer 9
– 32px: Nova aba no IE, site fixo na barra de tarefas do Windos 7 e sidebar do Safari – 57px: iPhone sem tela retina e iPod Touch
– 72px: iPad sem tela retina
– 96px: GoogleTV
– 114px: iPhone com tela retina
– 128px: Chrome Web Store
– 144px: iPad Retina, Windows 8 Tiles
– 256x160px: Opera Speed Dial
Parece muita coisa, mas raramente você vai precisar utilizar todos estes tamanhos. Isto vai variar de acordo com as necessidades do público alvo de cada projeto, que incluem navegador, aparelho e sistema operacional mais utilizados. Minha recomendação é incluir ao menos o clássico de 16px, uma versão HD de 32px e os touch icons para iOS. Segundo estatísticas da Microsoft um site fixado na barra de tarefas do Windows 7 recebia uma porcentagem de visita de 15% a 50% maior… Segundo esta lógica criar um tile para o Windows 8 também é uma boa prática, já que as opções de interação se estendem além do navegador.
Esta é simples. Basta deixar um arquivo de nome favicon.ico na pasta raíz do servidor. Certo?
Sim e não. Isto funcionaria bem para apenas um arquivo… Mas se você deseja trabalhar com múltiplos tamanhos e formatos vai ser necessário declarar no HTML. Vamos supor que temos um arquivo favicon.png dentro de uma pasta chamada IMG.
Antigamente você provavelmente faria isto da seguinte maneira:
<link rel="icon" type="image/png" href="img/favicon.png" />
Como somos bacanas e utilizamos HTML5 as coisas ficam mais simples:
<link rel="icon" href="img/favicon.png" />
Okay. Isto funciona para a maior parte dos browsers inteligentes. Falta o fallback para o IE…
Aviso mega Importante! Não cometa o erro de declarar o png E o ico sem comentários condicionais. Sério. Isto da problemas. Cada navegador possui a sua lógica. Uns vão ler o primeiro que você declarar, outros o último, alguns escolhem aleatoriamente… Sério! Caos!
Poderíamos fazer o fallback através de comentários condicionais:
<!--[if IE]><link rel="shortcut icon" href="img/favicon.ico"><![endif]-->
<link rel="icon" href="img/favicon.png">
Poderíamos… mas para a Microsoft não basta atrapalhar a vida dos desenvolvedores com os problemas dos navegadores antigos. Ela gosta de criar novos problemas! O IE10 não suporta comentários condicionais. É isto mesmo. A salvação mágica para aquelas longas noites insones desenvolvendo não funciona mais. Pode esquecer. Ah, e não sei se você deu uma espiadinha na tabela lá em cima, mas também não suportam PNG. Legal, né? Bem, são estas pequenas coisas que fazem a vida de um desenvolvedor web preocupado com acessibilidade e experiência do usuário um pouco como resolver quebra cabeças… Uma solução possível seria declarar apenas o arquivo em PNG e manter o ICO na raíz.
<link rel="icon" href="img/favicon.png" />
Se você desejar incluir diversos tamanhos, basta declarar cada um deles.
<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">
No caso de dispositivos que utilizam o sistema iOS (iPhone, iPod e iPad) existe a opção de fixar qualquer site como um favorito diretamente na tela de inicio, independente da existência de uma versão mobile ou design responsivo. Por padrão uma thumbnail é gerada automaticamente a partir de uma screenshot da página, mas o resultado é não apenas visualmente confuso como nada prático do ponto de vista da rápida identificação em meio a tantos outros ícones… Muitas vezes o usuário pode até resolver desafixar o seu site dali por que deixou a tela “feia”. Criar uma imagem exclusiva, chamada apple touch icon, é portanto uma boa prática de usabilidade.
Para isto basta criar 4 imagem quadradas com os cantos retos em formato png nos tamanhos 57px, 72px, 114px e 144px.]3 quebra um galho nesta hora.
Depois é só nomear os arquivos com o prefixo “apple-touch-icon” e colocar na raíz do diretório. A vantagem disto é que você economiza algumas linhas de código, mas em alguns casos como em um tema para tumblr, por exemplo, não temos acesso a pasta raiz. Nestas horas é importante declarar o caminho no HTML. Outra vantagem em apontar o caminho do ícone no código é a acessibilidade. Não importa se o seu usuário é fanboy da Apple ou não. Quando devidamente apontados, os touch icons também são utilizados pelo Android (a partir da versão 2.2) e em alguns outros aplicativos como o Reeder para iPad.
Bem, prepare seus icones e cole isto aqui entre as tags head do seu HTML e seja feliz:
<!-- iPad com Retina Display -->
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<!-- iPhone com Retina Display -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<!-- Primeira e segunda geração de iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<!-- Versões antigas de iPhone, iPod Touch e Android 2.2+ -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Você pode notar que estou declarando as imagens da maior para a menor. Esta é uma boa prática que garante que versões mais antigas do iOS baixem o arquivo de menor tamanho, já que o atributo sizes só foi implantado a partir do iOS 4. Nas versões anteriores por padrão o sistema escolhe a última imagem determinada. Ou seja, é uma questão de progressive enhancement, pois não faz sentido o usuário baixar uma imagem mais pesada em uma tela de resolução mais baixa.
Por padrão o iOS adiciona alguns efeitinhos como cantos arredondados, drop shadow e reflexo. Como nada grita mais web 2.0 do que gelzinhos bregas se você não quiser o reflexo basta utilizar o sufixo “precomposed” no nome do seu arquivo.
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Se você for preguiçoso e só tiver tempo para criar um ícone faça o de 144px que ele será redimensionado automaticamente. Só tenha em mente que a imagem pode perder a qualidade e você estará forçando o usuário a gastar mais banda do que necessário…
Com a implantação do iOS7 ocorreram algumas modificações no formato Apple Touch Icon. A primeira é com relação ao layout: a Apple retirou os efeitos de gel e transparência a lá web 2.0 (já foi tarde!), portanto não existem mais as versões “pre-composed”. Mas a mudança mais significativa ocorreu no tamanho: todos os ícones para iOS7 estão 5% maiores.
Seguem os três novos tamanhos:
iPhone / iPod touch retina – 120px
iPad 2 / iPad mini – 76px
iPad retina – 152px
Como o iOS7 não é compatível com versões do iPhone pré-retina (iPhone 3GS e anterior) não existe um novo formato para ele. Portanto, é recomendável incluir ainda uma versão de 57px para estes aparelhos mais antigos que não tem a possibilidade de atualizar.
As meta-tags ficariam assim:
<!-- iPad iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<!-- iPhone iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<!-- iPad iOS7+ sem retina display e iPad Mini-->
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<!-- iPhone iOS7-, iPod Touch e Android 2.2+ -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Se você for um fanático e quiser garantir a absoluta compatibilidade com todos os aparelhos vai precisar incluir todas as versões antigas de ícones. O código neste caso seria:
<!-- iPad iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<!-- iPad iOS7- com Retina Display -->
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<!-- iPhone iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<!-- iPhone iOS7- com Retina Display -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<!-- iPad iOS7+ sem retina display e iPad Mini-->
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<!-- iPad iOS7- sem retina display -->
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<!-- iPhone iOS7-, iPod Touch e Android 2.2+ -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Se um usuário gostou o suficiente do seu site para querer guarda-lo entre os seus favoritos um ícone deve ser um convite implicito para que ele possa voltar a visita-lo novamente. Se este convite é grande, colorido e uma presença constante na área de trabalho a probabilidade dele retornar é maior ainda, certo?
É o que acontece no Windows 8. Aqueles blocos coloridos de aplicativos da interface Metro, chamados Tiles também podem ser utilizados para salvar favoritos.
O padrão do Windows 8 é utilizar um favicon ou o ícone do próprio Internet Explorer quando um site é fixado como favoritos na tela inicial. Não é preciso ser um gênio do design para deduzir que se aproveitarmos melhor a área disponível – 144px quadrados – o resultado seria muito mais bacana.
Para criar uma image tile para o seu site basta utilizar um PNG quadrado de 144px por 144 pixels. O recomendável é utilizar um fundo de arquivo transparente, já que o Windows escolhe automaticamente a cor do fundo com base no tom dominante do seu ícone. É possível ainda escolher a cor do fundo do tile no próprio código HTML através de valores hexadecimais ou rgb. Depois é só apontar o caminho da imagem da seguinte forma:
<meta name="msapplication-TileImage" content="img/tile.png"/>
<meta name="msapplication-TileColor" content="#FF0000"/>
Esta imagem só é baixada no momento que o usuário fixa o site como favorito, então não existe nenhum custo de banda adicional.
Existem ainda mais alguns opções avançadas de uso. É possível, por exemplo, criar um arquivo XML que atualiza periodicamente este tile com informações do site. É ótimo para mostrar os últimos posts de um blog, novas promoções de uma loja ou número de mensagens não lidas de uma rede social, por exemplo. Isto significa que o usuário receberá notificações de atualização sem ao menos precisar entrar no site. É possível retornar um valor numérico entre 1 e 99 e ainda mostrar alguns símbolos específicos chamados de glyph badges. A lista de símbolos disponívels inclui um ícones de mensagem, alerta, atenção, erro, etc. Este tutorial ensina como criar o XML
É possível – na verdade desde o Windows 7 – ainda criar uma [## Favicons
Se você ainda não sabe, Favicons são aqueles pequenos ícones que ficam ao lado da barra de endereços de um navegador e servem, entre outras funções, para identificar rapidamente um site. Os Favicons são um velhos conhecidos dos designers e desenvolvedores. Já são 14 anos de história. E neste meio tempo muita coisa evoluiu. Surgiram smartphones, tablets, televisores, sistemas operacionais modernos, telas de alta resolução e o favicon foi mudando de tamanho, posição e formato, conquistando um espaço muito além da barra de ferramentas do navegador. Neste artigo vamos conhecer mais profundamente esta parte tão importante, mas muitas vezes tão negligenciada, do webdesign.
A função de um favicon não é apenas ser, como o nome nos leva a deduzir, um símbolo relacionado aos favoritos. Favicons são parte integrante do branding.
O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5. Naqueles idos tempos de 1999 os simpáticos ícones de 16 pixels tinham outras funções como estimar o número de usuários que favoritavam um site com base em requisições do ícone no servidor. Este método deixou de ter utilidade quando os browsers passaram a exibir favicons também na barra de tarefas, independente do site estar salvo nos favoritos ou não. Mas o nome – uma junção dos termos favorite e icons – ficou.
Ícones podem ter diversos propósitos como representar uma determinada ação, superar barreiras de linguagem, sinalização e/ou transmitir uma mensagem. Você não precisa conhecer a língua local em uma estação de trem de outro país para saber onde é a saída. A figura de um homem passando por uma porta acompanhada de uma seta é suficiente para comunicar esta informação. Da mesma forma, portas de banheiro são demarcadas com silhuetas masculinas ou femininas para você não errar na hora do aperto. Estas representações imagéticas acabam rapidamente se tornando convenções sociais. Não é necessário pensar muito para saber qual botão toca ou pausa um aparelho de som ou vídeo…
A função de um favicon não é apenas
er, como o nome nos leva a deduzir, um símbolo relacionado aos favoritos. Favicons são parte integrante do branding. Eles servem para representar um website como uma entidade dentro de um browser.
Criar um ícone é uma atividade multidisciplinar. Semiótica, gestalt, branding e cultura pop são alguns dos assuntos importantes para se ter em mente na hora de projetar ícones. Pesquisa e bom senso também são fundamentais, afinal, um mesmo símbolo pode ter dezenas de significados diferentes de acordo com idade, sexo, nacionalidade, profissão, religião e cultura do público alvo. Além, é claro, do conhecimento técnico necessário para garantir uniformidade, visibilidade, nitidez e identificação de uma imagem em tamanhos reduzidos. Este artigo não tem a pretensão de ensinar design de ícones, mas sim fornecer informações relevantes para utilizar de maneira mais inteligente os recursos disponíveis em diferentes browsers, sistemas operacionais e aparelhos para fazer da iconografia uma ferramenta de divulgação uma marca.
O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5.
Se você precisa de algumas dicas sobre o por que e como criar um ícone vale a pena ler o livro The Icon Handbook por Jon Hicks.
Existem diversas opções de ferramentas digitais para a criação de ícones. Desde plugins para Photoshop até alguns softwares exclusivos para este fim. O importante é ter o cuidado de repensar o design com mais ou menos detalhes de acordo com o tamanho do ícone ao invés de simplesmente redimensionar o arquivo. Até mesmo reduções proporcionais podem gerar um resultado distorcido e com baixa nitidez. Como em qualquer outro trabalho, quanto mais tempo e carinho você dedicar para criar o seu ícone melhor será o resultado final. Faça o que fizer, passe longe dos conversores automáticos online! O resultado é tão desastroso quanto um layout WYSIWYG em tabela com gifs animados de gatos tocando teclado.
Este tipo de arquivo ainda é o mais utilizado devido ao grande suporte por parte dos navegadores e pela opção de conter diversas imagens encapsuladas. Ou seja, em um mesmo arquivo é possível atender diversas funções e resoluções de tela. (E não. Você não vai conseguir isto simplesmente renomeando um .gif ou .png. É necessário buscar um software próprio)/ Mas é necessário cuidado para que o arquivo final não fique muito pesado. Alguns desenvolvedores recomendam um tamanho máximo de 20K.
Os browsers modernos – leia-se todo mundo menos o Internet Explorer – já suportam outras extenções como PNG, por exemplo. As vantagens do PNG é a qualidade maior da imagem, tamanho reduzido e a conveniência na fase de criação. É bem provável que você já tenha no seu computador algum software capaz de salvar ou exportar arquivos para este formato. Mas como não é possível incluir diversas resoluções em um único arquivo é necessário declarar manualmente cada uma das resoluções.
Existe a possibilidade de uso para alguns outros formatos além de ICO e PNG, mas ainda não existem vantagens consistentes para a adoção de nenhum. JPG, por exemplo, não é adequado devido a pixelização das imagens e a falta de um canal de transparência. O GIF tem uma qualidade inferior e ainda não encontrei quem é o cidadão que acha uma boa ideia utilizar APNG (uma espécie de PNG animado).
Como em qualquer outro trabalho, quanto mais tempo e carinho você dedicar para criar o seu ícone melhor será o resultado final.
Uma opção promissora é o SVG. Como o SVG é um arquivo vetor não teriamos que nos preocupar com os diversos tamanhos. Mas até agora só Opera e o Google Chrome suportam. Então, como grande parte das novidades interessantes, teremos que esperar os outros browsers para começar a brincar…
Se você tem curiosidade em saber qual navegador aceita o que a partir de qual versão, esta é a tabela de compatibilidade segundo a Wikipedia.
| Browser | ICO | PNG | GIF | animated GIFs | JPEG | APNG | SVG |
| Firefox | 1.0+ | 1.0+ | 1.0+ | Sim | Sim | 3.0+ | – |
| Chrome | Sim | Sim | 4.0+ | 4.0+ | 4.0+ | – | Sim |
| IE | 5.0+ | – | – | – | – | – | – |
| Opera | 7.0+ | 7.0+ | 7.0+ | 7.0+ | 7.0+ | 9.5+ | 9.6+ |
| Safari | Sim | 4.0+ | 4.0+ | – | 4.0+ | – | – |
Se quer um conselho amigo passe longe de favicons animados. Além de bregas eles distraem o usuário e passam a impressão que você é carente por atenção.
A melhor pedida é utilizar PNG com um fallback em ICO para o Internet Explorer.
Aqui começa a confusão. Os favicons clássicos tinham 16px quadrados. Mas hoje grande parte dos browsers utilizam uma versão de 32px. Esta é a versão padrão para a barra de ferramentas do Internet Explorer 10, pro exemplo. Ícones para home screen de dispositivos móveis são outro pepino… Só o iOS vai ter 4 tamanhos diferentes de acordo com o aparelho e resolução de tela. Ainda existem outras coisas para se considerar como tiles do Windows 8 e quadradinhos do Opera Speed Dial e até mesmo Google TV. Segue uma listinha básica de tamanhos:
– 16px: Barra de endereço, abas e favoritos da maior parte dos navegadores.
– 24px: Barra de ferramentas do Internet Explorer 9
– 32px: Nova aba no IE, site fixo na barra de tarefas do Windos 7 e sidebar do Safari – 57px: iPhone sem tela retina e iPod Touch
– 72px: iPad sem tela retina
– 96px: GoogleTV
– 114px: iPhone com tela retina
– 128px: Chrome Web Store
– 144px: iPad Retina, Windows 8 Tiles
– 256x160px: Opera Speed Dial
Parece muita coisa, mas raramente você vai precisar utilizar todos estes tamanhos. Isto vai variar de acordo com as necessidades do público alvo de cada projeto, que incluem navegador, aparelho e sistema operacional mais utilizados. Minha recomendação é incluir ao menos o clássico de 16px, uma versão HD de 32px e os touch icons para iOS. Segundo estatísticas da Microsoft um site fixado na barra de tarefas do Windows 7 recebia uma porcentagem de visita de 15% a 50% maior… Segundo esta lógica criar um tile para o Windows 8 também é uma boa prática, já que as opções de interação se estendem além do navegador.
Esta é simples. Basta deixar um arquivo de nome favicon.ico na pasta raíz do servidor. Certo?
Sim e não. Isto funcionaria bem para apenas um arquivo… Mas se você deseja trabalhar com múltiplos tamanhos e formatos vai ser necessário declarar no HTML. Vamos supor que temos um arquivo favicon.png dentro de uma pasta chamada IMG.
Antigamente você provavelmente faria isto da seguinte maneira:
<link rel="icon" type="image/png" href="img/favicon.png" />
Como somos bacanas e utilizamos HTML5 as coisas ficam mais simples:
<link rel="icon" href="img/favicon.png" />
Okay. Isto funciona para a maior parte dos browsers inteligentes. Falta o fallback para o IE…
Aviso mega Importante! Não cometa o erro de declarar o png E o ico sem comentários condicionais. Sério. Isto da problemas. Cada navegador possui a sua lógica. Uns vão ler o primeiro que você declarar, outros o último, alguns escolhem aleatoriamente… Sério! Caos!
Poderíamos fazer o fallback através de comentários condicionais:
<!--[if IE]><link rel="shortcut icon" href="img/favicon.ico"><![endif]-->
<link rel="icon" href="img/favicon.png">
Poderíamos… mas para a Microsoft não basta atrapalhar a vida dos desenvolvedores com os problemas dos navegadores antigos. Ela gosta de criar novos problemas! O IE10 não suporta comentários condicionais. É isto mesmo. A salvação mágica para aquelas longas noites insones desenvolvendo não funciona mais. Pode esquecer. Ah, e não sei se você deu uma espiadinha na tabela lá em cima, mas também não suportam PNG. Legal, né? Bem, são estas pequenas coisas que fazem a vida de um desenvolvedor web preocupado com acessibilidade e experiência do usuário um pouco como resolver quebra cabeças… Uma solução possível seria declarar apenas o arquivo em PNG e manter o ICO na raíz.
<link rel="icon" href="img/favicon.png" />
Se você desejar incluir diversos tamanhos, basta declarar cada um deles.
<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">
No caso de dispositivos que utilizam o sistema iOS (iPhone, iPod e iPad) existe a opção de fixar qualquer site como um favorito diretamente na tela de inicio, independente da existência de uma versão mobile ou design responsivo. Por padrão uma thumbnail é gerada automaticamente a partir de uma screenshot da página, mas o resultado é não apenas visualmente confuso como nada prático do ponto de vista da rápida identificação em meio a tantos outros ícones… Muitas vezes o usuário pode até resolver desafixar o seu site dali por que deixou a tela “feia”. Criar uma imagem exclusiva, chamada apple touch icon, é portanto uma boa prática de usabilidade.
Para isto basta criar 4 imagem quadradas com os cantos retos em formato png nos tamanhos 57px, 72px, 114px e 144px. [## Favicons
Se você ainda não sabe, Favicons são aqueles pequenos ícones que ficam ao lado da barra de endereços de um navegador e servem, entre outras funções, para identificar rapidamente um site. Os Favicons são um velhos conhecidos dos designers e desenvolvedores. Já são 14 anos de história. E neste meio tempo muita coisa evoluiu. Surgiram smartphones, tablets, televisores, sistemas operacionais modernos, telas de alta resolução e o favicon foi mudando de tamanho, posição e formato, conquistando um espaço muito além da barra de ferramentas do navegador. Neste artigo vamos conhecer mais profundamente esta parte tão importante, mas muitas vezes tão negligenciada, do webdesign.
A função de um favicon não é apenas ser, como o nome nos leva a deduzir, um símbolo relacionado aos favoritos. Favicons são parte integrante do branding.
O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5. Naqueles idos tempos de 1999 os simpáticos ícones de 16 pixels tinham outras funções como estimar o número de usuários que favoritavam um site com base em requisições do ícone no servidor. Este método deixou de ter utilidade quando os browsers passaram a exibir favicons também na barra de tarefas, independente do site estar salvo nos favoritos ou não. Mas o nome – uma junção dos termos favorite e icons – ficou.
Ícones podem ter diversos propósitos como representar uma determinada ação, superar barreiras de linguagem, sinalização e/ou transmitir uma mensagem. Você não precisa conhecer a língua local em uma estação de trem de outro país para saber onde é a saída. A figura de um homem passando por uma porta acompanhada de uma seta é suficiente para comunicar esta informação. Da mesma forma, portas de banheiro são demarcadas com silhuetas masculinas ou femininas para você não errar na hora do aperto. Estas representações imagéticas acabam rapidamente se tornando convenções sociais. Não é necessário pensar muito para saber qual botão toca ou pausa um aparelho de som ou vídeo…
A função de um favicon não é apenas ser, como o nome nos leva a deduzir, um símbolo relacionado aos favoritos. Favicons são parte integrante do branding. Eles servem para representar um website como uma entidade dentro de um browser.
Criar um ícone é uma atividade multidisciplinar. Semiótica, gestalt, branding e cultura pop são alguns dos assuntos importantes para se ter em mente na hora de projetar ícones. Pesquisa e bom senso também são fundamentais, afinal, um mesmo símbolo pode ter dezenas de significados diferentes de acordo com idade, sexo, nacionalidade, profissão, religião e cultura do público alvo. Além, é claro, do conhecimento técnico necessário para garantir uniformidade, visibilidade, nitidez e identificação de uma imagem em tamanhos reduzidos. Este artigo não tem a pretensão de ensinar design de ícones, mas sim fornecer informações relevantes para utilizar de maneira mais inteligente os recursos disponíveis em diferentes browsers, sistemas operacionais e aparelhos para fazer da iconografia uma ferramenta de divulgação uma marca.
O primeiro browser a utilizar favicon foi (pasmem!) o Internet Explorer 5.
Se você precisa de algumas dicas sobre o por que e como criar um ícone vale a pena ler o livro The Icon Handbook por Jon Hicks.
Existem diversas opções de ferramentas digitais para a criação de ícones. Desde plugins para Photoshop até alguns softwares exclusivos para este fim. O importante é ter o cuidado de repensar o design com mais ou menos detalhes de acordo com o tamanho do ícone ao invés de simplesmente redimensionar o arquivo. Até mesmo reduções proporcionais podem gerar um resultado distorcido e com baixa nitidez. Como em qualquer outro trabalho, quanto mais tempo e carinho você dedicar para criar o seu ícone melhor será o resultado final. Faça o que fizer, passe longe dos conversores automáticos online! O resultado é tão desastroso quanto um layout WYSIWYG em tabela com gifs animados de gatos tocando teclado.
Este tipo de arquivo ainda é o mais utilizado devido ao grande suporte por parte dos navegadores e pela opção de conter diversas imagens encapsuladas. Ou seja, em um mesmo arquivo é possível atender diversas funções e resoluções de tela. (E não. Você não vai conseguir isto simplesmente renomeando um .gif ou .png. É necessário buscar um software próprio)/ Mas é necessário cuidado para que o arquivo final não fique muito pesado. Alguns desenvolvedores recomendam um tamanho máximo de 20K.
Os browsers modernos – leia-se todo mundo menos o Internet Explorer – já suportam outras extenções como PNG, por exemplo. As vantagens do PNG é a qualidade maior da imagem, tamanho reduzido e a conveniência na fase de criação. É bem provável que você já tenha no seu computador algum software capaz de salvar ou exportar arquivos para este formato. Mas como não é possível incluir diversas resoluções em um único arquivo é necessário declarar manualmente cada uma das resoluções.
Existe a possibilidade de uso para alguns outros formatos além de ICO e PNG, mas ainda não existem vantagens consistentes para a adoção de nenhum. JPG, por exemplo, não é adequado devido a pixelização das imagens e a falta de um canal de transparência. O GIF tem uma qualidade inferior e ainda não encontrei quem é o cidadão que acha uma boa ideia utilizar APNG (uma espécie de PNG animado).
Como em qualquer outro trabalho, quanto mais tempo e carinho você dedicar para criar o seu ícone melhor será o resultado final.
Uma opção promissora é o SVG. Como o SVG é um arquivo vetor não teriamos que nos preocupar com os diversos tamanhos. Mas até agora só Opera e o Google Chrome suportam. Então, como grande parte das novidades interessantes, teremos que esperar os outros browsers para começar a brincar…
Se você tem curiosidade em saber qual navegador aceita o que a partir de qual versão, esta é a tabela de compatibilidade segundo a Wikipedia.
| Browser | ICO | PNG | GIF | animated GIFs | JPEG | APNG | SVG |
| Firefox | 1.0+ | 1.0+ | 1.0+ | Sim | Sim | 3.0+ | – |
| Chrome | Sim | Sim | 4.0+ | 4.0+ | 4.0+ | – | Sim |
| IE | 5.0+ | – | – | – | – | – | – |
| Opera | 7.0+ | 7.0+ | 7.0+ | 7.0+ | 7.0+ | 9.5+ | 9.6+ |
| Safari | Sim | 4.0+ | 4.0+ | – | 4.0+ | – | – |
Se quer um conselho amigo passe longe de favicons animados. Além de bregas eles distraem o usuário e passam a impressão que você é carente por atenção.
A melhor pedida é utilizar PNG com um fallback em ICO para o Internet Explorer.
Aqui começa a confusão. Os favicons clássicos tinham 16px quadrados. Mas hoje grande parte dos browsers utilizam uma versão de 32px. Esta é a versão padrão para a barra de ferramentas do Internet Explorer 10, pro exemplo. Ícones para home screen de dispositivos móveis são outro pepino… Só o iOS vai ter 4 tamanhos diferentes de acordo com o aparelho e resolução de tela. Ainda existem outras coisas para se considerar como tiles do Windows 8 e quadradinhos do Opera Speed Dial e até mesmo Google TV. Segue uma listinha básica de tamanhos:
– 16px: Barra de endereço, abas e favoritos da maior parte dos navegadores.
– 24px: Barra de ferramentas do Internet Explorer 9
– 32px: Nova aba no IE, site fixo na barra de tarefas do Windos 7 e sidebar do Safari – 57px: iPhone sem tela retina e iPod Touch
– 72px: iPad sem tela retina
– 96px: GoogleTV
– 114px: iPhone com tela retina
– 128px: Chrome Web Store
– 144px: iPad Retina, Windows 8 Tiles
– 256x160px: Opera Speed Dial
Parece muita coisa, mas raramente você vai precisar utilizar todos estes tamanhos. Isto vai variar de acordo com as necessidades do público alvo de cada projeto, que incluem navegador, aparelho e sistema operacional mais utilizados. Minha recomendação é incluir ao menos o clássico de 16px, uma versão HD de 32px e os touch icons para iOS. Segundo estatísticas da Microsoft um site fixado na barra de tarefas do Windows 7 recebia uma porcentagem de visita de 15% a 50% maior… Segundo esta lógica criar um tile para o Windows 8 também é uma boa prática, já que as opções de interação se estendem além do navegador.
Esta é simples. Basta deixar um arquivo de nome favicon.ico na pasta raíz do servidor. Certo?
Sim e não. Isto funcionaria bem para apenas um arquivo… Mas se você deseja trabalhar com múltiplos tamanhos e formatos vai ser necessário declarar no HTML. Vamos supor que temos um arquivo favicon.png dentro de uma pasta chamada IMG.
Antigamente você provavelmente faria isto da seguinte maneira:
<link rel="icon" type="image/png" href="img/favicon.png" />
Como somos bacanas e utilizamos HTML5 as coisas ficam mais simples:
<link rel="icon" href="img/favicon.png" />
Okay. Isto funciona para a maior parte dos browsers inteligentes. Falta o fallback para o IE…
Aviso mega Importante! Não cometa o erro de declarar o png E o ico sem comentários condicionais. Sério. Isto da problemas. Cada navegador possui a sua lógica. Uns vão ler o primeiro que você declarar, outros o último, alguns escolhem aleatoriamente… Sério! Caos!
Poderíamos fazer o fallback através de comentários condicionais:
<!--[if IE]><link rel="shortcut icon" href="img/favicon.ico"><![endif]-->
<link rel="icon" href="img/favicon.png">
Poderíamos… mas para a Microsoft não basta atrapalhar a vida dos desenvolvedores com os problemas dos navegadores antigos. Ela gosta de criar novos problemas! O IE10 não suporta comentários condicionais. É isto mesmo. A salvação mágica para aquelas longas noites insones desenvolvendo não funciona mais. Pode esquecer. Ah, e não sei se você deu uma espiadinha na tabela lá em cima, mas também não suportam PNG. Legal, né? Bem, são estas pequenas coisas que fazem a vida de um desenvolvedor web preocupado com acessibilidade e experiência do usuário um pouco como resolver quebra cabeças… Uma solução possível seria declarar apenas o arquivo em PNG e manter o ICO na raíz.
<link rel="icon" href="img/favicon.png" />
Se você desejar incluir diversos tamanhos, basta declarar cada um deles.
<link rel="icon" href="favicon-16.png" sizes="16x16">
<link rel="icon" href="favicon-32.png" sizes="32x32">
<link rel="icon" href="favicon-48.png" sizes="48x48">
<link rel="icon" href="favicon-64.png" sizes="64x64">
<link rel="icon" href="favicon-128.png" sizes="128x128">
No caso de dispositivos que utilizam o sistema iOS (iPhone, iPod e iPad) existe a opção de fixar qualquer site como um favorito diretamente na tela de inicio, independente da existência de uma versão mobile ou design responsivo. Por padrão uma thumbnail é gerada automaticamente a partir de uma screenshot da página, mas o resultado é não apenas visualmente confuso como nada prático do ponto de vista da rápida identificação em meio a tantos outros ícones… Muitas vezes o usuário pode até resolver desafixar o seu site dali por que deixou a tela “feia”. Criar uma imagem exclusiva, chamada apple touch icon, é portanto uma boa prática de usabilidade.
Para isto basta criar 4 imagem quadradas com os cantos retos em formato png nos tamanhos 57px, 72px, 114px e 144px.]3 quebra um galho nesta hora.
Depois é só nomear os arquivos com o prefixo “apple-touch-icon” e colocar na raíz do diretório. A vantagem disto é que você economiza algumas linhas de código, mas em alguns casos como em um tema para tumblr, por exemplo, não temos acesso a pasta raiz. Nestas horas é importante declarar o caminho no HTML. Outra vantagem em apontar o caminho do ícone no código é a acessibilidade. Não importa se o seu usuário é fanboy da Apple ou não. Quando devidamente apontados, os touch icons também são utilizados pelo Android (a partir da versão 2.2) e em alguns outros aplicativos como o Reeder para iPad.
Bem, prepare seus icones e cole isto aqui entre as tags head do seu HTML e seja feliz:
<!-- iPad com Retina Display -->
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<!-- iPhone com Retina Display -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<!-- Primeira e segunda geração de iPad -->
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<!-- Versões antigas de iPhone, iPod Touch e Android 2.2+ -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Você pode notar que estou declarando as imagens da maior para a menor. Esta é uma boa prática que garante que versões mais antigas do iOS baixem o arquivo de menor tamanho, já que o atributo sizes só foi implantado a partir do iOS 4. Nas versões anteriores por padrão o sistema escolhe a última imagem determinada. Ou seja, é uma questão de progressive enhancement, pois não faz sentido o usuário baixar uma imagem mais pesada em uma tela de resolução mais baixa.
Por padrão o iOS adiciona alguns efeitinhos como cantos arredondados, drop shadow e reflexo. Como nada grita mais web 2.0 do que gelzinhos bregas se você não quiser o reflexo basta utilizar o sufixo “precomposed” no nome do seu arquivo.
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Se você for preguiçoso e só tiver tempo para criar um ícone faça o de 144px que ele será redimensionado automaticamente. Só tenha em mente que a imagem pode perder a qualidade e você estará forçando o usuário a gastar mais banda do que necessário…
Com a implantação do iOS7 ocorreram algumas modificações no formato Apple Touch Icon. A primeira é com relação ao layout: a Apple retirou os efeitos de gel e transparência a lá web 2.0 (já foi tarde!), portanto não existem mais as versões “pre-composed”. Mas a mudança mais significativa ocorreu no tamanho: todos os ícones para iOS7 estão 5% maiores.
Seguem os três novos tamanhos:
iPhone / iPod touch retina – 120px
iPad 2 / iPad mini – 76px
iPad retina – 152px
Como o iOS7 não é compatível com versões do iPhone pré-retina (iPhone 3GS e anterior) não existe um novo formato para ele. Portanto, é recomendável incluir ainda uma versão de 57px para estes aparelhos mais antigos que não tem a possibilidade de atualizar.
As meta-tags ficariam assim:
<!-- iPad iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<!-- iPhone iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<!-- iPad iOS7+ sem retina display e iPad Mini-->
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<!-- iPhone iOS7-, iPod Touch e Android 2.2+ -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Se você for um fanático e quiser garantir a absoluta compatibilidade com todos os aparelhos vai precisar incluir todas as versões antigas de ícones. O código neste caso seria:
<!-- iPad iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<!-- iPad iOS7- com Retina Display -->
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<!-- iPhone iOS7+ com Retina Display -->
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<!-- iPhone iOS7- com Retina Display -->
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<!-- iPad iOS7+ sem retina display e iPad Mini-->
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<!-- iPad iOS7- sem retina display -->
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<!-- iPhone iOS7-, iPod Touch e Android 2.2+ -->
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Se um usuário gostou o suficiente do seu site para querer guarda-lo entre os seus favoritos um ícone deve ser um convite implicito para que ele possa voltar a visita-lo novamente. Se este convite é grande, colorido e uma presença constante na área de trabalho a probabilidade dele retornar é maior ainda, certo?
É o que acontece no Windows 8. Aqueles blocos coloridos de aplicativos da interface Metro, chamados Tiles também podem ser utilizados para salvar favoritos.
O padrão do Windows 8 é utilizar um favicon ou o ícone do próprio Internet Explorer quando um site é fixado como favoritos na tela inicial. Não é preciso ser um gênio do design para deduzir que se aproveitarmos melhor a área disponível – 144px quadrados – o resultado seria muito mais bacana.
Para criar uma image tile para o seu site basta utilizar um PNG quadrado de 144px por 144 pixels. O recomendável é utilizar um fundo de arquivo transparente, já que o Windows escolhe automaticamente a cor do fundo com base no tom dominante do seu ícone. É possível ainda escolher a cor do fundo do tile no próprio código HTML através de valores hexadecimais ou rgb. Depois é só apontar o caminho da imagem da seguinte forma:
<meta name="msapplication-TileImage" content="img/tile.png"/>
<meta name="msapplication-TileColor" content="#FF0000"/>
Esta imagem só é baixada no momento que o usuário fixa o site como favorito, então não existe nenhum custo de banda adicional.
Existem ainda mais alguns opções avançadas de uso. É possível, por exemplo, criar um arquivo XML que atualiza periodicamente este tile com informações do site. É ótimo para mostrar os últimos posts de um blog, novas promoções de uma loja ou número de mensagens não lidas de uma rede social, por exemplo. Isto significa que o usuário receberá notificações de atualização sem ao menos precisar entrar no site. É possível retornar um valor numérico entre 1 e 99 e ainda mostrar alguns símbolos específicos chamados de glyph badges. A lista de símbolos disponívels inclui um ícones de mensagem, alerta, atenção, erro, etc. Este tutorial ensina como criar o XML
É possível – na verdade desde o Windows 7 – ainda criar uma]6 ou gerada dinamicamente através da interação do usuário para que ele visite diretamente através da tile.
As vezes são os detalhes que fazem toda a diferença. Criar um ícone projetado especificamente para melhor atender cada situação pode dar um pouquinho a mais de trabalho, mas certamente garante uma melhor integração entre o site o usuário final e, consequentemente, uma divulgação maior da marca. Quem fizer o esforço a mais certamente será ganhará destaque na barra de favoritos, home screen ou área de trabalho, ganhando assim mais visitas e o principal – clientes e usuários mais felizes.
Criando logomarca para seu site - Criando sites do zero e fácil - Maykon Silveira
Como criar logomarca para sua empresa ou negócio grátis - Maykon Silveira
Aprenda criar sites responsivos integrados com whatsapp e youtube - Maykon Silveira
Sem usar programação do zero ao servidor web.
Acesse https://maykonsilveira.com.br/cursos-online/criando-sites-para-empresas-so-arrastando-e-soltando
Não se esqueça de curtir e marcar o sininho e se cadastrar no canal ;).
Cursos Gratuitos com Certificado:
https://maykonsilveira.com.br
Me siga:
https://www.instagram.com/maykonsilveiramj/?hl=pt-br
Canal:
https://www.youtube.com/user/Natenha01
Página:
https://www.facebook.com/MaykonSilveiraMJ/
#MaykonSilveira
#BoraAprender
Criando sites do zero e fácil - Integrando seu site com youtube
Aprenda criar sites responsivos integrados com whatsapp e youtube - Maykon Silveira
Sem usar programação do zero ao servidor web.
Acesse https://maykonsilveira.com.br/cursos-online/criando-sites-para-empresas-so-arrastando-e-soltando
Não se esqueça de curtir e marcar o sininho e se cadastrar no canal ;).
Cursos Gratuitos com Certificado:
https://maykonsilveira.com.br
Me siga:
https://www.instagram.com/maykonsilveiramj/?hl=pt-br
Canal:
https://www.youtube.com/user/Natenha01
Página:
https://www.facebook.com/MaykonSilveiraMJ/
#MaykonSilveira
#BoraAprender
Criando sites do zero e fácil - Criando sessão de diferenciais - Maykon Silveira
Aprenda criar sites responsivos integrados com whatsapp e youtube - Maykon Silveira
Sem usar programação do zero ao servidor web.
Acesse https://maykonsilveira.com.br/cursos-online/criando-sites-para-empresas-so-arrastando-e-soltando
Não se esqueça de curtir e marcar o sininho e se cadastrar no canal ;).
Cursos Gratuitos com Certificado:
https://maykonsilveira.com.br
Me siga:
https://www.instagram.com/maykonsilveiramj/?hl=pt-br
Canal:
https://www.youtube.com/user/Natenha01
Página:
https://www.facebook.com/MaykonSilveiraMJ/
#MaykonSilveira
#BoraAprender
Criando sites do zero e fácil - Criando sessão da empresa
Aprenda criar sites responsivos integrados com whatsapp e youtube - Maykon Silveira
Sem usar programação do zero ao servidor web.
Acesse https://maykonsilveira.com.br/cursos-online/criando-sites-para-empresas-so-arrastando-e-soltando
Não se esqueça de curtir e marcar o sininho e se cadastrar no canal ;).
Cursos Gratuitos com Certificado:
https://maykonsilveira.com.br
Me siga:
https://www.instagram.com/maykonsilveiramj/?hl=pt-br
Canal:
https://www.youtube.com/user/Natenha01
Página:
https://www.facebook.com/MaykonSilveiraMJ/
#MaykonSilveira
#BoraAprender
Hoje vamos aprender como baixar programa de leitura e edição de PDF gratuito - Maykon Silveira.
Espero que curta esta aula, eu te vejo no próximo vídeo ;)
Site oficial do produto https://www.foxitsoftware.com/pt-br/downloads/
Não se esqueça de curtir o vídeo, se cadastrar e ativar o sininho!
Cursos gratuitos com certificado:
Site: https://maykonsilveira.com.br/
Meu Face: https://www.facebook.com/MaykonSilveiraMJ
#MaykonSilviera
#BoraAprender
Jose Leandro da Silva Barbosa
24/04/2024
Muito obrigado professor este curso mudou a direção da minha vida, muito obrigado mesmo por dividir o seu conhecimento.
Matheus Barboza Oliveira
24/04/2024
Andrey Filipe
24/04/2024
Muito bem explicado até aqui.
