Favicons Free Download
Tarja Rabito
I am. And for anyone with Brave who might be following this, I just launched Brave for the first time this morning, saw the favicons that I expected to see for about five seconds, then watched them all turn into generic globes.
A favicon (/ˈfv.ɪˌkɒn/; short for favorite icon), also known as a shortcut icon, website icon, tab icon, URL icon, or bookmark icon, is a file containing one or more small icons[1] associated with a particular website or web page.[1][2] A web designer can create such an icon and upload it to a website (or web page) by several means, and graphical web browsers will then make use of it.[3] Browsers that provide favicon support typically display a page's favicon in the browser's address bar (sometimes in the history as well) and next to the page's name in a list of bookmarks.[3] Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab, and site-specific browsers use the favicon as a desktop icon.[1]
In March 1999, Microsoft released Internet Explorer 5, which supported favicons for the first time.[4] Originally, the favicon was a file called favicon.ico placed in the root directory of a website. It was used in Internet Explorer's favorites (bookmarks) and next to the URL in the address bar if the page was bookmarked.[5][6][7][4] A side effect was that the number of visitors who had bookmarked the page could be estimated by the requests of the favicon. This side effect no longer works, as all modern browsers load the favicon file to display in their web address bar, regardless of whether the site is bookmarked.[6]
In 2003, the .ico format was registered by a third party with the Internet Assigned Numbers Authority (IANA) under the MIME type image/vnd.microsoft.icon.[8][9] However, when using the .ico format to display as images (e.g. not as favicon), Internet Explorer cannot display files served with this standardized MIME type.[9] A workaround for Internet Explorer is to associate .ico with the non-standard image/x-icon MIME type in web servers.[10]
RFC 5988 established an IANA link relation registry,[11] and rel="icon" was registered in 2010 based on the HTML5 specification. The popular theoretically identifies two relations, shortcut and icon, but shortcut is not registered and is redundant. In 2011 the HTML living standard[12] specified that for historical reasons shortcut is allowed immediately before icon;[13] however, shortcut does not have a meaning in this context.
Additionally, such icon files can be 1616, 3232, 4848, or 6464 pixels in size, and 8-bit, 24-bit, or 32-bit in color depth.[1][3] The ICO file format article explains the details for icons with more than 256 colors on various Microsoft Windows platforms.
This table illustrates the different ways the favicon can be recognized by the web browser. The standard implementation uses a link element with a rel attribute in the section of the document to specify the file's format, name and location.
If links for both PNG and ICO favicons are present, PNG-favicon-compatible browsers select which format and size to use as follows. Firefox and Safari will use the favicon that comes last. Chrome for Mac will use whichever favicon is ICO formatted, otherwise the 3232 favicon. Chrome for Windows will use the favicon that comes first if it is 1616, otherwise the ICO. If none of the aforementioned options are available, Chrome will use whichever favicon comes first, exactly the opposite of Firefox and Safari. Indeed, Chrome for Mac will ignore the 1616 favicon and use the 3232 version, only to scale it back down to 1616 on non-retina devices. Opera will choose from any of the available icons at random.[33]
The current HTML5 specification recommends specifying multiple sizes for the icons, using the attributes rel="icon" sizes="space-separated list of icon dimensions" within a tag.[35] Multiple icon formats, including container formats such as Microsoft .ico and Macintosh .icns files, as well as Scalable Vector Graphics may be provided by including the icon's content type in the format type="file content-type" within the tag.
As of iOS 5, Apple mobile devices ignore the HTML5 recommendation and instead use the proprietary apple-touch-icon method detailed below. The Google Chrome web browser however, will select the closest matching size from those provided in the HTML headers to create 128128 pixel application icons, when the user chooses the Create application shortcuts... from the "Tools" menu.
On Apple iPhones and iPads, as well as Android mobile devices, users can pin web pages as shortcuts icons to their home screen. These shortcut icons look similar to regular apps and web developers can provide dedicated icons for them.
This works for any website. But for iOS to display the shortcut with an icon, the a website needs to supplying a in the section of documents served by the website. If the custom icon is not provided, a thumbnail of the web page will be put on the home screen instead.[38]
The app icon sizes on the different device classes differ. The recommended sizes for the icons are 152x152 for iPads (until iPad 2, released in 2011), 167x167 for iPads with Retina screens (iPad 3 and later) and 180x180 for iPhones. If no icon in the matching size is provided, iOS will pick the largest icon with rel="apple-touch-icon" and scale it automatically.[39]
The icon file referenced by apple-touch-icon is modified to add rounded corners. On the iOS versions prior to iOS 7, a drop shadow, and reflective shine would be added, and apple-touch-icon-precomposed icon may be provided to instruct devices not to apply reflective shine on the image.[37][38]
This also works for any website, but if no favicon is provided, a generic icon is used. As Android app icons are sized in 48x48 points, websites should provide favicons sized in multiples of 48x48 pixels. For modern high resolution devices, Google recommends providing icons in 192x192 pixels.[41]
Android also supports Web Manifest files, which makes it possible to integrate web sites deeper within the system. A Web Manifest is a JSON file, that specifies meta data for a progressive web app. It allows the developer to not only provide the icons but also a short name for display on the home screen as well as theme colors.[42] However, providing a web manifest file is not necessary for the Add to home screen feature to work.[40]
Favicons are often manipulated as part of phishing or eavesdropping attacks against HTTPS web pages. Many web browsers display favicons near areas of the web browser's UI, such as the address bar, that are used to convey whether the connection to a website is using a secure protocol like TLS. By changing the favicon to a familiar padlock image an attacker can attempt to trick the user into thinking they are securely connected to the proper website. Automated man-in-the-middle attack tools such as sslstrip utilize this trick.[46] In order to eliminate this, some web browsers, such as Firefox or Google Chrome, display the favicon within the tab whilst displaying the security status of the protocol used to access the website beside the URL.[47]
Since favicons are usually located at the root of the site directory on the server, they can be employed with some reliability to disclose whether a web client is logged into a given service. This works by making use of the redirect-after-login feature of many websites, by querying for the favicon in a redirect-after-login URL and testing the server response to discern whether the user is given the requested resource (which means they are logged in), or instead redirected to the login page (which means that they are not logged into the service).[48]
A few weeks ago Safari (12.1.1 on macOS 10.13.6) began displaying the wrong favicons for some sites; these were favicons associated with other sites. Although not specifically related to troubleshooting this issue, I've quit and restarted Safari and I've restarted the computer. Does anyone know how to refresh the favicons on my system?
But really, taken as a whole, the response to my piece was about one thing and one thing only: the fact that Safari does not show favicons on tabs and Chrome does. There are a huge number of Daring Fireball readers who use Chrome because it shows favicons on tabs and would switch to Safari if it did.
@nilabiska from what I've experienced in HubSpot, the favicon (which is only used in the browser tab) doesn't include alt text. In researching a little, that's pretty standard. Some resources say icons in general, which are for decorative purposes, don't include alt text. Other resources say you can add it via CSS. I'm not a developer, so I'm not sure on that one. Here's a resource about Sharepoint, but has an interesting discussion about the use of favicons and whether you need alt text.
The icons that we see in the password list are fetched from the website I believe. Most of the websites when a favicon is available, it gets them, but in many cases the 1password is unable to fetch the icon and shows the first two letters of the website. May be it is not actually getting the icons from favicons, but rather from some other source, cause in many cases I see the websites clearly have their favicons but 1password fails to fetch them. To me the biggest irony is that 1password can not fetch the favicon of the 1password forum itself!
PS; I am aware that the icons could be changed manually. But that is not the point.