Serve favicons to all clients

README.md

There is a lot of files needed to make all clients happy and show a nice favicon. This note make things a bit simpler by having a set of sizes ready and rewriting request paths.

1. Make sure you have these sizes available, square works best:

16.png
32.png
36.png
48.png
57.png
60.png
70.png
72.png
76.png
96.png
114.png
120.png
144.png
150.png
152.png
180.png
192.png
194.png
256.png
310.png
384.png
512.png

2. Convert 16 and 32 into favicon.ico:

convert \
  16.png \
  32.png \
  favicon.ico

3. Configure your web server or reverse proxy to rewrite required paths.

---

See: https://realfavicongenerator.net/faq

nginx

server {
    location /favicon.ico {
        expires 7d;
        add_header Cache-Control "public";
        root /path/to/favicons;
    }
    
    location /apple-touch-icon.png {
        expires 7d;
        add_header Cache-Control "public";
        alias /path/to/favicons/152.png;
    }
    
    location ~ ^/(?:android-chrome|apple-touch-icon|favicon|mstile)-\d+x(\d+).png$ {
        expires 7d;
        add_header Cache-Control "public";
        alias /path/to/favicons/$1.png;
    }
}