on 2018-03-15
Something about favicon on website
Favicon is a icon on browser tab.
But now we must do more thing on mobile device handle favicon.
2 way add browser favicon
-
Put icon in url path
<example.com>/favicon.png -
Add meta tag
<link rel="icon" type="image/png" href="favicon.png" />
Notice: I like use png as my favicon, because i can reuse this file.
Icon format case
<!-- IE -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<!-- other browsers -->
<link rel="icon" type="image/x-icon" href="favicon.ico" />
Refer - Correct MIME Type for favicon.ico?
Other icon for web case
For iOS device icon
<link rel="apple-touch-icon" href="<icon url>">
<link rel="apple-touch-icon" sizes="76x76" href="<icon url>">
<link rel="apple-touch-icon" sizes="120x120" href="<icon url>">
<link rel="apple-touch-icon" sizes="152x152" href="<icon url>">
For PWA add to home screen
Use manifest.json