There Is a Little Man Sitting on My Firefox Window Tab, What Is That?
The favorites icon (favicon) can be confusing when seen for the first time due to a Web browser upgrade, or switching to a different browser. When you visit a website that has a favicon available for the browser to download, the browser displays the icon next to the site name in its favorites menu. As the major browsers switched to tabbed browsing systems in recent versions, they also began displaying favicons next to the title in site's browser tab.
Other People Are Reading
-
What Is a Favicon?
-
First supported by Microsoft’s Internet Explorer 5 browser, a favicon is a small graphic icon 16 pixels by 16 pixels in size. Originally, you had to place favicons in the root directory of the website and give them the name “favicon.ico” before browsers could detect and display them. In 1999, the World Wide Web Consortium (W3C) added favicons to the HTML 4.01 specification, allowing you to place them anywhere within a site. You can then direct the browser to the file using a standard link.
Favicon Benefits
-
Favicons are one of the small touches that allow a website to present a more professional image. Many websites still do not use favicons, allowing sites that do use them to stand out. A well-designed favicon can help enhance your brand and increase the number of times a user sees your logo, helping it to take root in their memory. Favicons are also useful to your site visitors, helping them identify your site among many others in their favorites menu. A familiar picture is much simpler to locate than a standard text entry, allowing your site to stand out so users can find it faster.
-
Creating Favicons
-
You can create a favicon for your website in any graphics package that supports the .ico file format. Adobe Photoshop is the most commonly used package for creating favicons, but does not support saving in the .ico format by default. You can add this functionality by installing a free plugin. The favicon size of 16 pixels by 16 pixels can prove difficult to use, so it's easier to create a 64 pixel by 64 pixel image, then reduce the canvas to the correct size. Remember to save the image as favicon.ico.
Add a Favicon to Your Site
-
Upload the image to the root of your website using a file transfer protocol (FTP) application. Add the following line to the HTML head element in your website's pages:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
This allows you to tell the browser the name of the favicon file and where it's located. Using this method, you can place the favicon file anywhere within your website's structure, but it makes sense to keep the favicon file in the root directory for non-compliant browsers or devices. You can also set up different favicons for different pages, by pointing to different .ico files in the HTML link tag.
-
References
Resources
- Photo Credit Patrik Stollarz/Getty Images News/Getty Images
