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

Landing Page Testing Tools to Boost Your Conversion Rates

By Ruben Quinones, Path Interactive July 30, 2020

With the unpredictability of this year so far, marketers have had to make some tough decisions on how […]

Read More

Video: 550 Winners & Losers – Google’s Latest Algorithm Update

By Melissa Hernandez, Path Interactive July 27, 2020

When Google unleashes core algorithm updates, it’s pretty simple: some sites win, some sites lose.In our latest […]

Read More

SEO Click-Through-Rates by SERP Feature (2020 Sistrix Data) & SEO Projections Template

By Paul VanHevel, Path Interactive July 14, 2020

Jump to CTR table: average of all SERPS | 10 organic results | sitelinks | featured snippet […]

Read More