search

LuisPalacios / LuisPalacios.github.io

Website de Luis Palacios
3 stars 0 forks source link

Implementar favicon multi-dispositivo. #11

Closed LuisPalacios closed 3 years ago

LuisPalacios commented 3 years ago

El objetivo es preparar los ficheros favicon multidipostivo para que se representen de forma correcta en diferentes navegadores en smartphones, tablets y ordenadores.

LuisPalacios commented 3 years ago

  1. Hice el icono y lo exporté a SVG. (Aquí tienes un ejemplo de mi logo en formato SVG).

  2. Después utilicé Favicon Generator para crear casi todos los iconos.

  3. Copié los ficheros que genera al directorio raíz de la rama gh-pages: LuisPalacios.github.io/docs.

➜  Downloads > tree favicon_package_v0.16
favicon_package_v0.16
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── browserconfig.xml
├── favicon-16x16.png
├── favicon-32x32.png
├── favicon.ico
├── mstile-144x144.png
├── mstile-150x150.png
├── mstile-310x150.png
├── mstile-310x310.png
├── mstile-70x70.png
├── safari-pinned-tab.svg
└── site.webmanifest

2.1 Genero múltiples versiones de apple-touch-icon*.png que también copié al directorio raíz de la rama gh-pages: .docs. Utilicé el primero, pero te enlazo algunos sitios:

  1. Creo el fichero ./docs/_includes/custom-head.html.
{% comment %}
  Placeholder to allow defining custom head, in principle, you can add anything here, e.g. favicons:

  1. Head over to https://realfavicongenerator.net/ to add your own favicons.
  2. Customize default _includes/custom-head.html in your source directory and insert the given code snippet.
{% endcomment %}

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
  1. La versión liberada actual de mínima para GitHub Pages no soporta todavía leer el fichero custom-head.html, así que me copio la versión original de head.html y lo modifico para que lo llame. 
cd prog.git/github-luispa/LuisPalacios.github.io/docs
tree $(bundle info minima | grep Path | sed -e 's/Path://g')
/Users/luis/gems/gems/minima-2.5.1
:
├── _includes
│   ├── disqus_comments.html
│   ├── footer.html
│   ├── google-analytics.html
│   ├── head.html
│   ├── header.html
:
cp gems/gems/minima-2.5.1/_includes/head.html prog.git/github-luispa/LuisPalacios.github.io/docs/_includes/
  1. Modifico el fichero ./docs/_includes/head.html para que llame a a mi custom-head.html
 :
    {%- include google-analytics.html -%}
  {%- endif -%}

  {%- include custom-head.html -%}      <== AÑADO ESTA LÍNEA

</head>