How to create a cross platform favicon for your website
Produce all required icon formats (ICO, PNG, SVG, Apple Touch, etc.). Upload them to your site’s root or assets folder, and add the provided HTML code to your site’s section to ensure compatibility across browsers and devices. Finally, test your favicon on various platforms to confirm it displays correctly.
To create a cross-platform favicon for your website, you need to generate multiple icon files and include the correct HTML code so that your favicon appears consistently across all browsers and devices, including desktops, smartphones, and tablets. Steps to Create a Cross-Platform Favicon below.
Creating the favicon.ico File
- Use a vector graphics editor like Adobe Illustrator or Sketch to create your favicon design. Vector graphics scale well without losing quality.
- Export the design as an SVG file at a size of at least 200×200 pixels. This will serve as the master source file.
- Open the SVG file in a raster graphics editor like Adobe Photoshop or GIMP. Accept the default canvas size.
- Create a new layer and paste your vector design on it. Make sure it’s centered.
- Resize the canvas to 16×16 pixels and the vector design to fit. This will be the smallest size favicon.
- Repeat step 5 for the following sizes: 32×32, 48×48, and 64×64 pixels. You should now have 4 layers, each with a different size favicon.
- Merge all layers into one image and save it as a 32-bit PNG file.
- Use a favicon converter tool like RealFaviconGenerator to convert the PNG to an ICO file. This will ensure proper compatibility across browsers.
Required Favicon Formats
- favicon.ico (for older browsers like Internet Explorer)
- favicon.png (for most modern browsers)
- Apple Touch icons (for iOS devices)
- Android Chrome icons (for Android devices)
- Windows Tile icons (for Windows browsers)
Adding the Favicon to Your Website
- Place the downloaded files in your website’s root directory or assets folder. e.g.,
https://example.com/favicon.ico. - Add the following HTML code in the
<head>section of your web pages:
<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="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
This tells browsers where to find the favicon and what type of file it is.
- If you want to use a different path, adjust the
hrefattribute accordingly, e.g.,/assets/favicon.ico.
Verifying Compatibility
- Open your website in various browsers on Mac, such as Safari, Chrome, Firefox, and Edge.
- Check if the favicon is displayed correctly in the browser tabs, bookmarks, and other areas where favicons are used.
- If the favicon doesn’t appear, double-check the file path and HTML code. Ensure the favicon.ico file is properly generated and placed in the correct location.
By following these steps, you can create a favicon.ico file that is compatible with Mac browsers and ensure it is properly integrated into your website.
More Information ℹ
Gabby
