Difference between revisions of "Favicon"
| Line 4: | Line 4: | ||
[[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]] | [[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 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. | 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. | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
== Favicon on desktop == | == Favicon on desktop == | ||
| Line 31: | Line 20: | ||
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. | 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. | ||
| + | <html> | ||
| + | <div class="checkform"> | ||
| + | <div class="hl"> | ||
| + | <h3>Favicon Checker</h3> | ||
| + | <p>Check if your favicon is linked correctly</p> | ||
| + | </div> | ||
| + | <form action="https://www.seobility.net/en/seocheck/check#favicon" method="get"> | ||
| + | <input type="text" name="url" required="required" placeholder="https://www.example.com/"><input type="submit" value="Check Favicon"> | ||
| + | </form> | ||
| + | </div> | ||
| + | </html> | ||
== Favicon on mobile devices == | == Favicon on mobile devices == | ||
Revision as of 16:13, 1 September 2020
Contents
Definition
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.
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 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/favicon.ico" 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. 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 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">
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.