Mostrar ícone nas guias fixadas do Safari

Como você pode ver acima, algumas das minhas guias fixadas mostram ícones oficiais (circulados em amarelo), enquanto outros são fixados com as primeiras letras dos respectivos títulos do site (circulados em vermelho).

Meu site pessoal é www.saphryn.com, afixado na extrema esquerda. O que devo ajustar para que meu logotipo apareça no alfinete?

Observações que podem ajudar:

Meu site é desenvolvido na plataforma Wix.
Conforme mostrado na captura de tela abaixo, meu logotipo / ícone aparece na pesquisa sugestiva no omnibar do Safari.
O Safari mostra a primeira letra do nome de qualquer site, se não houver um logotipo que corresponda ao site ao fixá-lo.
Se a vista estiver marcada (em vez de marcada), o Safari priorizará a primeira letra do título do marcador sobre o nome real do site.

Alguma ideia?

safari icon bookmarks

— Saphryn
fonte

developer.apple.com/library/prerelease/mac/releasenotes/General/…

— mccc

Criando ícones de guias fixadas

Os sites fixos permitem que seus usuários mantenham seus sites favoritos abertos, em execução e facilmente acessíveis. Você pode definir o ícone que o usuário vê quando fixa seu site fornecendo uma imagem vetorial.

Fornecendo a imagem vetorial

Use 100% de preto para todos os vetores com fundo transparente no formato SVG e adicione a seguinte marcação a todas as páginas da web que o ícone deve representar (substituindo "website_icon" pelo nome do seu próprio arquivo).

<link rel="mask-icon" href="website_icon.svg" color="red">

No exemplo, o atributo color define a cor de exibição da imagem. Esse atributo pode especificar uma única cor com um valor hexadecimal (# 990000), um valor RGB (rgb (153, 0, 0)) ou uma palavra-chave de cor reconhecida, como: vermelho, limão ou azul marinho.

Portanto, se o Wix não estiver fornecendo a opção, você deverá configurá-la programaticamente editando seu código HTML;)

https://developer.apple.com/library/prerelease/ios/documentation/AppleApplications/Reference/SafariWebContent/pinnedTabs/pinnedTabs.html

— StrawHara
fonte

Por que todas as respostas não podem ser escritas como as suas lol;). Vou tentar hoje à noite.

— saphryn

@SaphrynShikaze ah ah muito obrigado, mas a maior parte da minha resposta está vindo a partir da documentação de maçã;)

— StrawHara

Então, aparentemente, o Wix não permite o upload de arquivos SVG para sua biblioteca. Estou tentando descobrir outra solução alternativa, mas sem sorte ainda.

— saphryn