Traduzido do 日本語 • Ver original Olá. Aqui é o Tsukada, responsável pelo design de interface.
Hoje, gostaria de falar sobre o favicon que vem com o site.
Gosto de projetar e desenvolver designs de logotipos e de criar sites.
Eu sempre deixava a construção da interface, como programação, para outro membro da equipe.
E, surpreendentemente, uma coisa que tende a ser negligenciada é o favicon.
Há muito tempo, favoritos em sites de PC e sutilmente próximos aos frames de entrada de URL
Ele só era reconhecido como um ícone pictórico com o logo de serviço.
Eu estava procurando uma forma de criar um arquivo favicon (.ico) em um projeto recente.
Um blogueiro foi publicado sobre os tipos de favicon.
O quê! São 21 deles! !
Lista de > favicon.ico favicon : para IE favicon-16x16.png: para abas favicon-32x32.png: para Safari para Mac favicon-96x96.png: para Google TV favicon-160x160.png: para discagem rápida para Opera 12 favicon-196x196.png: para Chrome para Android mstile-70x70.png: para Windows 8 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-310x150.png apple-touch-icon-57x57.png: para iOS apple-touch-icon-60x60.png apple-touch-icon-72x72.png apple-touch-icon-76x76.png apple-touch-icon-114x114.png apple-touch-icon-120x120.png apple-touch-icon-144x144.png apple-touch-icon-152x152.png apple-touch-icon.png apple-touch-icon-precomposed.png
(A seguir é citado do resumo de "Exploração de TI")
São tantos deles^^;
Até cerca de 10 anos atrás, era bom configurar o favicon do site pensando em um navegador de PC.
Desde que Steve Jobs anunciou o iPhone há cerca de 8 anos,
iPhone, Android, iPad, iPod touch e outros terminais multimídia já apareceram,
Uma situação em que o design precisa ser ajustado para cada ícone exposto de acordo com esses dispositivos e sistema operacional.
Em particular, um ponto cego para mim como usuário de Mac foi o favicon que entra no design dos painéis do Windows 8.
O design do sistema operacional foi achatado, e o ícone picto está cuidadosamente colocado em cada cor de fundo.
Portanto, se você não ajustar os ícones do Windows 8 com blanking branco, o tom do design não vai combinar com os outros elementos...
Não consigo fazer muitos deles um por um.
Se eu passar mais tempo criando um favicon, **quero dedicar mais tempo ao design! ! **
Então o que encontrei desta vez foi...
「Gerador Favicon para todas as plataformas」(Real Favicon Generator.net)。
Este site gera automaticamente todos os 21 arquivos Favicon mencionados acima ao mesmo tempo. Isso é fácil ♪
Quando você carrega uma imagem preparada do favicon e aperta o botão de gerar automaticamente...
Na próxima tela, ajuste os ícones do iOS, Android Chrome e Windows 8 para o destino de exposição do dispositivo.
Você pode definir configurações detalhadas como cor dos ícones, cor do fundo e tamanho das margens para atender às suas preferências.
Além disso, como função opcional, parece ser possível personalizar as configurações de compressão de tamanho de arquivo e algoritmos de escala.
O que é ainda mais agradável é que, ao mesmo tempo em que a geração automática de vários ícones para o Favicon,
O site
Também gera código-fonte para escrever os elementos internos.
Ao adicionar esse código, você pode reduzir muito o tempo gasto criando favicons☆ problemáticos
Agora, quando você terminar de instalar o Favicon no site em que está trabalhando,
Em seguida, precisamos verificar como foi implementado em vários terminais.
Esta é outra tarefa simples e problemática...
No entanto, o "Favicon Generator para todas as plataformas" é um favicon instalado no site
Ele vai verificar automaticamente como ele é exibido em vários navegadores de terminais! Esse é um recurso interessante ^^
Claro, a depuração de sites em vários navegadores de sistemas operacionais deve ser feita corretamente,
Ao utilizar essa ferramenta geradora, você pode reduzir significativamente o tempo necessário para criar um favicon.
Designers, vamos economizar tempo em tarefas tediosas como produção de favicon e dedicar **mais tempo ao trabalho criativo! **