Ik schop dit topic even omhoog, omdat ik net zelf ook even voor het eerst in m'n leven met favicons bezig was. Dus ik moet echt eerlijk bekennen dat ik er niet heel veel over gelezen heb.
Het viel me op dat het met Windows Metro, iOS en Android allemaal nogal verwarrend is geworden. En ik kwam echt een briljante tool tegen:
http://realfavicongenerator.net/
Die genereert dus een hele reutemeteut aan code voor in de <head> , alzo:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="mstile-144x144.png">
<meta name="msapplication-config" content="browserconfig.xml"> |
Natuurlijk ook even tweakers.net getest:
http://realfavicongenerat...checker?site=tweakers.net
Ik heb even alleen de foutmeldingen hier:
favicon.ico seems corrupted or not in ICO format.
Some picture(s) are missing in favicon.ico:
16x16 picture
32x32 picture
48x48 picture
favicon.ico is declared in the HTML code. Although this is usually recommended, this is actually a bad thing. Learn more.
Some recommended PNG favicons are missing (or their sizes attribute is not set):
16x16 picture
32x32 picture
96x96 picture
192x192 picture
Learn more
iOS Favicon
The apple-touch-icon.png is not optimal. It should be 180x180 to match the highest iOS devices resolution.
Some iOS pictures are missing:
60x60 picture
180x180 picture
Learn more about these files and why they should be in the root of the web site.
Some iOS pictures are not declared:
60x60 picture
180x180 picture
The apple-touch-icon-precomposed.png file is not present. Even if it was deprecated since the release of iOS7, it is still a good idea to have it. Learn more.
Windows 8 Favicon
Picture for Windows 8 / IE 10 tile is not declared. Learn more.
Some recommended pictures for Windows 8 / IE 11 are missing:
310x310 picture
310x150 picture
Learn more
Some Windows 8 / IE11 tile(s) dimensions do not match the requirements. Learn more.
Some Windows 8 / IE11 tile(s) dimensions do not match the recommendations. Learn more.
Enkele daarvan ('corrupt .ico bestand' bijvoorbeeld is logisch en geen probleem), andere ben ik wel benieuwd naar.
:strip_exif()/u/300600/mona_tux_christmas.gif?f=community)
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
:strip_icc():strip_exif()/u/262598/Portal-Cake%252060.jpg?f=community)
en 