The Essential Website Template

A boilerplate with all the essentials.

I'm talking metadata and icons for days! Everything you need for search engines, social media sharing, and mobile web app manifestation.

(I made this so I could stop forgetting this important jazz.)

Use

Just go ahead and clone this, silly!

What you'll need to change

index.html

what to change	example
__TITLE__	"My Portfolio"
__DESCRIPTION__	"The portfolio of George Washington."
__KEYWORDS__	"portfolio, george, washington"
__AUTHOR__	"George Washington"
example.com	georgewashington.com
@__TWITTER_SITE__	@GeorgeWashingtonDesigns
@__TWITTER_CREATOR__	@GeorgeWashington
yourprofile	georgewashington
#000000	#42A5F5

manifest.webmanifest

what to change	example
__TITLE__	George Washington
__SHORTNAME__	George
#000000	#f8f8f8
#000000	#42A5F5

browserconfig.xml

Change the tile color from #000000 to your theme color (#42A5F5).

Images

Pro tip: Use the real favicon generator.

• favicon.ico
• icon-16x16.png
• icon-32x32.png
• icon-192x192.png
• icon-512x512.png
• apple-touch-icon.png (180x180)
• logo.png (1200x630 per Facebook's recommended dimensions for og:image)
• mstile-150x150.png (270x270)