Експериментува́в з вічною темою. Ось як я бачу оптимальну політику щодо іко́нок.
По-перше, у <head> достатньо лише цього: <link rel="icon" href="/favicon.svg">.
По-друге, у корінь сайту треба покласти /favicon.ico та /apple-touch-icon.png. Саме ці імена, серйозно, без варіантів. Це як robots.txt. І не потрібно на них додавати посилання в HTML.
apple-touch-icon.png
Чому не треба робити посилань на apple-touch-icon? Її багато хто завантажує і використовує.
Наприклад, Firefox. І дійсно, при наявності <link rel="apple-touch-icon"> мій Firefox 93 завантажує цю іко́нку, причому одразу і одночасно з SVG. Яка лажа! Звісно, якщо посилання прибрати, то Firefox не буде завантажувати apple-touch-icon.
Головне: при спробі додати сайт до «обраних» чи на головний екран Safari сама йде нишпорити по «стандартних» адре́сах з магічною назвою. Наприклад, Safari 9 на моєму антикварному iPad 2, зробленому ще при Джобсі, надсилає отакі запити:
[00:01:00] "GET / HTTP/1.1" 200
[00:01:00] "GET /style.css HTTP/1.1" 200
(тут я тисну «додати на головний екран»)
[00:02:00] "GET /apple-touch-icon-76x76-precomposed.png HTTP/1.1" 404
[00:02:00] "GET /apple-touch-icon-76x76.png HTTP/1.1" 404
[00:02:00] "GET /apple-touch-icon.png HTTP/1.1" 200
Трохи неестети́чно бачити всі ці 404, та купа різноформатних іко́нок мене б дратува́ла більше. До того ж, через ці 404 ми отиримали опосередковану інформацію про факт додавання сайту в «обрані» чи на головний екран, а ще щось дізналися про версію системи.
favicon.ico
З тієї самої причини нема потреби мати в <head> посилання на legacy іконку в форматі ICO. Справжній старий недобрий MSIE у пошуках іконки теж чудово вміє лізти туди, куди його не просили.
До речі, Chrome теж схильний завантажувати дві іконки.
Makefile
Користуючись нагодою, нагадаю, що можна автоматично створювати растрові іконки з SVG.
favicon.ico: favicon.svg
rsvg-convert $< -w 32 -h 32 | convert - $@
# Або так:
#rsvg-convert $< -w 32 -h 32 | convert - gif:- | convert - $@
apple-touch-icon.png: favicon.svg
rsvg-convert $< -w 180 -h 180 \
| convert - -background "#fff" -alpha remove -alpha off $@
optipng $@
advpng -z4 $@
Обговорення у Twitter: https://twitter.com/kastaneda/status/1457513127969492997