Create Free Favicons Online
Clear
Show uploaded image here
Copy Code
Copied!
Favicon Tutorial
Upload an image (PNG, JPEG, JPG) to convert it into a favicon. You can either click to upload or drag & drop an image into the designated area. Once uploaded, you'll see options to download the favicon in various sizes.
1. What is a Favicon?
A favicon, short for "favorite icon," is a small, 16x16 pixels or 32x32 pixels, icon associated with a particular website or webpage. It is displayed in the browser's address bar, bookmarks, and tab titles, enhancing the site's identity and visibility.
2. History of the Favicon
- First Introduced: Favicons were first introduced by Microsoft with Internet Explorer 5 in 1999.
- Early Use: Initially, favicons were static .ico files placed in the root directory of a website.
- Evolution: Over time, favicons evolved to support various file formats (like PNG, GIF, and SVG) and sizes to accommodate different devices and resolutions, including high-DPI displays and mobile devices.
3. Usage of Favicons
Favicons are used in various places to enhance user experience and brand recognition:
- Browser Tabs: Displayed on the left side of the page title.
- Bookmarks: Shown next to the title of the saved website.
- History Lists: Appears alongside the title in the browsing history.
- Shortcuts: Used in desktop and mobile browser shortcuts.
- Search Results: Shown in some search engines next to the URL.
4. Steps to Create, Use and Test a Favicon
- Create the Favicon:
- Design: Create a simple and recognizable icon, ideally 16x16 or 32x32 pixels.
- File Formats: Save the icon in .ico format for wide compatibility. Other formats like PNG, GIF, and SVG can also be used for various resolutions and devices.
- Add Favicon to Your Website:
- Save the Favicon: Save the favicon file as
favicon.icoin the root directory of your website. - Include in HTML: Add a link to the favicon in the
<head>section of your HTML file:<link rel="icon" href="/path/to/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/path/to/favicon.ico" type="image/x-icon">
- Save the Favicon: Save the favicon file as
- Additional File Types and Sizes (for various devices and resolutions):
- Create multiple favicon files for different resolutions (e.g., 32x32, 48x48, 96x96, 180x180).
- Use the following HTML to include different favicon types:
<link rel="icon" type="image/png" sizes="32x32" href="/path/to/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="/path/to/favicon-96x96.png"> <link rel="apple-touch-icon" sizes="180x180" href="/path/to/apple-touch-icon.png">
- Testing the Favicon:
- Upload the favicon to your web server.
- Clear your browser cache or open a private/incognito window.
- Check if the favicon appears in the browser tab, bookmarks, and shortcuts.