logoredraws.com

Serve a favicon with Apache

How to serve an SVG favicon with an ICO fallback on Apache: file placement, MIME types, HTML link tags, caching, and how to check that the SVG is real vector artwork.

Published

Contents
  1. The short answer
  2. Which files are involved
  3. Step 1: Place the files
  4. Step 2: Confirm the MIME types
  5. Step 3: Reference the icons in HTML
  6. Step 4: Set caching, carefully
  7. Step 5: Verify the response
  8. Make sure the SVG favicon is real vector artwork
  9. A note on rights
  10. What this guide cannot confirm

The short answer

Apache does not need a special module to serve a favicon. It serves the icon like any other static file. Serving it reliably takes four things: put the icon files where Apache can reach them, make sure Apache sends the correct MIME type for each format, point to the files from your HTML, and optionally set caching headers. For a vector logo, the usual setup is an SVG favicon for browsers that support it, plus an ICO or PNG fallback at the site root.

This guide covers Apache HTTP Server 2.4 conventions. The brief included no version-specific evidence, test results or browser support figures. Check the details below against your own server version and the browsers you target.

Which files are involved

  • favicon.svg: a scalable icon drawn from the vector logo. Modern browsers can use it in tabs, and it stays sharp at any pixel density.
  • favicon.ico: the legacy format. Many browsers and tools request it from the site root automatically, even when no HTML tag mentions it.
  • PNG icons (optional): fixed-size raster files, often used for home-screen and touch icons, where some platforms expect bitmaps.

The automatic root request is the reason an ICO file at the top of the document root is still worth keeping. Without it, Apache logs a 404 for every visitor whose browser looks for that file.

Step 1: Place the files

The simplest approach is to copy favicon.ico and favicon.svg into the directory named by your DocumentRoot directive. If several virtual hosts share one icon, or the files live outside the document root, map them with an Alias directive from mod_alias. Then grant access to the source directory.

Alias /favicon.ico /srv/brand-assets/favicon.ico
Alias /favicon.svg /srv/brand-assets/favicon.svg

<Directory "/srv/brand-assets">
    Require all granted
</Directory>

Put this in the virtual host or main server configuration. The paths shown are placeholders, so replace them with your own. Alias is not allowed in .htaccess files. If you only have .htaccess access, place the files in the document root instead.

Step 2: Confirm the MIME types

Browsers rely on the Content-Type header to interpret the file. Recent Apache distributions usually map the svg extension to image/svg+xml and the ico extension to image/vnd.microsoft.icon through the bundled mime.types file. Older or customized installs may lack these mappings, or may use image/x-icon for ICO. If the header is missing or wrong, add the mappings explicitly with mod_mime.

<IfModule mod_mime.c>
    AddType image/svg+xml .svg .svgz
    AddEncoding gzip .svgz
    AddType image/vnd.microsoft.icon .ico
</IfModule>

The svgz lines only matter if you serve pre-compressed SVG. In that case Apache must also send the gzip content encoding, or the browser will try to read compressed bytes as XML. Plain SVG can instead be compressed on the fly with mod_deflate, if your server already uses it.

Step 3: Reference the icons in HTML

Apache delivers the files, but the page tells the browser which ones to use. List the SVG with its type so that browsers without SVG favicon support skip it, and keep the ICO as a fallback.

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

SVG favicon support differs between browsers and has changed over time. The brief contained no current support data, so test in the browsers your audience uses rather than assuming the SVG will appear everywhere.

Step 4: Set caching, carefully

Browsers cache favicons aggressively. Long expiry times reduce repeat requests, but they also mean a redesigned icon can take a while to reach returning visitors. With mod_expires you can choose an expiry period yourself. The values below are an editorial example, not a measured recommendation.

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/svg+xml "access plus 1 week"
    ExpiresByType image/vnd.microsoft.icon "access plus 1 week"
</IfModule>

ExpiresByType matches the Content-Type that Apache actually sends. If your server uses image/x-icon for ICO files, match that value instead. When you replace the icon, changing its filename or adding a version query string to the link tag gets browsers to fetch the new file.

Step 5: Verify the response

Request each icon path and inspect the response headers. Your browser's developer tools network panel works for this, as does a command-line HTTP client. You want a 200 status, the expected Content-Type, and your caching headers if you set them. After changing the configuration, run apachectl configtest, then reload Apache.

Make sure the SVG favicon is real vector artwork

An svg extension does not prove the file contains editable vector paths. Some exported SVGs simply wrap an embedded PNG or JPEG inside an image element. Apache serves that file correctly, but it scales like a bitmap and loses the main advantage of an SVG favicon. Open the file in a text editor or vector application. Path, shape and group elements indicate vector drawing. An image element with embedded base64 data indicates a raster image inside the SVG container. Likewise, a small preview thumbnail of the icon is a raster rendering, not the source artwork.

A full logo rarely reads well at favicon size. A simplified mark, such as an emblem, monogram or single letterform, with fine detail removed, usually works better than a scaled-down wordmark. Converting text to outlines also avoids depending on fonts the browser may not have. An SVG favicon can include a prefers-color-scheme media query in its internal styles to adjust colors for dark interfaces, in browsers that honor it. Keep the file self-contained, because external stylesheets and scripts referenced from an SVG used as an image are generally not loaded.

A note on rights

Being able to download a logo file does not grant permission to alter it or to use it as a site icon. If the favicon is derived from a third-party logo, permission to modify the artwork, use any embedded fonts, and display the trademark has to come from the rights holder or the brand's usage terms.

What this guide cannot confirm

The source material included no confirmed specifics: no Apache version, distribution defaults, browser support tables or performance data. The directives above follow standard Apache 2.4 module behavior. Check the MIME mappings, module availability and browser results on your own server before relying on them.