html - convertir - real fav icon generator
SVG Favicon no funciona (4)
Debe rasterizar el SVG para los navegadores que no son compatibles con los íconos SVG (que actualmente son la mayoría de ellos). Consulte ¿Hay alguna forma de representar los favicons SVG en navegadores no compatibles?
Estoy tratando de obtener un SVG Favicon en mi sitio, pero no importa lo que haga, simplemente no quiere trabajar.
Tengo el siguiente código guardado como un archivo .svg en mi ubicación habitual de favicon, pero cuando cambio la ruta del favicon para que sea .svg en lugar de .ico, no se carga nada.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.5 283.4" style="enable-background:new 0 0 384.5 283.4;" xml:space="preserve" width="100%" height="100%">
<style type="text/css">
.shape1 {fill: #DB6B2A;}
.shape2 {fill: #AE1A31;}
</style>
<path class="shape1" d="M384.5,83.7c-4.6-19.3-14.3-36.3-29.3-51.3C333.4,10.6,307.6,0,276.7,0c-30.9,0-56.7,10.6-78.4,32.4
l-4.6,5.1l-4.5-5.1C167.4,10.6,141.6,0,110.8,0S54.1,10.6,32.4,32.4C10.6,54.1,0,79.9,0,110.8v61.1l55.1-12.8v-48.4
c0-15.2,5.6-28.3,16.2-39C82,60.7,95.1,55.1,110.8,55.1c30.4,0,55.1,25.3,55.1,55.6v22.9l55.6-12.7v-10.1c0-2.5,0-4.6-0.5-7.1
c1.5-12.1,7.1-22.8,16.2-31.9c10.6-11.1,23.8-16.7,39.5-16.7c25.4,0,46.9,17.2,53.3,40.7"/>
<path class="shape2" d="M54.5,187.6c6.4,23.5,27.9,40.7,53.3,40.7c15.7,0,28.8-5.6,39.5-16.7c9.1-9.1,14.7-19.7,16.2-31.9
c-0.5-2.5-0.5-4.6-0.5-7.1v-10.1l55.6-12.7v22.9c0,30.4,24.8,55.6,55.1,55.6c15.7,0,28.8-5.6,39.5-16.7
c10.6-10.6,16.2-23.8,16.2-38.9v-48.4l55.1-12.7v61.1c0,30.9-10.6,56.7-32.4,78.4c-21.7,21.7-47.5,32.4-78.4,32.4
c-30.9,0-56.7-10.6-78.4-32.4l-4.6-5.1l-4.6,5.1c-21.7,21.7-47.6,32.4-78.4,32.4s-56.7-10.6-78.4-32.4C14.3,236,4.6,219,0,199.7"/>
</svg>
Este es el código que estoy usando para establecer el favicon;
<link rel="icon" href="http://www.MYSITE.co.uk/favicon.svg?v=4">
No puedo resolver si es un problema con mi código .svg, o me estoy perdiendo algo. Gracias
En primer lugar, el código que está utilizando para sus favicons falta una parte, debe incluir, en algún lugar. que dice: tipo = "imagen / x-icono". Entonces, para los favicons, utilizando .jpg u otras imágenes estándar como .gif el código se ve así:
<link href="someimagesourcefileorURL.jpg" rel="icon" type="image/x-icon" />
1. Para la extensión de la imagen, .jpg funciona [o puede usar otra extensión de archivo comparable; .gif también funciona.] 2. Para rel, "icono" es suficiente [pero también puede poner la palabra "atajo" junto a / antes de "icono" si lo desea, opcionalmente.]
Para un ''favicon'' de SVG es un poco más complicado, por varias razones. Esto es opcional, pero para que funcione mejor, necesita que la imagen SVG tenga un tamaño inferior a 256 píxeles cuadrados (16 píxeles por 16 píxeles, pero dado que las imágenes SVG son normalmente escalables, recomiendo establecer la altura y el ancho en ambos <= 16px inmediatamente antes de intentar para usarlos como un ''favicon''. Por lo tanto, debe dividir su altura por el número que sea necesario para que la altura sea igual o inferior a 16px y lo mismo es válido para el ancho. Si tiene una imagen cuadrada y de proporciones iguales , entonces deberías poder simplemente cambiar el tamaño de la imagen completa en un porcentaje y la imagen completa debería reducir su tamaño sin distorsionar significativamente mientras conserva la forma cuadrada. Si no tienes una forma cuadrada, tendrás que distorsionar la imagen. algunos en el proceso de convertirlo en una forma cuadrada-ish porque los favicons son cuadrados de 16px por 16px. Suponiendo que ya hayas hecho esos ajustes, nos estamos moviendo. Ahora, después de que termine esa parte, usas este formato para SVG ''favicons'':
<link rel="icon" href="someimagefileorURL.svg" type="image/svg+xml" />
Eso debería funcionar siempre y cuando su imagen SVG haya sido dimensionada como se describe anteriormente. Aquí hay un buen JSfiddle (no mío) que demuestra que este código funciona. https://jsfiddle.net/Daniel_Hug/YawSn/ Y tengo mucha experiencia con los favicons tradicionales que trabajan con el primer método que describí.
¡Espero que esto ayude! ¡Ojalá alguien me haya mostrado esto cuando todavía no sabía cómo usar / configurar los favicons! :-)
Los favicons SVG no son compatibles en ninguna parte, excepto en Firefox y Safari: caniuse.com/#feat=link-icon-svg
Es posible que solo quieras usar un .png hasta que el soporte mejore.
Puedes probar así
<link rel=icon href=gnome.svg sizes="any" type="image/svg+xml">
pero la mayoría de los navegadores no son compatibles