Hearth & Key Realty Brand Kit

Make yours

Favicons and app icons

For browser tabs and phone home screens

Put your icon on your website

  1. 1
    Download the icons
  2. 2

    Made with a site builder? Pick it below and upload the one picture it asks for.

  3. 3

    Any other site: put the files in its main folder and paste the lines below into every page's head.

In a browser tab · In search results

Hearth & Key Realty · Homes for sale across San Mateo County
hearthandkey.example
Hearth & Key Realty
Hearth & Key Realtyhttps://hearthandkey.example

Hearth & Key Realty · Homes for sale across San Mateo County

On a phone's home screen

Hearth & Key

Android cuts it to its own shape

  • Circle
  • Squircle
  • Rounded
  • Drop

At 16 pixels

A tab draws your icon in 16 × 16 pixels. Here it is, pixel by pixel.

Actual size

In the ZIP

  • favicon.ico16, 32, 48 pxBrowser tabs: every browser asks a site for it
  • favicon-96x96.png96 pxSearch results
  • apple-touch-icon.png180 pxiPhone home screen
  • icon-192.png192 pxAndroid and installed web apps
  • icon-512.png512 pxAndroid and installed web apps
  • site.webmanifestJSONYour name, icons and color, for Android
  • head.htmlHTMLThe lines for your pages' head

Put it on your site

  1. 1

    Unzip the file and upload everything to your site's main folder, beside its home page.

  2. 2

    Paste these lines into the head of every page.

  3. 3

    Publish. A browser can take a day to show a new icon.

For the head of every page
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#a16207">

Your phone's browser bar takes your brand's color from the last line.

Layouts