Uma visão geral básica sobre como criar um favicon adaptável.
Nesta postagem, quero compartilhar ideias sobre como criar um favicon adaptável com o SVG. Teste a demonstração.
Se preferir vídeo, aqui está uma versão do YouTube desta postagem:
Visão geral
Um favicon personalizado é uma ótima maneira de aprimorar um projeto da Web. Ele é exibido em guias de navegadores para computadores e
também em leitores da opção "Salvar para mais tarde", outras postagens de blog com links para seu site e
muito mais. Tradicionalmente, isso é feito com o tipo de arquivo .ico, mas recentemente
os navegadores permitiram o uso do
SVG, um formato vetorial. Com o
aprimoramento
progressivo,
é possível veicular favicons .ico com suporte e fazer upgrade para um .svg, se
disponível.
O SVG pode ser escalonado verticalmente sem perda de qualidade e pode ser muito pequeno. Além disso, 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 de leitura ou barras de favoritos, há uma chance de o usuário receber um ícone relevante para o tema (claro ou escuro) devido aos estilos de preferência escuros 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 é
XML (em inglês) usando
uma extensão de tipo de arquivo .svg que permite conter tipos mais dinâmicos de
código.
Comece criando favicon.svg
Crie um novo arquivo com o nome favicon.svg e adicione o seguinte:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
</svg>
Aqui está meu arquivo SVG, que dimensionei o viewBox relevante para a 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 de caminho SVG. Muitas vezes, isso significa abrir o SVG em um editor de código, mas esse código geralmente não é legível. Consulte este guia ótimo sobre como exportar e otimizar o SVG usando ferramentas de design.
A arte deste desafio da GUI veio de um designer que o criou no Adobe Illustrator. e fiz bastante otimização. Eu o executei por meio do SVGOMG e depois editei o mapa à mão.
Veja um exemplo do meu grupo de caminhos de arte skull, 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 por humanos, como
#eyes-and-nose, e
as classes como
.favicon-stroke. Eles são arquivos editados por mim em preparação para o CSS.
Não é necessário adicionar classes e IDs para que seu SVG seja um favicon adaptativo.
Vincular o SVG do favicon a partir do HTML
Na tag <head> do HTML, após o favicon .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 ser idêntico à versão do .ico, verifique se ele está sendo
usado. Abra o painel Network do DevTools. Filtre por imagens e pesquise por favicon:
Estilos
Assim como no HTML, você pode adicionar uma tag <style> à marcação para usar nesse escopo do documento:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 447 428">
<style>
</style>
…
</svg>
A versão com tema claro será a cor padrão do meu SVG favicon. Os estilos para os quais escrevi eram principalmente cores de traço e 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>
A seguir, a parte mais divertida, estilizar a versão de tema escuro do seu favicon. Os estilos dessa tag entrarão 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),
mudou a cor do osso da caveira de branco para um cinza claro claro (#adb5bd), mas
deixei o chapéu rosa com destaque.
Conclusão
Agora que você sabe como eu fiz isso, o que você faria ‽ 🙂
Vamos diversificar nossas abordagens e aprender todas as maneiras de criar na Web. Crie uma demonstração, envie um tweet para mim e os adicionarei à seção de remixes da comunidade abaixo.