favicon (short for favorite icon ), also known as the shortcut icon, website icon , tab icon , URL icon , or bookmark icon , is a file containing one or more small icons, associated with a particular website or web pages. A web designer can create such icons and upload them to websites (or web pages) in several ways, and the graphical web browser will then use them. Browsers that provide favicon support usually display the page favicon in the browser's address bar (sometimes in history too) and next to the page names in the bookmarks list. Browsers that support the tabbed document interface typically display the page favicon next to the page title on the tab, and site-specific browsers use the favicon as a desktop icon.
Favicons can also be used to have favorite sites without text, saving space.
Video Favicon
Histori
In March 1999, Microsoft released Internet Explorer 5, which supports favicons for the first time. Initially, the favicon is a file called favicon.ico that is placed in the website's root directory. It's used in Internet Explorer's favorites (bookmarks) and next to the URL in the address bar if the page is bookmarked. The side effect is that the number of visitors who have bookmarked the page can be estimated by a favicon request. These side effects are no longer working, as all modern browsers load favicon files to display in their web address bar, regardless of whether the site is bookmarked or not. Standardization
The favicon standardized by the World Wide Web Consortium (W3C) in its HTML 4.01 recommendation, released in December 1999, and later on the recommendation of XHTML 1.0, was released in January 2000. The standard implementation uses link elements with the relation of the attribute in the & lt; head & gt; in the document to specify file format and file name and location. Unlike in the previous scheme, the file can be in the website directory and has an image file format.
In 2003, the .ico format was registered by a third party with the Internet Assignment Number Authority (IANA) under the MIME image/vnd.microsoft.icon type. However, when using the .ico format to be displayed as an image (eg not as a favicon), Internet Explorer can not display files presented with this standard MIME type. A solution for Internet Explorer is to associate .ico with the MIME image/x-icon type on the Web server.
RFC 5988 creates an IANA relationship relation link, and rel = "icon" is registered in 2010 based on the HTML5 specification. Popular & lt; link rel = "shortcut icon" type = "image/x-icon" href = "favicon.ico" & gt; theoretically identifies two relations, "shortcuts " and " icon ", but "shortcut " is unlisted and redundant. In 2011 the HTML live standard specifies that for historical reasons "shortcuts " are allowed immediately before " icon "; However, "the shortcut " has no meaning in this context.
Legacy
Internet Explorer 5-10 only supports ICO file formats. Netscape 7 and Internet Explorer versions 5 and 6 show only the favicon when the page is bookmarked, and not just when the page is visited as in the next browser.
Maps Favicon
Browser Implementation
The following table illustrates the main web browser that supports various features. The version number shows the initial version of the supported feature.
Support file format
The following table illustrates the image file format support for favicon.
In addition, such icon files can be 16 "16", 32 "32" 48 "48" or 64 "64 pixels, and 8 - bit, 24 - bit or 32 - bit in depth color. The ICO file format article explains details for icons with more than 256 colors on various Microsoft Windows platforms.
Use of favicon
This table illustrates the various areas of the browser where favicons can be displayed.
Opera Software adds the ability to change favicon at Speed ​​Dial in Opera 10.
How to use
This table illustrates the various ways favicon can be recognized by a web browser. The default implementation uses link elements with the rel attribute in the & lt; head & gt; in the document to specify file format and file name and location.
If links to PNG and ICO favicons exist, the PNG-favicon-compatible browser selects the format and size used as follows. Firefox and Safari will use the last favicon. Chrome for Mac will use any favicon formatted by ICO, if there is no 32ÃÆ'â € "32 favicon. Chrome for Windows will use the favicon that comes first if 16ÃÆ' â €" 16, or ICO. If no options are available above, both Chromes will use which favicon first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore 16ÃÆ'â € "16 favicon and use 32ÃÆ'â €" 32 version, only to lower it back to 16ÃÆ'â € "16 on non-retina devices. Opera will select from one of the icons available completely randomly.
Only SeaMonkey does not fetch the favicon.ico file in the website root by default.
Device support
For Apple devices with iOS operating system version 1.1.3 or later, as well as some Android devices, you can provide a custom icon that users can show on their Home screens using the Web Clips feature (Called Add to Home Screen in Mobile Safari). This feature is enabled by providing & lt; link rel = "apple-touch-icon"... & gt; in the & lt; head & gt; document served by the website. If a custom icon is not provided, the thumbnail of the web page will be placed on the main screen.
The recommended base size for this icon is 60ÃÆ'â € "60 pixels; for best view on iPhone 4 high resolution screen, icon size 120ÃÆ'â € "120 pixels is recommended.
For iPad and iPad 2, the base size is 76ÃÆ'â € "76 pixels. For the third generation iPad, the high resolution size will be 152 × 152 pixels. Android tablets [via Chrome] prefer PNG 192x192 icon.
The icon files referenced by apple-touch-icon are modified to add rounded corners, shadows, and reflective shadows. Alternatively, the apple-touch-icon-precomposed icon can be given to instruct the device not to apply a reflective gloss to the image.
- With rounded corners, added by iOS
& lt; link rel = "apple-touch-icon" href = "somepath/image.png" & gt;
- Without reflective shine
& lt; link rel = "apple-touch-icon-precomposed" href = "somepath/image.png" & gt;
No HTML required by browser or mobile device to retrieve these icons. Website root is the default location for the apple-touch-icon-precomposed.png and apple-touch-icon.png files (in order of priority).
Recommended HTML5 for icons of various sizes
The current HTML5 specification suggests specifying multiple sizes for icons, using the rel = "icon" sizes = " list of space-dimensional icons separated by " in in the & lt ; link & gt; tags. Various icon formats, including container formats such as Microsoft.ico and Macintosh.icns files, as well as Scalable Vector Graphics can be provided by including the icon content type in the file type = " file-content type " & lt; tag link & gt; .
On iOS 5, Apple mobile devices ignore HTML5 recommendations and instead use the apple-touch-icon method specified above. However, the Google Chrome web browser, will select the closest match size from that provided in the HTML header to create 128,000 128 pixel app icons, when the user selects Create application shortcuts... from the "Tools" menu.
animated favicons
Various browsers such as Chrome, Firefox, and Opera support favicon animation. The bug report has been open for Firefox since 2001 asking for a way to disable the feature.
Limitations and criticism
Because of the need to always check it in a fixed location, the favicon can cause artificially slow page load times and 404 entries that are not required in server logs if they do not exist.
W3C does not standardize rail attributes, so there are other keywords like shortcut icons that are also accepted by user-agents.
Favicons are often manipulated as part of phishing or tapping attacks against HTTPS web pages. Many web browsers display a favicon near the web browser's UI area, such as the address bar, used to convey whether the connection to the website is using secure protocols such as TLS. By turning the favicon into a familiar padlock image, an attacker can try to trick users into thinking that they are securely connected to the right website. Automatic man-in-the-middle attack tools like SSLStrip take advantage of this trick. To eliminate this, some web browsers display the favicon in the tab when displaying the protocol security status used to access the website next to the URL.
Since favicons are typically located at the root of the site directory on the server, they can be used with some reliability to reveal whether the web client goes into a particular service. This works by utilizing the after-login redirection feature of many websites, by asking the favicon in the after-login redirect URL and testing the server's response to differentiate whether the user is being given the requested resource (meaning they are logged in), or instead redirected to the page login (which means that they do not log in to the service).
References
External links
- Favicons in Curlie (based on DMOZ)
- Proposals with the W3C web standards organization on how to add Favicon
- Create a Stack Overflow favicon
- Systems and Methods Involving the Favicons 2008 patent application
- What is a favicon?
Source of the article : Wikipedia
0 Comments