How to Generate and Implement Favicons for Brands

Mark Davoli Mark Davoli December 19, 2019 Category Design & Development

Designers and developers are often asked to add Favicons to websites. But, most of them still use a single icon for supporting web browsers on the desktop only. Recently, Favicon support has evolved with new devices, OS updates, and platforms.  

This article will detail what a Favicon is and its use. Then, you will learn the best way to provide the correct Favicon support for your platforms.  

What is a Favicon? 

Favicon is shorthand for “favorite icon.” It’s a file containing a small icon. That icon represents your brand on website tabs, desktop apps, mobile apps, or other places. Browsers must support the file type to show your branded favicon.

 

Why Should My Brand Use Favicons? 

Visual brand consistency is key to marketing any company. You want people to commit your branding to memory. Favicons are a wonderful design element to reinforce your brand recognition.  

If you have your favicon in various places on a user’s web browser, you will elevate their user experience. You’ll want your favicon to be legible and in its best possible presentation.   

Initial Favicon Design Specs 

Your initial favicon design should be 260 pixels by 260 pixels for optimal results in (.png, .jpg, .svg, …) 

Go to https://realfavicongenerator.net/. Then choose the option to “Select your Favicon image” to start the generating process. 

  1. To begin, you will jump to a page that will show how your image will look on various devices, browsers, and platforms. Use this page to tweak the design in certain situations. 
  2. Under “Favicon Generator Options” make sure to select “I will place favicon files in the root of my website”. Other options within this are up to you. 
  3. Click on “Generate your Favicons and HTML code” button at the bottom of the page.   

Finally, download your Favicon package, make a copy of it, and copy the code to share with the developer. The code that you will send to the developer ought to look like the example below:  

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2bBoxMENwd">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2bBoxMENwd">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=2bBoxMENwd">
<link rel="manifest" href="/site.webmanifest?v=2bBoxMENwd">
<link rel="mask-icon" href="/safari-pinned-tab.svg?v=2bBoxMENwd" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico?v=2bBoxMENwd">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">

How to Implement Favicons 

After you receive the favicon package, add both the assets for the images generated in the download package to the root of the website. Also, add the generated code to the <head> section of the website. 

Please ensure to add the assets to any git repos. 

Have Questions About Favicons? 

Our designers and developers can raise your favicon game. We champion brand consistency, recognition, and better user experiences. Put us to the task to create and implement a favicon for your site. Or, reach out if you have any questions.

Contact Us Now!

  • This field is for validation purposes and should be left unchanged.

Most Recent

DX Marketing Joins Our Team, Bringing Advanced Audience Targeting Capabilities

By Sarah Fonseca Dryden, Path Interactive October 20, 2020

We’re excited to announce that DX Marketing (DXM) is joining our team, thanks to a strategic acquisition […]

Read More

Who is Winning SEO in 2020 and Why?

By Lily Ray, Path Interactive October 16, 2020

Who are the biggest winners in SEO visibility in 2020, and what factors may have contributed to […]

Read More

How Path is Putting Its People First This #WorldMentalHealthDay — And Every Day

By Maritza Canon-Mendieta, Path Interactive October 9, 2020

It is no secret that over the past year most of our work routines have been turned […]

Read More