Difference between revisions of "Favicon"

From Seobility Wiki
Jump to: navigation, search
(→‎Favicon on desktop)
(→‎Related links)
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<seo title="Favicon - Definition" metadescription="Everything you should know about favicons and their applications explained to you by Seobility." />
+
<seo title="What is a Favicon? Definition and Explanation" metadescription="A favicon is a small symbol which helps users to recognize a website. Usually, it’s a simplified version of a logo or figurative mark. Learn more ..." />
  
 
== Definition ==
 
== Definition ==
 +
[[File:Favicon.png|thumb|450px|right|alt=Favicon|'''Figure:''' Favicon - Author: Seobility - License: [[Creative Commons License BY-SA 4.0|CC BY-SA 4.0]]|link=https://www.seobility.net/en/wiki/images/2/26/Favicon.png]]
 +
A favicon is a small symbol which helps users to recognize a website. Usually, it’s a simplified version of a logo or figurative mark, which is displayed next to the page title in a browser tab. For users who use a lot of tabs at the same time or who attach tabs in their browser, the small square icon can sometimes be the only orientation aid between websites that are currently opened.
  
−
A favicon is a small symbol which helps users to recognize a website. Usually, it’s a simplified version of a logo or figurative mark, which is displayed next to the page title in a browser tab. For power users who use a lot of tabs at the same time or who attach tabs in their browser, the small square icon can sometimes be the only orientation aid between websites that are currently opened. As an example you can see the favicon of seobility.net here:
+
== Favicon on desktop ==
 +
 
 +
About 20 years ago, the development history of favicons began with the release of Internet Explorer 5, where 16x16 pixels were available for displaying the favicon of a site. Even if the resolution later increased to 32*32 and 48*48 pixels, the 16-pixel image in .ico format is still considered a common web standard for a favicon today.
 +
 
 +
With the increasing number of browsers and end devices, the demands placed on a favicon became ever higher. The .ico format was soon complemented by .png, .gif, .jpg, and finally svg with the first two supported by all major browsers. If possible, a favicon is stored in the [[Root Directory|root directory]] of a site, because browsers automatically search for a favicon there. If a browser does not find the expected files there, this leads to a [[404 Not Found|404 status]] of the web server, which not only slows down the loading time of a site but also has a negative effect on its [[Usability|usability]]. If you want to ensure that your favicon is found by browsers, you should specify its path in the HTML head using [[Meta Tags|meta tags]]:
 +
 
 +
<pre><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"></pre>
 +
 
 +
<pre><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"></pre>
  
−
[[File:Favicon-seobility.png|link=|alt=Favicon]]
+
On our site seobility.net this meta tag looks like this:
  
−
Image: Favicon of Seobility, Author: Seobility
+
<pre><link href="https://www.seobility.net/dynamiccontent/www.seobility.net/favicon.gif" rel="shortcut icon" type="image/x-icon" ></pre>
  
 +
More recently, the [[SVG (Scalable Vector Graphics)|.svg]] format was added, which, to the regret of many web designers, has been a niche application for favicons so far, although this format could be scaled particularly well. By now almost all modern browsers can display .svg graphics as favicon. Only Safari requires .svg as a format for a favicon. So far this function can only be used on desktop.
 
<html>
 
<html>
 
<div class="checkform">
 
<div class="checkform">
Line 20: Line 31:
 
</div>
 
</div>
 
</html>
 
</html>
−
 
−
== Favicon on desktop ==
 
−
 
−
Almost 20 years ago, the development history of favicons began with the release of Internet Explorer 5, where 16x16 pixels were available for displaying the favicon of a site. Even if the resolution later increased to 32 and 48 pixels, the 16-pixel image in .ico format is still considered a common web standard for a favicon today.
 
−
 
−
With the increasing number of browsers and end devices, the demands placed on a favicon became ever higher. The .ico format was soon complemented by .png, .gif and .jpg, with the first two supported by all major browsers. If possible, a favicon is stored in the [[Root Directory|root directory]] of a site, because browsers automatically search for a favicon there. If a browser does not find the expected files there, this leads to a 404 status of the web server, which not only slows down the loading time of a site but also has a negative effect on its [[Usability|usability]]. If you want to ensure that your favicon is found by browsers, you should specify its path in the HTML head using [[Meta Tags|meta tags]]:
 
−
 
−
<pre><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"></pre>
 
−
 
−
<pre><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"></pre>
 
−
 
−
On our site seobility.net this meta tag looks like this:
 
−
 
−
<pre><link href="<nowiki>https://www.seobility.net/favicon.ico</nowiki>" rel="shortcut icon" type="image/x-icon" ></pre>
 
−
 
−
More recently, the [[SVG (Scalable Vector Graphics)|.svg]] format was added, which, to the regret of many web designers, has been a niche application for favicons so far, although this format could be scaled particularly well. While Opera and Firefox now support the vector-based image format, Chrome, Edge and Internet Explorer have not yet been able to handle it. Only Safari requires .svg as a format for a favicon. So far this function can only be used on desktop.
 
  
 
== Favicon on mobile devices ==
 
== Favicon on mobile devices ==
Line 57: Line 52:
 
== Web services ==
 
== Web services ==
  
−
Since no standard has been established in the mobile sector, the correct integration of favicons has become a challenge for web developers. Fortunately, as a developer and graphic designer you do not necessarily have to create the individual files by yourself in Photoshop or other software. Websites such as realfavicongenerator.net can help with the conversion of images into favicons. Since parameters such as color and app name are also entered into the configurator, the generator can immediately create all necessary .xml and .json files. Even .svg files for Safari can be generated there. You can easily check if you have uploaded the files and set the meta tags correctly, by accessing your own site with a browser.
+
Since no standard has been established in the mobile sector, the correct integration of favicons has become a challenge for web developers. Fortunately, as a developer and graphic designer you do not necessarily have to create the individual files by yourself in Photoshop or other software. Websites such as [https://realfavicongenerator.net realfavicongenerator.net] can help with the conversion of images into favicons. Since parameters such as color and app name are also entered into the configurator, the generator can immediately create all necessary .xml and .json files. Even .svg files for Safari can be generated there. You can easily check if you have uploaded the files and set the meta tags correctly, by accessing your own site with a browser.
  
 
== Graphic design ==
 
== Graphic design ==
Line 74: Line 69:
 
[[Category:Web Development]]
 
[[Category:Web Development]]
 
[[Category:Web Design]]
 
[[Category:Web Design]]
 +
 +
<html><script type="application/ld+json">
 +
    {
 +
      "@context": "https://schema.org/",
 +
      "@type": "ImageObject",
 +
      "contentUrl": "https://www.seobility.net/en/wiki/images/2/26/Favicon.png",
 +
      "license": "https://creativecommons.org/licenses/by-sa/4.0/",
 +
      "acquireLicensePage": "https://www.seobility.net/en/wiki/Creative_Commons_License_BY-SA_4.0"
 +
    }
 +
    </script></html>
 +
 +
{| class="wikitable" style="text-align:left"
 +
|-
 +
|'''About the author'''
 +
|-
 +
| [[File:Seobility S.jpg|link=|100px|left|alt=Seobility S]] The Seobility Wiki team consists of seasoned SEOs, digital marketing professionals, and business experts with combined hands-on experience in SEO, online marketing and web development. All our articles went through a multi-level editorial process to provide you with the best possible quality and truly helpful information. Learn more about <html><a href="https://www.seobility.net/en/wiki/Seobility_Wiki_Team" target="_blank">the people behind the Seobility Wiki</a></html>.
 +
|}
 +
 +
<html><script type="application/ld+json">
 +
{
 +
  "@context": "https://schema.org",
 +
  "@type": "Article",
 +
  "author": {
 +
    "@type": "Organization",
 +
    "name": "Seobility",
 +
    "url": "https://www.seobility.net/"
 +
  }
 +
}
 +
</script></html>

Latest revision as of 19:18, 6 December 2023

Definition

Favicon
Figure: Favicon - Author: Seobility - License: CC BY-SA 4.0

A favicon is a small symbol which helps users to recognize a website. Usually, it’s a simplified version of a logo or figurative mark, which is displayed next to the page title in a browser tab. For users who use a lot of tabs at the same time or who attach tabs in their browser, the small square icon can sometimes be the only orientation aid between websites that are currently opened.

Favicon on desktop

About 20 years ago, the development history of favicons began with the release of Internet Explorer 5, where 16x16 pixels were available for displaying the favicon of a site. Even if the resolution later increased to 32*32 and 48*48 pixels, the 16-pixel image in .ico format is still considered a common web standard for a favicon today.

With the increasing number of browsers and end devices, the demands placed on a favicon became ever higher. The .ico format was soon complemented by .png, .gif, .jpg, and finally svg with the first two supported by all major browsers. If possible, a favicon is stored in the root directory of a site, because browsers automatically search for a favicon there. If a browser does not find the expected files there, this leads to a 404 status of the web server, which not only slows down the loading time of a site but also has a negative effect on its usability. If you want to ensure that your favicon is found by browsers, you should specify its path in the HTML head using meta tags: 

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

On our site seobility.net this meta tag looks like this: 

<link href="https://www.seobility.net/dynamiccontent/www.seobility.net/favicon.gif" rel="shortcut icon" type="image/x-icon" >

More recently, the .svg format was added, which, to the regret of many web designers, has been a niche application for favicons so far, although this format could be scaled particularly well. By now almost all modern browsers can display .svg graphics as favicon. Only Safari requires .svg as a format for a favicon. So far this function can only be used on desktop.

Favicon Checker

Check if your favicon is linked correctly

Favicon on mobile devices

With the release of its smartphone operating system iOS, Apple has increasingly relied on web apps. Therefore, favicons have become a technical necessity even in higher resolutions. In addition to Apple, Google with Android is also increasingly relying on favicons. The icon is displayed here as an app icon on the home screen when saving a site. Due to the sometimes high resolutions of smartphone screens, an image of 512 pixels page length is required. The higher resolution brings the advantage of more complex design options for your favicon.

While the integration of favicons for desktop browsers only requires storing them in the root directory, the installation of a favicon for mobile devices and tablets is much more complex. The requirements of the platforms regarding a favicon are very different.

In order for iOS to find the so-called touch icons, their storage location must be specified via a meta tag in the head area of the HTML code. While in the past a large number of different sizes were necessary, Apple has recently been content with a 180-pixel .png file. 

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

The integration on Android is somewhat more complex. A meta tag is used to specify the location of a .json file. This .json file, in turn, links to the icons in .png format. This so-called manifest.json is also the data source for the app name and color scheme of a site. This standard format is supported by Chrome for Android and Opera Mini only. A detailed description of the structure of the .json file can be found at https://developer.mozilla.org/en-US/docs/Web/Manifest. 

<link rel="manifest" href="/manifest.json">

Icons in the start menu of Windows

Unfortunately, Windows does not use the .json format manifest when placing a site in its start menu. Microsoft requires a proprietary .xml file, which contains similar information to the manifest.json, but has a different format. The location of this .xml file does not have to be specified as a meta tag in the header, as Windows always expects the file in the root directory of a site.

Web services

Since no standard has been established in the mobile sector, the correct integration of favicons has become a challenge for web developers. Fortunately, as a developer and graphic designer you do not necessarily have to create the individual files by yourself in Photoshop or other software. Websites such as realfavicongenerator.net can help with the conversion of images into favicons. Since parameters such as color and app name are also entered into the configurator, the generator can immediately create all necessary .xml and .json files. Even .svg files for Safari can be generated there. You can easily check if you have uploaded the files and set the meta tags correctly, by accessing your own site with a browser.

Graphic design

One problem that cannot be solved automatically is the difficulty to create an icon that is displayed in an appealing way in both high and low resolutions. We would recommend you to leave out details for low resolutions without impairing the recognizability of your favicon.

Bottom line

Favicons have evolved a lot in recent years and are now more than just icons in browser tabs. Especially with regard to usability, favicons have become an indispensable tool for recognition and branding. In order to create an appealing icon, you no longer have to rely on image processing software and text editors. Thanks to favicon generators on the internet, all required files can be created quickly and easily. The technical challenges, however, should not distract from the actual problem: creating a graphical symbol that is recognizable in large and small, yet unique.

Related links

About the author
Seobility S
The Seobility Wiki team consists of seasoned SEOs, digital marketing professionals, and business experts with combined hands-on experience in SEO, online marketing and web development. All our articles went through a multi-level editorial process to provide you with the best possible quality and truly helpful information. Learn more about the people behind the Seobility Wiki.