Skillversitas

HTML Favicon

A favicon is a small icon displayed in the browser tab. Favicons help with brand recognition.

Favicon Tag

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.png" type="image/png">
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="apple-touch-icon.png">

Favicon Formats

ICO

<link rel="icon" href="favicon.ico" type="image/x-icon">

PNG

<link rel="icon" href="favicon-32x32.png" type="image/png" sizes="32x32">
<link rel="icon" href="favicon-16x16.png" type="image/png" sizes="16x16">

SVG

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

Apple Touch Icon

<link rel="apple-touch-icon" href="apple-touch-icon.png">

Case Study: Campus Website Favicon

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Technology University</title>

    <!-- Favicon -->
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon-32x32.png" type="image/png" sizes="32x32">
    <link rel="icon" href="favicon-16x16.png" type="image/png" sizes="16x16">
    <link rel="apple-touch-icon" href="apple-touch-icon.png">
    <link rel="manifest" href="site.webmanifest">

    <meta name="theme-color" content="#1e40af">
</head>
<body>
    <h1>Technology University</h1>
</body>
</html>

Web Manifest

{
    "name": "Technology University",
    "short_name": "UnivTech",
    "icons": [
        {
            "src": "favicon-16x16.png",
            "sizes": "16x16",
            "type": "image/png"
        },
        {
            "src": "favicon-32x32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        {
            "src": "apple-touch-icon.png",
            "sizes": "180x180",
            "type": "image/png"
        }
    ],
    "start_url": "/",
    "display": "standalone",
    "background_color": "#ffffff",
    "theme_color": "#1e40af"
}

Everyday Case Study

Case: A developer needs to create a favicon.

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

    <!-- Apple Touch Icon -->
    <link rel="apple-touch-icon" href="/apple-touch-icon.png">

    <!-- Web Manifest -->
    <link rel="manifest" href="/site.webmanifest">

    <!-- Theme Color -->
    <meta name="theme-color" content="#1e40af">
</head>

Generate a Favicon

<!-- Use an online generator -->
<!-- https://favicon.io -->
<!-- https://realfavicongenerator.net -->

<!-- Or use SVG -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎓</text></svg>">

Best Practices

  1. Multiple sizes: Provide various sizes
  2. Modern formats: Use SVG or PNG
  3. Apple touch icon: For iOS
  4. Web manifest: For PWA
  5. Consistency: Use consistent colors

Summary

A favicon is an important part of a website's identity. Provide multiple formats and sizes for compatibility.