# Favicon Generator
- A favicon has become much more than just the simple 16px x 16px icon of a website
- We have to find a way to easily generate favicons for multiple devices and platforms
# Favicon
- Let's recap, what is a favicon?
- See also: Webdesign Essentials > Images > Favicon (opens new window)
- Small icon in browser tab
- File name: favicon.ico (old fashioned way) or anyName.png (modern way)
<link rel="icon" href="favicon.ico">or<link rel="icon" href="anyName.png">
# Potential problems
- Until now, this favicon was usually an icon of 16px x 16px (or 32px x 32px, 64px x 64px)
- We all visit websites on different devices so such a small icon is not sufficient anymore, for example
- when a website is added to the home screen on a smartphone/tablet
- when a website is shown as a "top site" in Firefox:
- We will need more than 1 favicon to meet our demands!
# Favicon Generator
- We don't want to do the hideous task of creating all the favicon images with all the different dimensions ourselves
- Solution: RealFaviconGenerator (opens new window)
- Steps to take:
- Create a square image of 260px x 260px or higher, or try it out with our boat image (600px x 600px):
- Upload the image on RealFaviconGenerator
- Adjust some background color settings if needed (Desktop browsers, Google Result Pages, iOS, Android, Chrome, Windows Metro, Safari)
- Generate your Favicons and HTML code
- Download the Favicon package
- Extract the content in the root of your website
- Insert the generated code in the
<head>section of your pages
- Create a square image of 260px x 260px or higher, or try it out with our boat image (600px x 600px):
WARNINGS
- Each
hrefstarts with a/which means that it will start looking from the root of your website
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
1
2
3
4
5
6
2
3
4
5
6
- If you want to place your icons somewhere else (e.g. in a subfolder icons of root), you have to indicate it BEFORE you start generating the favicons and HTML code:
- If you decide to move your icons to another folder AFTER you generated them you have to update all the links and the site.webmanifest and browserconfig.xml files
- In this case, it's easier to just regenerate your icons and set the correct folder as stated in the previous warning