Add your logo and a few details to get every icon, a share image and the head tags in one .zip. You get favicon.ico, the PNG and Apple icons, a web manifest, a 1200 by 630 share image and the head tags to paste. Your image never leaves this device. It is free.
How to make your icons and tags, step by step
- Choose a Logo or image, or drop it on the page. A square logo of 512 px or larger works best.
- Choose the Share image style: Logo on colour or Full photo.
- Fill in the Site name, Page title, Description, Page address and X handle.
- Pick the Background colour and the Theme colour, which tints the phone browser bar.
- Check the preview of the share card and icons.
- Press Download .zip and Copy HTML.
- Upload the files to your files folder, then paste the tags into the head of your pages.
What's in the pack
favicon.ico holds 16, 32 and 48 pixel icons for every browser. favicon-16.png and favicon-32.png are the sharp versions modern browsers use. apple-touch-icon.png is for iPhone and iPad home screens, and the Android icons plus site.webmanifest are used when someone installs your site. og-image.png is the picture shown when your link is shared, and head.html has every tag ready to paste.
Getting a good share image
Chat apps and social sites show the image at about 1200 × 630, then crop or shrink it for smaller cards, so keep the title short and the logo clear. The Logo style puts your logo on the background colour next to the title. The Photo style fills the card with your picture and puts the title over a soft shadow, which works best for wide photos. Share images need a full https:// address, so fill in the page address.
Checking it works
After you upload the files, open your page and view its source to see the tags. Many sites cache share cards, so if an old picture still shows, add a version to the image address, such as og-image.png?v=2, or ask the platform's link preview tool to fetch the page again.
Tips
- Use a simple logo that stays clear at 16 pixels.
- Choose a background colour that matches your brand.
- Write a short description that makes people want to click.
- Check your page afterwards with the pre-launch scan.
For a fuller set of tags, such as robots and article details, see the meta tag generator, and for only an icon, the favicon generator.
Who uses it
People launching a personal site, a portfolio, a shop or a small business page, and developers who want every icon and share file made in one go.
Questions
Where do I put the files?
Upload everything in the .zip to your site's files folder, then paste the tags into the head of your pages.
Do I need all of the icons?
Using the full set means your icon looks right in browsers, on phone home screens and when your site is installed.
Is my logo uploaded?
No. Everything is made in your browser.