Uma visão geral básica de como criar um ícone de favicon adaptável.
Neste post, quero compartilhar ideias sobre como criar um ícone de site adaptável com SVG. Teste a demonstração.
Se preferir vídeos, confira a versão desta postagem no YouTube:
Visão geral
Um favicon personalizado é
uma ótima maneira de refinar um projeto da Web. Ele aparece nas guias do navegador para computador e
também em leitores "salvar para depois", outras postagens de blog com links para seu site e
mais. Tradicionalmente, isso era feito com o tipo de arquivo .ico, mas recentemente
os navegadores permitiram o uso de
SVG, um formato vetorial. Com o
aprimoramento
progressivo,
você pode veicular favicons compatíveis do .ico e fazer upgrade para um .svg, se
disponível.
O SVG é capaz de aumentar e diminuir a escala sem perda de qualidade e pode ser muito pequeno em tamanho. Ele também pode ter CSS incorporado, até mesmo consultas de mídia incorporadas. Isso significa que, se um favicon SVG for usado em um app leitor ou barras de favoritos, há uma chance de o usuário receber um ícone para um tema relevante (claro ou escuro) devido aos estilos de preferência escura fornecidos no SVG. Em seguida, o SVG se adapta usando o estilo incorporado para preferências claras e escuras do usuário.
Marcação
A marcação SVG é um
XML que usa
uma extensão de tipo de arquivo .svg, que permite armazenar tipos mais dinâmicos de
código.
Comece criando favicon.svg
Crie um novo arquivo chamado favicon.svg e adicione o seguinte:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
Este é meu arquivo SVG. Eu dimensionei o viewBox relevante para minha arte:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
</svg>
Adicionar formas e caminhos
Em seguida, adicione o código do caminho SVG. Isso geralmente significa abrir o SVG em um editor de código, mas esse código geralmente não é amigável para humanos. Confira um ótimo guia que orienta você na exportação e otimização de SVG usando ferramentas de design.
A arte deste desafio de GUI foi criada por um designer no Adobe Illustrator. Eu o otimizei bastante. Eu executei o arquivo no SVGOMG e editei manualmente o conteúdo indesejado.
Veja um exemplo do grupo de caminhos de arte skull da mina, depois de limpá-lo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<g id="skull">
<path id="skull-outline" class="favicon-stroke" stroke-linejoin="round" d="M19.62 188.39A166.62 166.62 0 0 1 186.24 21.77c115.25 0 166.61 74.59 166.61 166.62 0 1.83-.08 3.64-.13 5.46h.13s.68 175.09.68 178.65c0 30.11-16.26 41.67-36.32 41.67-12.7 0-35.22-3.93-36.22-32.69h-.2c-1 28.76-16.81 32.69-36.22 32.69-18 0-32.87-6.78-35.77-32.53-2.9 25.75-17.8 32.53-35.8 32.53-20.06 0-36.32-11.56-36.32-41.67 0-2.48.36-24.88.36-24.88A166.68 166.68 0 0 1 19.62 188.39Z" />
<path id="eyes-and-nose" d="M180.77 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82-28.68 19.17-28.68 42.82M275 205.76c0 23.64 12.84 42.81 28.68 42.81s28.68-19.17 28.68-42.81-12.84-42.82-28.68-42.82S275 182.11 275 205.76M264.51 276.85s-29.26 43.53-20.12 49.23c7.07 4.41 20.49-16.71 20.49-16.71s12.82 22.58 16.76 20c16.24-10.71-17.13-52.5-17.13-52.5"/>
<path id="jawline" class="favicon-stroke" fill="none" stroke-linecap="round" d="M114.92 284.33c22.54-1 22 7 22 62.48" />
</g>
</svg>
Observe os seletores de ID legíveis, como #eyes-and-nose, e classes como .favicon-stroke. Essas são minhas edições manuais, em preparação para o CSS.
Não é necessário adicionar classes e IDs para que o SVG seja um favicon adaptável.
Vincular o SVG do ícone de favoritos do HTML
Na tag <head> do HTML, depois do ícone .ico, adicione o seguinte:
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
Como o novo ícone pode parecer idêntico à versão .ico, verifique se ele está sendo
usado. Abra o painel Network do DevTools. Filtrar por imagens e pesquisar o
favicon:
Estilos
Assim como no HTML, é possível adicionar uma tag <style> à marcação para uso no escopo do documento:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
A versão do tema claro será a cor padrão do SVG do meu ícone. Os estilos que escrevi para isso eram principalmente cores de traço e de preenchimento:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
.favicon-stroke {
stroke-width: 8px;
stroke: #8929ff;
}
#skull-outline { fill: white }
#eyes-and-nose, #hat-outline { fill: #8929ff }
#hat-fill, #hat-bill { fill: #e662e6 }
</style>
…
</svg>
Em seguida, a parte mais divertida: estilizar a versão do tema escuro do seu ícone. Os estilos para isso irão para uma consulta de mídia dentro da tag de estilo:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
/* dark theme styles */
}
</style>
…
</svg>
O meu ficou assim:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
…
@media (prefers-color-scheme: dark) {
.favicon-stroke { stroke: #343a40 }
#skull-outline { fill: #adb5bd }
#hat-outline { fill: #343a40 }
#eyes-and-nose { fill: #343a40 }
}
</style>
…
</svg>
Escolhi trocar as bordas roxas brilhantes por um cinza-escuro legal (#343a40),
mudando a cor do osso do crânio de branco para um cinza-claro (#adb5bd), mas
deixei o chapéu de destaque rosa.
Conclusão
Agora que você sabe como eu fiz, como você faria? 🙂
Vamos diversificar nossas abordagens e aprender todas as maneiras de criar na Web. Crie uma demonstração, envie links para mim e vou adicionar à seção de remixes da comunidade abaixo.