Favicon URL Builder
Build the standard favicon HTML tags for your site.
About the Favicon URL Builder
Generates the recommended set of HTML <link> tags for favicons and touch icons given your site's icon path, following current best practices.
How to use
Enter the base path where your icons live (e.g. /icons), then click Generate.
Worked example
Path /icons produces link tags for favicon.ico, the 32px PNG and the Apple touch icon.
How to use this calculator
- Enter your site details and the favicon files you want to use.
- Choose the favicon formats and sizes you want the tool to generate.
- Copy the HTML tags and paste them into the head section of your website.
Step by step method
- Gather the favicon image URLs or upload paths for the icon files you want to reference.
- Use the tool to build the standard favicon HTML tags for those files.
- Review the generated code to make sure the file types and paths match your site setup.
- Paste the finished tags into your page head and test the favicon in a browser.
Worked example
Suppose you have a site logo saved in several favicon sizes and want to generate the correct HTML tags for your homepage.
- Provide the tool with the favicon file paths, such as a standard icon file and a larger Apple touch icon file.
- Let the tool build the matching link tags so the browser can find each favicon format.
- Copy the generated HTML into the head of your site.
Answer. A ready-to-paste set of standard favicon HTML tags
Tips and common mistakes
- Use file paths that match where the favicon images are actually hosted.
- Include more than one icon format if you want broader device support.
- Check for typos in filenames, since a small path mistake can stop the favicon from appearing.
- After pasting the tags, refresh the page and clear the browser cache if the old icon still shows.
Frequently asked questions
Which favicon files do I need?+
A favicon.ico, a 32×32 PNG, and a 180×180 Apple touch icon cover most cases.
Where do the tags go?+
Inside the <head> of every page.
More Tech Tools Tools
Explore related calculators in this category
CDN & Cache Header Guide
Understand which CDN serves a site from its response headers.
Color Contrast Checker (WCAG)
Check the WCAG contrast ratio between a text and background color.
Mobile Safe Area Calculator
Calculate usable content area after notches and home indicators.
Screen Resolution Detector
Detect your screen resolution, viewport size and pixel ratio.
You Might Also Like
Popular tools from other categories
CORS Header Builder
Build the right CORS response headers for your API by choosing allowed origins, methods and headers.
Divisibility Rules Checker
Check divisibility by common numbers.
Password Strength Checker
Check how strong a password is based on length, character variety and common patterns. 100% private.
Prime Number Checker
Check if a number is prime and find factors.
Can't Find the Right Calculator?
Try our AI Math Solver, type any problem in plain English and get instant step-by-step solutions.