← Back

Favicon Script

    Hopefully your browser tab shows my makerlabs logo. I used a shell script to generate a multilayer favicon and told your browser to use it. A favicon, short for "favorite icon," is a small image associated with a website. It appears in browser tabs, bookmarks, and other locations to identify this site.

    Favicons need to be available in multiple sizes to accommodate different devices and display contexts. The most common way to package them is in a multi-resolution .ico file, which contains several versions of the icon ranging from 16x16 pixels to 512x512 pixels. This ensures compatibility across web browsers, operating systems, and mobile devices.

    To create a favicon that remains sharp and clear at all sizes, I chose to use an SVG file as the starting point. Unlike raster images such as PNG or JPG, an SVG is a vector-based format, meaning it can be scaled to any size without losing quality. This approach avoids pixelation or blurring that often occurs when resizing raster images, ensuring crisp edges and smooth curves at every resolution.

    The script I wrote automates the process of generating a favicon from an SVG. It begins by checking that the necessary files and directories exist, ensuring that the workflow runs smoothly. Using Inkscape, it scales the SVG to multiple standard favicon sizes. Each scaled version is then converted to PNG format while preserving the original clarity of the design. To prevent transparency issues, ImageMagick processes the images by adding a solid white background where needed. Finally, all PNG versions are combined into a single .ico file, which is compatible with web browsers and other applications. The script also cleans up temporary files, keeping the directory structure organized.

192x192 svg


shell 
pkg update && pkg upgrade
pkg install imagemagick inkscape
bash 
#!/data/data/com.termux/files/usr/bin/bash

# Check if assets/images directory exists
if [ ! -d "assets/images/" ]; then
    echo "Error: Directory 'assets/images/' not found."
    exit 1
fi
# Check if favicon.svg exists in the parent directory
if [ ! -f "assets/images/favicon.svg" ]; then
    echo "Error: File 'favicon.svg' not found."
    exit 2
fi

cd assets/images/
mkdir -p favicons
cd favicons

sizes=(16 32 140 192 409 512)

for size in "${sizes[@]}"; do
    inkscape -w $size -h $size --export-png-compression=0 --export-png-antialias=2 -b "#FFFFFF" -y 0.0 --export-png-color-mode=RGBA_8 ../favicon.svg -o favicon-${size}.png 2>/dev/null
done

# Combine 16x16 and 32x32 into favicon.ico
magick favicon-32.png favicon-16.png -colors 256 favicon.ico

magick favicon-140.png -background "#700000" -gravity center -extent 180x180 apple-touch-icon.png

magick favicon-409.png -background "#700000" -gravity center -extent 512x512 favicon_mask.png

mv favicon.ico ../../../
cp favicon.svg ../../../
mv apple-touch-icon.png ../../../
mv favicon_mask.png ../../../
cd ../../../

rm _includes/favicon.html 2>/dev/null
touch _includes/favicon.html
href=\"/favicon.ico\" sizes=\"32x32\">" >> _includes/favicon.html
echo "<link rel=\"icon\" href=\"/favicon.svg\" type=\"image/svg+xml\">" >> _includes/favicon.html
echo "<link rel=\"apple-touch-icon\" href=\"/apple-touch-icon.png\" type=\"image/png\" sizes=\"180x180\">" >> _includes/favicon.html
echo "<link rel=\"icon\" href=\"/favicon-mask.png\" type=\"image/png\" sizes=\"512x512\" purpose=\"maskable\">" >> _includes/favicon.html

for size in "${sizes[@]}"; do
    echo "<link rel=\"icon\" href=\"/assets/images/favicons/favicon-${size}.png\" type=\"image/png\" sizes=\"${size}x${size}\">" >> _includes/favicon.html
done

echo "Success: $(pwd)/favicon.ico"