Changes: Favicon

Revision as of 17:07, 14 July 2021

A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage. The favicon of this wiki is . Favicons are usually an ICO type image, but any type of image can be linked to as a favicon. It is better to have an ICO image as a favicon so it will have a higher chance to be rendered properly. Browsers that provide favicon support typically display a page's favicon in the browser's address bar which is next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab.

Favicons are linked to the web page using the HTML <link /> element.

Here is an example of what the favicon looks like on a tab bar:

Browser Support

Browser	ICO	PNG	GIF	animated GIFs	JPEG	APNG	SVG
Google Chrome	Yes	4.0	4.0	No	4.0	No	No
Internet Explorer	4.0	8.0	No	No	8.0	No	No
Mozilla Firefox	Yes	Yes	Yes	Yes	Yes	3.0	No^[5]
Opera	Yes	Yes	Yes	Yes	Yes	Yes	9.6
Safari	Yes	4.0	4.0	No	4.0	No	No

Usage

The following format is cross-browser compatible and is supported by Internet Explorer, Firefox, Chrome, and Opera.

<link rel="icon" href="http://www.example.com/myicon.ico" />

The following is also acceptable:

<link rel="icon" href="/somepath/myicon.ico" />

You can also use any type of image as a favicon:

<link rel="icon" href="/somepath/BG.png" />

or

<link rel="icon" href="/somepath/Logo.gif" />

Create your own favicon

Create your own favicon

[5]

@@ Line 1: / Line 1: @@
-A '''favicon''' (short for '''favorites icon'''), also known as a '''shortcut icon''', '''website icon''', '''[[URL]] icon''', or '''bookmark icon''' is a 16×16 or 32×32 pixel square [http://en.wikipedia.org/wiki/Icon_%28computing%29 icon] associated with a particular [http://en.wikipedia.org/wiki/Website website] or [http://en.wikipedia.org/wiki/Webpage webpage]. The favicon of this wiki is <span class="plainlinks">http://images2.wikia.nocookie.net/__cb20100817235433/htmlcss/images/archive/2/26/20100820192622!Favicon.png</span>. Favicons are usually an ICO type image, but any type of image can be linked to as a favicon. It is better to have an ICO image as a favicon so it will have a higher chance to be rendered properly.<!-- Is this true? --> [[Web Browser|Browsers]] that provide favicon support typically display a page's favicon in the browser's address bar which is next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab.
+A '''favicon''' (short for '''favorites icon'''), also known as a '''shortcut icon''', '''website icon''', '''[[URL]] icon''', or '''bookmark icon''' is a 16×16 or 32×32 [[pixel]] square {{Wp|Icon (computing)|icon}} associated with a particular [[website]] or [[webpage]]. The favicon of this wiki is <span class="plainlinks">http://images2.wikia.nocookie.net/__cb20100817235433/htmlcss/images/archive/2/26/20100820192622!Favicon.png</span>. Favicons are usually an [[ICO]] type image, but any type of image can be linked to as a favicon. It is better to have an ICO image as a favicon so it will have a higher chance to be rendered properly.<!-- Is this true? --> [[Web Browser|Browsers]] that provide favicon support typically display a page's favicon in the browser's address bar which is next to the page's name in a list of bookmarks. Browsers that support a tabbed document interface typically show a page's favicon next to the page's title on the tab.
+Favicons are linked to the web page using the [[HTML]] <code>[[Link|&lt;link /&gt;]]</code> element.
-Here is an example of what the favicon looks like on a tab bar:
-[[File:Favicon_Example.png|left]]
+Here is an example of what the favicon looks like on a tab bar: [[File:Favicon_Example.png|link=]]
+<br />
 ==Browser Support==
 {| class="wikitable" style="text-align: center;"
 !Browser
+![[ICO]]
-![http://en.wikipedia.org/wiki/ICO_%28file_format%29 ICO]
+![[PNG]]
-![http://en.wikipedia.org/wiki/Portable_Network_Graphics PNG]
+![[GIF]]
-![http://en.wikipedia.org/wiki/Graphics_Interchange_Format GIF]
 ![http://en.wikipedia.org/wiki/Animated_GIF#Animated_GIF animated GIFs]
+![[JPEG]]
-![http://en.wikipedia.org/wiki/JPEG_File_Interchange_Format JPEG]
+![[APNG]]
-![http://en.wikipedia.org/wiki/APNG APNG]
+![[SVG]]
-![http://en.wikipedia.org/wiki/Scalable_Vector_Graphics SVG]
 |-
 |[[Google Chrome]]
@@ Line 41: / Line 42: @@
 | class="table-yes" style="background: rgb(144, 255, 144) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: black; vertical-align: middle; text-align: center;"|Yes
 | class="table-yes" style="background: rgb(144, 255, 144) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: black; vertical-align: middle; text-align: center;"|3.0
-| class="table-no" style="background: rgb(255, 144, 144) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: black; vertical-align: middle; text-align: center;"|No<sup class="reference" id="cite_ref-4">[http://en.wikipedia.org/wiki/Favicon#cite_note-4 [5]]</sup>
+| class="table-no" style="background: rgb(255, 144, 144) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: black; vertical-align: middle; text-align: center;"|No<sup class="reference" id="cite_ref-4">[http://en.wikipedia.org/wiki/Favicon#cite_note-4 [5<nowiki>]</nowiki>]</sup>
 |-
 |[[Opera]]
@@ Line 65: / Line 66: @@
 The following format is cross-browser compatible and is supported by Internet Explorer, Firefox, Chrome, and Opera.
-* <code><[[link]] rel="icon" href="http://www.example.com/myicon.ico" /></code>
+* <source lang="html4strict"><link rel="icon" href="http://www.example.com/myicon.ico" /></source>
 The following is also acceptable:
-* <code><link rel="icon" href="/somepath/myicon.ico" /></code>
+* <source lang="html4strict"><link rel="icon" href="/somepath/myicon.ico" /></source>
+You can also use any type of image as a favicon:
+* <source lang="html4strict"><link rel="icon" href="/somepath/BG.png" /></source> or <source lang="html4strict"><link rel="icon" href="/somepath/Logo.gif" /></source>
 ==Create your own favicon==
@@ Line 74: / Line 78: @@
 [[Category:HTML]]
 [[Category:Web Browsers]]
+[[Category:Internet]]
+[[Category:Images]]