Difference between revisions of "Favicon.ico"

From Helpful
Jump to: navigation, search
m (apple-touch-icon)
m (Explicitly including (HTML))
 
(One intermediate revision by the same user not shown)
Line 19: Line 19:
  
  
Some browsers automatically request for <tt>favicon.ico</tt>, often only in the site root.
+
Some browsers automatically request <tt>favicon.ico</tt>, typically only under the host root.
  
Others will only do so when pages explicitly reference them; see notes below.
+
Others will only do so when HTML explicitly references it; see notes below.
  
  
Line 31: Line 31:
  
 
Further notes:
 
Further notes:
* The value for <tt>rel</tt> isn't standardized. Microsoft's suggestion did not consider standards {{comment|(they used "shortcut icon" but did not consider that rel is seen as space-separated token set instead of a string)}}. Some browsers are randomly picky, so in the wild you see:
+
* The value for <tt>rel</tt> isn't standardized. Microsoft's suggestion did not consider standards {{comment|(they used "shortcut icon" but did not consider that rel is seen as space-separated token set instead of a string)}}. Some browsers were randomly picky, so in the wild you see:
 
** <tt>rel="icon"</tt> {{comment|(fairly usual)}}{{verify}}
 
** <tt>rel="icon"</tt> {{comment|(fairly usual)}}{{verify}}
 
** <tt>rel="shortcut icon"</tt>  
 
** <tt>rel="shortcut icon"</tt>  
Line 38: Line 38:
  
 
* ICO's mime type is <tt>image/vnd.microsoft.icon</tt>. Before its definition, there was no standard, though <tt>image/x-icon</tt> was the conventional value (with a little less meaning).
 
* ICO's mime type is <tt>image/vnd.microsoft.icon</tt>. Before its definition, there was no standard, though <tt>image/x-icon</tt> was the conventional value (with a little less meaning).
 
  
 
==Creating==
 
==Creating==

Latest revision as of 15:07, 11 June 2019

Related to web development, hosting, and such: (See also the webdev category)
jQuery: Introduction, some basics, examples · plugin notes · unsorted

Server stuff:

Dynamic server stuff:

This article/section is a stub — probably a pile of half-sorted notes, is not well-checked so may have incorrect bits. (Feel free to ignore, fix, or tell me)

favicon.ico

The favicon is the 16x16 pixel icon beside the url in the address bar, in tabs, and (as seems the original intent) in bookmarks.


There are only ad-hoc conventions for the format and the way it should be referenced.

All browsers ought to support ICO, PNG, and GIF.

Some allow animaged GIF, JPEG, and/or APNG. See also this table.


Most browsers will support images larger than 16x16 and would scale them down as necessary (32x32, 48x48, 64x64, and 128x128 are seen with some frequency). (though for those that show 16x16 pixels, an actual 16x16 image will often look cleaner than a scaled-down image)


Some browsers automatically request favicon.ico, typically only under the host root.

Others will only do so when HTML explicitly references it; see notes below.


Explicitly including (HTML)

You can add one via HTML (this example for PNG) using something like:

<link rel="icon" href="/img/app-icon.png" type="image/png">


Further notes:

  • The value for rel isn't standardized. Microsoft's suggestion did not consider standards (they used "shortcut icon" but did not consider that rel is seen as space-separated token set instead of a string). Some browsers were randomly picky, so in the wild you see:
    • rel="icon" (fairly usual)(verify)
    • rel="shortcut icon"
    • rel="SHORTCUT ICON" (some older browsers would take only this)(verify)
    • rel="ICON"
  • ICO's mime type is image/vnd.microsoft.icon. Before its definition, there was no standard, though image/x-icon was the conventional value (with a little less meaning).

Creating

Various image editing programs (such as GIMP) can save to the ICO format, there are utilities like png2ico and such out there, and a whole load of websites that do the work for you (e.g. html-kit.com/favicon)

specific platforms

apple-touch-icon

iOS (iPhone, iPad, iPod Touch) will use these typically larger images, as may some Android devices and the odd browser feature, often for nicer-looking icons on a home screen or such.


Muc​h the same story as favicon, in that it will look in pre-set places (/apple-touch-icon.png and /apple-touch-icon-precomposed.png) unless you tell it where to go, using:

<link rel="apple-touch-icon" href="/iphone.png"/>

or

<link rel="apple-touch-icon-precomposed" href="/iphone_precomposed.png"/>

Notes:

  • apple-touch-icon-precomposed means the iOS won't add effects like a shine


See also:


android-chrome

Targeted 192×192 and 128×128 icons, preferring the 192, apparently mentioning 128 for overlap with some others. If you declare many sizes, It seems to pick the largest it can find (≤192).

Declard like:

<link rel="icon" type="image/png" href="/fav192.png" sizes="192x192"/>

(earlier versions also used the apple touch icon, and had 196x196 icons)


See also: