I noticed that the default installation of a certain framework includes a favicon. In researching how to create my own favicon, I stumbled across a website which generates numerous files from your single image file:
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- site.webmanifest
This also requires four tags in your HTML:
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
Looking at a randomly selected recent news article, I see a whole host of tags which appear to target the preview behaviors of various devices and social media platforms:
<meta data-rh="true" property="twitter:url" content="https://www.nytimes.com/2020/12/01/us/politics/bribery-scheme-trump-pardon.html"/>
<meta data-rh="true" property="twitter:title" content="Justice Dept. Investigating Potential Bribery Scheme for Trump Pardon"/>
<meta data-rh="true" property="twitter:description" content="Heavily redacted court documents unsealed by a judge offered only scant clues to the potential scheme, and nothing directly tied the president to it."/>
<meta data-rh="true" property="twitter:image" content="https://static01.nyt.com/images/2020/12/01/lens/01dc-pardon-photo2/01dc-pardon-photo2-videoSixteenByNine3000.jpg"/>
<meta data-rh="true" property="twitter:image:alt" content="Intermediaries may have offered to funnel money as political donations in exchange for a federal convict’s pardon or commutation, according to documents unsealed by a court. "/>
<meta data-rh="true" property="twitter:card" content="summary_large_image"/>
<meta data-rh="true" property="article:section" content="U.S."/>
<meta data-rh="true" property="article:tag" content="Amnesties, Commutations and Pardons"/>
<meta data-rh="true" property="article:tag" content="Bribery and Kickbacks"/>
<meta data-rh="true" property="article:tag" content="Trump, Donald J"/>
<meta data-rh="true" property="article:tag" content="Howell, Beryl A"/>
<meta data-rh="true" property="article:opinion" content="false"/>
<meta data-rh="true" property="article:content_tier" content="metered"/>
<meta data-rh="true" name="CG" content="us"/>
<meta data-rh="true" name="SCG" content="politics"/>
<meta data-rh="true" name="CN" content="donald-trump-white-house"/>
<meta data-rh="true" name="CT" content="news-event"/>
<meta data-rh="true" name="PT" content="article"/>
<meta data-rh="true" name="PST" content="News"/>
<meta data-rh="true" name="url" content="https://www.nytimes.com/2020/12/01/us/politics/bribery-scheme-trump-pardon.html"/>
<meta data-rh="true" name="msapplication-starturl" content="https://www.nytimes.com"/>
<meta data-rh="true" property="al:android:url" content="nyt://article/8d541dea-82d0-59e0-a605-43f00aedb415"/>
<meta data-rh="true" property="al:android:package" content="com.nytimes.android"/>
<meta data-rh="true" property="al:android:app_name" content="NYTimes"/>
<meta data-rh="true" name="twitter:app:name:googleplay" content="NYTimes"/>
<meta data-rh="true" name="twitter:app:id:googleplay" content="com.nytimes.android"/>
<meta data-rh="true" name="twitter:app:url:googleplay" content="nyt://article/8d541dea-82d0-59e0-a605-43f00aedb415"/>
<meta data-rh="true" property="al:iphone:url" content="nytimes://www.nytimes.com/2020/12/01/us/politics/bribery-scheme-trump-pardon.html"/>
<meta data-rh="true" property="al:iphone:app_store_id" content="284862083"/>
<meta data-rh="true" property="al:iphone:app_name" content="NYTimes"/>
<meta data-rh="true" property="al:ipad:url" content="nytimes://www.nytimes.com/2020/12/01/us/politics/bribery-scheme-trump-pardon.html"/>
<meta data-rh="true" property="al:ipad:app_store_id" content="357066198"/>
<meta data-rh="true" property="al:ipad:app_name" content="NYTimes"/>
I've done some googling around and don't really see any authoritative sources, just a bunch of blogs. Before I go clicking around these dodgy blogs, I thought I'd come here and ask a few questions:
1) How do folks deal with favicons these days? I see that GIMP can export .ico format, but wonder if this format is best practice?
2) I see the social media links for twitter and FB on that nytimes page open a new window with a post ready to go. How are you guys linking to social media?
3) These meta tags are a total mess and largely greek to me. Any thoughts on how to generate these tags and manage them in some compact way?
