How to add a Favicon to a Website
Tended:
Status: decay
Step 1
Create a 16 x 16px svg image (this is the size of the icon in the browser tab). Name the file: favicon.svg
.
Step 2
Upload your image to RealFaviconGenerator and generate your favicon file package.
Move your .svg
image and the following files from the package to the root of your site's public directory:
- ▪
favicon.ico
- ▪
apple-touch-icon.png
- ▪
android-chrome-192x192.png
- ▪
android-chrome-512x512.png
Step 3
Add the following link elements to your .html
file:
/index.html
<!DOCTYPE html> <html lang="en"> <head> <link rel="icon" href="favicon.ico" sizes="any" /> <!-- 32×32 --> <link rel="icon" href="favicon.svg" type="image/svg+xml" /> <link rel="apple-touch-icon" href="apple-touch-icon.png" /> <!-- 180×180 --> <link rel="manifest" href="site.webmanifest" /> ...
Step 4
Create a site.webmanifest
file in the root of your site's public directory. Add the following:
/site.webmanifest
{ "name": "Brad Woods' Digital Garden", // shown if there isn't enough room for name's value "short_name": "Brad Woods", "icons": [ { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" }, { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" } ], // theme_color and background_color should match your favicon "theme_color": "#c15a58", "background_color": "#1c1c1c", "display": "standalone" }
Step 5
Deploy your work and test at RealFaviconGenerator.