Generador para crear un conjunto óptimo de favicons

Instrucción

En el pasado, tenías que crear docenas de íconos de sitios web para diferentes navegadores y sus versiones. Pero en la construcción moderna de sitios web, muchas cosas han cambiado. Ahora todo lo que necesitamos para crear un hermoso ícono de sitio web es un archivo svg, un favicon, tres png y un json. Puedes leer más en este artículo.

HTML:

<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- 180x180 - first for safari --> 
<link rel="icon" href="/favicon.ico" sizes="any"><!-- 32x32 --> 
<link rel="icon" href="/icon.svg" type="image/svg+xml"> 
<link rel="manifest" href="/manifest.webmanifest">

Archivo de manifiesto:

// manifest.webmanifest
{
   "icons": [
      { "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
      { "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
   ]
}

Yandex Browser Tableau

Solo el Yandex Browser con su tableau agregó algunos problemas. Si desea que su sitio se vea bien en tableau ( al abrir una nueva pestaña), debe crear un archivo de manifiesto y una imagen png con fondo transparente y relación de aspecto: 1:3.

Esta línea se agregará al encabezado: 

<link rel="yandex-tableau-widget" href="/tableau.json">

Y cree un archivo de manifiesto para Yandex en la raíz:

{
   "version": "1.0",
   "api_version": 3,
   "layout": {
      "logo": "/tableau.png",
      "color": "#003C8C",
   }
}

En la columna color, especifique el color de fondo que desea ver en el cuadro del navegador Yandex.
logo-es el camino a la imagen.
Más detalles en este artículo.

Generador

Utilice el siguiente formulario para cargar el archivo del logotipo de su sitio web en cualquiera de los formatos (jpg, png, svg) y ¡obtenga un conjunto de cinco íconos! Tamaño máximo: 5мб

Arrastre y suelte el archivo del logotipo cuadrado aquí o haga clic.

Adjunte un archivo de logotipo cuadrado con pequeñas sangrías alrededor de los bordes (~10%).
Puede tener un fondo transparente o de color.
Se aceptan iconos en formato png;
Se aceptan iconos en formato svg;
Se aceptan iconos en formato jpg;

El generador de iconos creará: