Using the Favicon Code Generator
This tool generates the standard block of HTML code needed to properly display favicons across all modern browsers and devices. It assumes you have already generated the various icon files and uploaded them to the server.
- Enter Your Path: In the input field, enter the full, absolute URL to the directory where your favicon files are located (e.g.,
https://www.mysite.com/icons/). - Generate Code: Click the "Generate" button.
- Copy and Paste: Copy the generated HTML block and paste it into the
<head>section of your website's HTML documents.
Why So Many Favicon Files?
In the past, a single favicon.ico file was enough. Today, different platforms and devices require their own specific icon formats and sizes for optimal display. A comprehensive favicon setup ensures your brand looks great everywhere, from a browser tab to a pinned app on a mobile home screen.
Here is a breakdown of the files referenced in the generated code:
| File | Purpose |
|---|---|
apple-touch-icon.png | Used when a user saves your website to their home screen on an iPhone or iPad. The recommended size is 180x180 pixels. |
favicon-32x32.png | The standard favicon size for most modern desktop browsers. |
favicon-16x16.png | A smaller favicon size used in some contexts, like the browser's bookmarks bar. |
site.webmanifest | A web app manifest file. It provides information about your web application for Android devices, allowing users to "install" it to their home screen with a proper icon and theme color. |
safari-pinned-tab.svg | A monochrome SVG icon used when a user pins your site's tab in Safari on macOS. The color attribute defines the color the icon will be rendered in. |
What About favicon.ico?
While modern browsers primarily use the PNG versions specified in the <link> tags, it is still a best practice to have a favicon.ico file in the root directory of your website. Some older browsers, crawlers, and services will automatically look for this file by default. A .ico file can also contain multiple sizes (e.g., 16x16 and 32x32) in a single file.
The standard HTML for this is <link rel="icon" href="/favicon.ico" sizes="any">. While this generator omits it for simplicity (as modern browsers will pick the PNGs), including it is a good fallback.
How to Generate the Icon Files
This tool only generates the HTML code. To create the actual image files (.png, .svg, .webmanifest, etc.), you can use a dedicated online favicon generator service such as Quackit's Favicon Generator. These services typically take a single high-resolution source image and automatically generate all the required sizes and formats for you in a downloadable zip file.
Once you have those files, simply upload them to the directory you specified in this generator, and paste the generated HTML into your site's <head>.