Use an ICO file for favicons

The browsers have been choosing very poorly and have a lot of bugs when
it comes to favicons. Using an ICO makes many browsers choose better in
most cases. Most large websites use ICO files.

The icons in the ICO file needs to be ordered largest to the smallest
icon, and due to a Chrome bug we are limited to 8 icons. This
unfortunately means we couldn't fit one of the Android sizes. The 72x72
icon was removed since testing showed that it was used the least.
This commit is contained in:
Samuel Mannehed 2022-12-22 16:43:44 +01:00
parent 139f087187
commit 6e1d842850
12 changed files with 15 additions and 17 deletions

View File

@ -1,5 +1,8 @@
BROWSER_SIZES := 16 24 32 48 64
ANDROID_SIZES := 72 96 144 192
#ANDROID_SIZES := 72 96 144 192
# FIXME: The ICO is limited to 8 icons due to a Chrome bug:
# https://bugs.chromium.org/p/chromium/issues/detail?id=1381393
ANDROID_SIZES := 96 144 192
WEB_ICON_SIZES := $(BROWSER_SIZES) $(ANDROID_SIZES)
#IOS_1X_SIZES := 20 29 40 76 # No such devices exist anymore
@ -9,10 +12,19 @@ ALL_IOS_SIZES := $(IOS_1X_SIZES) $(IOS_2X_SIZES) $(IOS_3X_SIZES)
ALL_ICONS := \
$(ALL_IOS_SIZES:%=novnc-ios-%.png) \
$(WEB_ICON_SIZES:%=novnc-%.png)
novnc.ico
all: $(ALL_ICONS)
# Our testing shows that the ICO file need to be sorted in largest to
# smallest to get the apporpriate behviour
WEB_ICON_SIZES_REVERSE := $(shell echo $(WEB_ICON_SIZES) | tr ' ' '\n' | sort -nr | tr '\n' ' ')
WEB_BASE_ICONS := $(WEB_ICON_SIZES_REVERSE:%=novnc-%.png)
.INTERMEDIATE: $(WEB_BASE_ICONS)
novnc.ico: $(WEB_BASE_ICONS)
convert $(WEB_BASE_ICONS) "$@"
# General conversion
novnc-%.png: novnc-icon.svg
convert -depth 8 -background transparent \

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 648 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 967 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1023 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

BIN
app/images/icons/novnc.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 303 KiB

View File

@ -17,21 +17,7 @@
<meta charset="utf-8">
<!-- Icons (see app/images/icons/Makefile for what the sizes are for) -->
<link rel="icon" sizes="16x16" type="image/png" href="app/images/icons/novnc-16.png">
<link rel="icon" sizes="24x24" type="image/png" href="app/images/icons/novnc-24.png">
<link rel="icon" sizes="32x32" type="image/png" href="app/images/icons/novnc-32.png">
<link rel="icon" sizes="48x48" type="image/png" href="app/images/icons/novnc-48.png">
<link rel="icon" sizes="64x64" type="image/png" href="app/images/icons/novnc-64.png">
<link rel="icon" sizes="72x72" type="image/png" href="app/images/icons/novnc-72.png">
<link rel="icon" sizes="96x96" type="image/png" href="app/images/icons/novnc-96.png">
<link rel="icon" sizes="144x144" type="image/png" href="app/images/icons/novnc-144.png">
<link rel="icon" sizes="192x192" type="image/png" href="app/images/icons/novnc-192.png">
<!-- Firefox currently mishandles SVG, see #1419039
<link rel="icon" sizes="any" type="image/svg+xml" href="app/images/icons/novnc-icon.svg">
-->
<!-- Repeated last so that legacy handling will pick this -->
<link rel="icon" sizes="16x16" type="image/png" href="app/images/icons/novnc-16.png">
<link rel="icon" type="image/x-icon" href="app/images/icons/novnc.ico">
<!-- Apple iOS Safari settings -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">