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 nos leitores "Salvar para depois", em outras postagens do 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. Usando o
aprimoramento
progressivo,
é possível exibir ícones .ico com suporte e fazer upgrade para um .svg, se
disponível.
O SVG pode ser dimensionado para cima e para baixo sem perda de qualidade e pode ser muito pequeno. Ele também pode ter CSS incorporado, até mesmo consultas de mídia incorporadas. Isso significa que, se um ícone favicon SVG for usado em um app de leitor ou barras de favoritos, é possível que o usuário receba um ícone relevante ao tema (claro ou escuro) devido aos estilos de preferência escura fornecidos no SVG. O SVG é adaptado usando o estilo incorporado para as preferências de usuário claro e escuro.
Marcação
A marcação SVG é
XML usando
uma extensão de tipo de arquivo .svg, que permite armazenar mais tipos dinâmicos de
código.
Comece fazendo 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 guia que vai ajudar você a exportar e otimizar 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.
Confira um exemplo do grupo de caminho de arte skull do meu aplicativo, depois de
limpeza:
<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 por humanos, como
#eyes-and-nose, e as
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 nesse
escopo de 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 vão ser inseridos em uma consulta de mídia na 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.