Favicon Checker

How to Add a Favicon to Your Website

  1. Create your favicon image (see guidelines below).
  2. Save your favicon file (e.g., favicon.ico, favicon.png) in the root directory of your website.
  3. Add the following line in the <head> section of your HTML: 
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
  4. If using multiple formats or sizes, you can specify them like this: 
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  5. Upload your favicon file(s) and updated HTML to your web server.

Favicon Guidelines

  • Size: Common sizes are 16x16, 32x32, and 48x48 pixels. For high-resolution displays, consider 64x64 or larger.
  • Format: ICO, PNG, and SVG are widely supported. ICO can contain multiple sizes in one file.
  • SVG vs PNG:
    • SVG: Scalable, smaller file size, ideal for simple designs.
    • PNG: Better for complex designs, wider browser support.
  • Design Tips:
    • Keep it simple and recognizable at small sizes.
    • Use bold shapes and limited colors.
    • Ensure good contrast for visibility in browser tabs.
  • Testing: Test your favicon across different browsers and devices to ensure compatibility and visibility.
Get weekly top websites delivered to your inbox, every monday. No spam, only inspiration.
Unsubscribe anytime.