Back to Abstract favicons.

Abstract Design Favicon Information

Tab Preview

Display will vary depending on browser and color settings.

Download Zip File Package
Download this Favicon

Download Favicon as SVG
Download as SVG (Opens in new tab/window. Right click and save as.)

Downloads
438

How to Add this Favicon to Your Website

There are several steps to add your new favicon to your website. Depending on how thorough you want to be you have several options. At the very least Free Favicon recommends you do the Website Favicon step and the Apple iOS devices and Google Android Devices step. That will cover the majority of your users and provide them with your favicon/icon no matter what device they are on. If you want to be complete you can do add all the additional sizes of icons as well.

Website Favicon

Download favicon zip package.
Extract the favicon.ico file and the other files on your computer.
Upload the favicon.ico file into your web server directory.
If you do not place the favicon.ico file in the root public directory on your web server you can add this HTML code between the <head> </head> tags of the page.
<link rel="icon" type="image/x-icon" href="/path/to/favicon.ico">

Apple iOS devices and Google Android Devices

If you would also like to install a touch icon for Apple iOS devices and Google Android devices you can also use the 152 pixel png file that is included. You will need to place the following HTML code in between the <head> </head> tags.
<link rel="apple-touch-icon-precomposed" href="/path/to/abstract-design-257-152-247355.png">

IE 10 Metro Tile Icon

To add your icon to Windows 8 Metro users you can add the following HTML code between the <head> </head> tags of the page. Replace #ffffff with your desired tile color.

Everything Else

Include the following HTML code between the <head> and </head> tags of your page to ensure your favicon appears correctly across all major devices and browsers.

Standard Favicons
Use favicon-32x32.png and favicon-16x16.png for modern browsers such as Chrome, Firefox, Edge, and Safari.

<link rel="icon" href="/path/to/abstract-design-257-32-247355.png" sizes="32x32">
<link rel="icon" href="/path/to/abstract-design-257-16-247355.png" sizes="16x16">

Apple Touch Icon
Add a single apple-touch-icon file (typically 180×180 px) for iPhones and iPads that pin your site to the home screen:

<link rel="apple-touch-icon" sizes="180x180" href="/path/to/abstract-design-257-180-247355.png">

Safari Pinned Tab
For macOS Safari pinned tabs, you can specify an SVG mask icon and color:

<link rel="mask-icon" href="/path/to/abstract-design-257-pinned-247355.png.svg" color="#5bbad5">

Fallback Icon
Including a traditional .ico file ensures compatibility with very old browsers:

<link rel="shortcut icon" href="/path/to/favicon.ico">