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

External Links and SEO: Vetting Your Sources in the Age of E-A-T

By Alec Cole, Path Interactive May 21, 2020

Just about every modern SEO knows and understands the importance of inbound links. Links have always been […]

Read More

Watch SEO Director, Lily Ray, Speak at the 2020 SEJ eSummit

By Melissa Hernandez, Path Interactive May 20, 2020

One of the largest SEO and digital marketing conferences is right around the corner—with over 5,000 people […]

Read More

550 Winners and Losers of Google’s May 2020 Core Algorithm Update

By Lily Ray, Path Interactive May 8, 2020

Updated: May 13, 2020 Jump to: Impacted Categories | Winners by % Increase | Winners by Total […]

Read More