[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog:logo-size-guide":3,"blog-posts":415},{"id":4,"title":5,"body":6,"cover":395,"description":400,"extension":401,"keyword":402,"meta":403,"minutes":404,"navigation":405,"path":406,"publishAt":407,"seo":408,"stem":409,"topics":410,"updatedAt":413,"__hash__":414},"blog\u002Fblog\u002Flogo-size-guide.md","Logo Size Guide: Dimensions for Web, Social and Print",{"type":7,"value":8,"toc":374},"minimark",[9,13,16,21,24,27,36,46,50,55,58,61,65,68,71,79,86,90,93,97,100,103,106,110,113,117,120,123,127,130,133,141,145,148,151,163,167,170,173,177,180,188,195,198,202,205,335,339,361],[10,11,12],"p",{},"Ask a designer for the right logo size and you'll get a question back: where is it going? The same logo has to work as a 16-pixel icon in a browser tab and as a sign above your door, and no one file does both well. So you need a few versions at known sizes, and one idea settles most of the questions: whether a file is made of pixels or of shapes.",[10,14,15],{},"Below, we go place by place. The cheat sheet near the end has just the numbers.",[17,18,20],"h2",{"id":19},"pixels-or-shapes-why-there-isnt-one-logo-size","Pixels or shapes: why there isn't one logo size",[10,22,23],{},"A PNG, JPG or WebP file is a grid of tiny colored squares called pixels, and the grid has a fixed size. A logo saved 1,024 pixels wide has 1,024 columns of them, and that's all it will ever have. Shrink it and it looks fine. Enlarge it and the computer has to invent pixels that were never there, so the edges go soft.",[10,25,26],{},"An SVG, or a PDF made from vector shapes, stores your logo as lines and curves described with math. It's redrawn at whatever size it's shown, so it's as sharp in a browser tab as on the side of a van.",[10,28,29,30,35],{},"So anything printed, and anything big, should come from a vector. Screens are where pixel files live, and many places only accept them: YouTube and LinkedIn take PNG and JPG for profile pictures, not SVG. For a pixel file, find out how big it will be shown and give it a bit more. Our guide to ",[31,32,34],"a",{"href":33},"\u002Fblog\u002Ffree-logo-maker\u002Flogo-file-formats","logo file formats"," explains each format.",[37,38,43],"blog-figure",{"alt":39,"height":40,"src":41,"width":42},"One of our AI logos at the sizes it meets: a browser tab, a phone home screen, a social profile circle, a website header and a business card",1000,"blog\u002Flogo-size-guide\u002Fsizes.webp",1600,[10,44,45],{},"Harbor & Pine, one of our AI logos, in five places at five sizes. Look at the dark browser tab: the navy symbol almost disappears there, so check small sizes on dark backgrounds too.",[17,47,49],{"id":48},"logo-sizes-for-your-website","Logo sizes for your website",[51,52,54],"h3",{"id":53},"the-header-logo","The header logo",[10,56,57],{},"The logo at the top of a website usually shows around 30 to 60 pixels tall. But the pixels a web page is measured in aren't the dots on your screen: phones and many laptops use two or three dots for each one. A logo shown 40 pixels tall is drawn with 80 dots or more.",[10,59,60],{},"So give the header twice the size it's shown at. For a wide logo shown at 160 × 40, export a PNG or WebP of 320 × 80. Honestly, the SVG is better still: sharp on every screen and usually a small file. A 4,000-pixel PNG won't look any sharper, and if your website builder doesn't shrink it, your page loads slower.",[51,62,64],{"id":63},"favicons-and-home-screen-icons","Favicons and home-screen icons",[10,66,67],{},"A favicon is the tiny icon in a browser tab, shown at 16 pixels, or 32 on sharper screens. That's why a favicon.ico file usually holds 16, 32 and 48 pixel versions. At 16 by 16 the whole icon is 256 pixels, so a name turns to mush: use the symbol or an initial. We'd take a clear initial over a blurry miniature every time.",[10,69,70],{},"Phones want bigger icons. The one an iPhone shows on its home screen is called an Apple touch icon, and Apple's guide for web developers uses 180 × 180 pixels for it. Give it a solid background, because an iPhone fills transparent areas with black. Android phones, and sites installed as apps, use icons of 192 and 512 pixels: Google's guide to web app manifests says Chrome needs at least those two.",[10,72,73,74,78],{},"Our free ",[31,75,77],{"href":76},"\u002Ffavicon-generator","favicon generator"," makes the whole set from your logo image, plus a web manifest (the small file that tells phones where the big icons are) and the HTML to paste into your site. It runs in your browser, so nothing is uploaded.",[37,80,83],{"alt":81,"height":40,"src":82,"width":42},"DepthLogo's favicon generator showing a logo in light and dark browser tabs, on a phone and at six sizes from 16 to 512 pixels","blog\u002Flogo-size-guide\u002Ffavicon-generator.webp",[10,84,85],{},"The whole Harbor & Pine logo in our favicon generator. At 16 and 32 pixels the name turns into a few gray dots, which is why a favicon should show the symbol alone.",[51,87,89],{"id":88},"the-share-image","The share image",[10,91,92],{},"When someone shares a link to your site on Facebook or in a messaging app, a preview picture appears with it. Web developers call it the Open Graph image, after the code that sets it, and Facebook's guide for websites recommends at least 1200 × 630 pixels. It's a picture with your logo on it, not a logo file: center the logo on your brand color with room around it, since not every app shows the full rectangle.",[17,94,96],{"id":95},"social-media-profile-pictures","Social media profile pictures",[10,98,99],{},"Profile pictures are square uploads, often shown as a circle: large on your profile, tiny beside a comment. YouTube's help page says the channel picture renders at 98 × 98 pixels, and LinkedIn's suggests 400 × 400 for a company Page logo. These numbers change, so the safe choice is a big square: we give you 1080 × 1080, and each platform shrinks it to what it needs.",[10,101,102],{},"What goes in the square matters more than its size. Put a logo four times as wide as it is tall into YouTube's 98-pixel circle and it can be at most about 24 pixels tall, with the letters smaller still. Use the symbol or your initials, or a stacked version with the symbol above the name.",[10,104,105],{},"Then leave room for the circle, which cuts off the corners: a square symbol only fits inside it if it's no wider than about 70 percent of the picture. In the profile picture we make from your icon, it sits in the middle 60 percent, on a solid background. That's safer than transparent, which may land on white in one app and on a dark theme in another.",[51,107,109],{"id":108},"covers-and-banners","Covers and banners",[10,111,112],{},"Covers and banners are wide, and each screen shows a different slice of them. YouTube's help page asks for a banner of at least 2048 × 1152 pixels, which a TV can show whole, and marks a strip of 1235 × 338 in the middle as the safe area for text and logos. Treat other covers the same way: logo in the middle, nothing important near the edges.",[17,114,116],{"id":115},"email-signatures","Email signatures",[10,118,119],{},"In an email signature, a logo usually shows around 150 to 200 pixels wide. Use a PNG of about twice that, 300 to 400 pixels wide, set to show at the smaller size. Skip the SVG, which many email programs won't show.",[10,121,122],{},"Some email apps hide images until the reader allows them, so put your name and website in plain text too. And check dark mode: a transparent logo with dark lettering can vanish on a dark background. If it does, use the version with a background.",[17,124,126],{"id":125},"logo-size-for-print","Logo size for print",[10,128,129],{},"Print is measured in inches or centimeters, so a pixel file needs a conversion: pixels per inch. The rule of thumb for things seen up close, like business cards and flyers, is 300 pixels per inch. A logo printed 2 inches wide needs about 600 pixels. In metric that's about 120 pixels per centimeter, so 5 centimeters needs about 600 too. By that rule, a 4,096-pixel PNG prints sharply up to about 13.6 inches (35 cm) wide: plenty for a flyer, not for a shop sign.",[10,131,132],{},"The better answer is a vector. Business cards, letterhead, signs and merchandise all print best from an SVG or a vector PDF, which the printer can scale to any size.",[10,134,135,136,140],{},"Some jobs need a one-color version too. Embroidery stitches each color in its own thread, and stamps, engraving and vinyl lettering use a single color. Keep a black and a white version ready; our guide to ",[31,137,139],{"href":138},"\u002Fblog\u002Flogo-maker\u002Fchoosing-logo-colors","choosing logo colors"," shows how to plan for them.",[17,142,144],{"id":143},"find-the-smallest-size-your-logo-still-works-at","Find the smallest size your logo still works at",[10,146,147],{},"Every logo has a size below which it stops working. Shrink yours to 32 pixels, then 16, and look at it without zooming in. If the name turns into a smudge, that's the limit for the full logo, and below it the icon takes over. Brand guidelines write this down as the minimum size.",[10,149,150],{},"It's also why a logo needs versions for different shapes. A wide one, with the symbol beside the name, suits headers and email signatures. A stacked one suits square spots, and the icon alone covers favicons, app icons and profile pictures. Without them, a wide logo in a square spot shrinks to a thin strip.",[10,152,73,153,157,158,162],{},[31,154,156],{"href":155},"\u002Flogo-checker","logo checker"," tests both. It shows your logo at 128, 64, 32 and 16 pixels, checks how much detail survives at 32 and flags logos too wide or too tall for a square. Our guide on ",[31,159,161],{"href":160},"\u002Fblog\u002Flogo-checker\u002Flogo-checker-before-you-use-your-logo","what to fix before you use your logo"," explains each finding.",[17,164,166],{"id":165},"leave-room-around-it","Leave room around it",[10,168,169],{},"Clear space is the empty margin around your logo that nothing else should enter. Set it with a part of the logo, like the height of the first letter, so it grows and shrinks with the logo. Our logo files are cropped close, with a thin margin, so you add the clear space where you place them.",[10,171,172],{},"In square spots, margin is a trade-off: a 16-pixel tab can't spare a pixel, while a home screen rounds off the corners and a circle cuts them away. So in our downloads the icon nearly fills the small favicons and gets a wider border on a solid color at 180, 192 and 512 pixels.",[17,174,176],{"id":175},"what-a-depthlogo-download-gives-you","What a DepthLogo download gives you",[10,178,179],{},"If you make your logo with us, most of these sizes come in the download.",[10,181,182,183,187],{},"A logo from our ",[31,184,186],{"href":185},"\u002Flogo-templates","logo templates"," is free to edit, with no account, and you pay once to download it. You get SVG, PDF, PNG and WebP, with the PNG and WebP at 512, 1,024, 2,048 or 4,096 pixels wide, your pick. The versions are the logo on a transparent background and on its background color, black and white versions, and the symbol and the name on their own when the design has both.",[10,189,182,190,194],{},[31,191,193],{"href":192},"\u002F","AI logo generator"," comes as a PNG, an SVG or both. The PNG is the artwork in 2K, about 2,000 pixels, transparent in most styles. The SVG is traced from it and exports PNG and WebP at the sizes above, though painted looks like Watercolor, Neon or 3D Ice come through best in the PNG.",[10,196,197],{},"Every download includes the favicon set: favicon.ico, PNG icons from 16 to 512 pixels with the Apple touch icon, and favicon.svg when the logo is a vector. You also get two square profile pictures of 1080 × 1080.",[17,199,201],{"id":200},"logo-size-cheat-sheet","Logo size cheat sheet",[10,203,204],{},"Sizes in pixels unless noted.",[206,207,208,224],"table",{},[209,210,211],"thead",{},[212,213,214,218,221],"tr",{},[215,216,217],"th",{},"Where it goes",[215,219,220],{},"Size",[215,222,223],{},"File",[225,226,227,239,250,261,272,282,293,303,314,325],"tbody",{},[212,228,229,233,236],{},[230,231,232],"td",{},"Website header",[230,234,235],{},"2× its display size",[230,237,238],{},"SVG, or PNG\u002FWebP",[212,240,241,244,247],{},[230,242,243],{},"Browser tab",[230,245,246],{},"16, 32 and 48",[230,248,249],{},"favicon.ico",[212,251,252,255,258],{},[230,253,254],{},"iPhone home screen",[230,256,257],{},"180 × 180",[230,259,260],{},"PNG, solid background",[212,262,263,266,269],{},[230,264,265],{},"Android, installed apps",[230,267,268],{},"192 and 512",[230,270,271],{},"PNG",[212,273,274,277,280],{},[230,275,276],{},"Link preview",[230,278,279],{},"1200 × 630",[230,281,271],{},[212,283,284,287,290],{},[230,285,286],{},"Profile picture",[230,288,289],{},"1080 × 1080",[230,291,292],{},"PNG, icon centered",[212,294,295,298,301],{},[230,296,297],{},"Email signature",[230,299,300],{},"300 to 400 wide",[230,302,271],{},[212,304,305,308,311],{},[230,306,307],{},"Business cards, flyers",[230,309,310],{},"300 per inch, or vector",[230,312,313],{},"PDF or SVG",[212,315,316,319,322],{},[230,317,318],{},"Signs and merch",[230,320,321],{},"Any size",[230,323,324],{},"SVG or PDF",[212,326,327,330,332],{},[230,328,329],{},"Embroidery, stamps",[230,331,321],{},[230,333,334],{},"One-color vector",[17,336,338],{"id":337},"the-short-version","The short version",[340,341,342,346,349,352,355,358],"ol",{},[343,344,345],"li",{},"Pixel files (PNG, JPG, WebP) have a fixed size; vectors (SVG, PDF) scale to anything.",[343,347,348],{},"On screens, use about twice the size the logo is shown at, or the SVG.",[343,350,351],{},"For a website, add favicons, home-screen icons and a 1200 × 630 share image.",[343,353,354],{},"For profiles, a big square with the icon in the middle; on banners, the logo in the middle.",[343,356,357],{},"For print, think 300 pixels per inch, or better, send a vector.",[343,359,360],{},"Know your smallest size, and keep wide, stacked and icon versions.",[10,362,363,364,368,369,373],{},"Still working on the logo itself? Our ",[31,365,367],{"href":366},"\u002Flogo-maker","free logo maker"," lets you design for free and pay only for the files you keep, and our ",[31,370,372],{"href":371},"\u002Fblog\u002Flogo-maker\u002Fhow-to-use-a-logo-maker","step-by-step editing guide"," shows you around the editor.",{"title":375,"searchDepth":376,"depth":377,"links":378},"",2,3,[379,380,385,388,389,390,391,392,393,394],{"id":19,"depth":376,"text":20},{"id":48,"depth":376,"text":49,"children":381},[382,383,384],{"id":53,"depth":377,"text":54},{"id":63,"depth":377,"text":64},{"id":88,"depth":377,"text":89},{"id":95,"depth":376,"text":96,"children":386},[387],{"id":108,"depth":377,"text":109},{"id":115,"depth":376,"text":116},{"id":125,"depth":376,"text":126},{"id":143,"depth":376,"text":144},{"id":165,"depth":376,"text":166},{"id":175,"depth":376,"text":176},{"id":200,"depth":376,"text":201},{"id":337,"depth":376,"text":338},{"src":396,"alt":397,"width":398,"height":399},"blog\u002Flogo-size-guide\u002Fcover.webp","One logo shown at the sizes it meets, from a 16 px browser tab icon to a 512 px app icon",1200,630,"What logo size to use on your website, favicon, social profiles, email and print, when a vector beats a PNG, and a cheat sheet to keep.","md","logo size",{},8,true,"\u002Fblog\u002Flogo-size-guide","2026-10-23",{"title":5,"description":400},"blog\u002Flogo-size-guide",[411,412],"logo-maker","free-logo-maker",null,"DspzdNmg2o6bAYIdn9ioNHpokiBGvEPQfYrn8ZMeAoc",[416,427,437,448,457,466,475,483,493,501,510,519],{"stem":417,"title":418,"description":419,"topics":420,"publishAt":423,"updatedAt":413,"minutes":404,"cover":424},"blog\u002F3d-logo-vs-flat-logo","3D Logo vs Flat Logo: When Depth Helps a Brand","An honest look at 3D and flat logos, with real examples. Where depth helps a brand, where a flat logo works better, and how to have both versions.",[421,422],"3d-logo-maker","ai-logo-maker","2026-10-17",{"src":425,"alt":426,"width":398,"height":399},"blog\u002F3d-logo-vs-flat-logo\u002Fcover.webp","A flat navy mountain logo for Summit Gear beside a 3D coffee cup full of snowy mountains for Summit Roasters, both made with DepthLogo",{"stem":428,"title":429,"description":430,"topics":431,"publishAt":433,"updatedAt":413,"minutes":404,"cover":434},"blog\u002Fai-logo-maker-examples","AI Logo Maker Examples: Real Briefs and Their Logos","Real briefs from our AI logo maker and the logos they made. See what a name alone gives you, when to describe a symbol, and how much the style changes.",[422,432],"ai-logo-generator","2026-10-21",{"src":435,"alt":436,"width":398,"height":399},"blog\u002Fai-logo-maker-examples\u002Fcover.webp","Three briefs and the logos they made in the DepthLogo AI logo maker, a mascot fox in headphones for Foxtrot Audio, a vintage badge with a 1950s car for Route 66 Garage and a folk-art wreath for Bloom & Birch",{"stem":438,"title":439,"description":440,"topics":441,"publishAt":443,"updatedAt":413,"minutes":444,"cover":445},"blog\u002Fchoosing-a-logo-from-a-logo-generator","How to Choose a Logo From a Logo Generator","A practical way to compare logo generator results, narrow your shortlist and choose a design that fits your business before spending more time on it.",[442],"logo-generator","2026-10-20",7,{"src":446,"alt":447,"width":398,"height":399},"blog\u002Fchoosing-a-logo-from-a-logo-generator\u002Fcover.webp","Three Harbor & Pine logos from the DepthLogo case library, with a lighthouse, a smiling coffee cup and a script wordmark, arranged as a shortlist",{"stem":449,"title":450,"description":451,"topics":452,"publishAt":453,"updatedAt":413,"minutes":444,"cover":454},"blog\u002Fchoosing-logo-colors","Logo Maker Color Guide: How to Choose Logo Colors","How to choose logo colors in a logo maker. How many colors to use, why contrast matters more than meaning, and how to test them before you download.",[411,432],"2026-10-22",{"src":455,"alt":456,"width":398,"height":399},"blog\u002Fchoosing-logo-colors\u002Fcover.webp","Four two-color logos from the DepthLogo case library, navy and orange for Summit Gear, navy and blue for Northwind, black and orange for Lumen Studio and olive green and gold for Olive & Thyme",{"stem":458,"title":459,"description":460,"topics":461,"publishAt":423,"updatedAt":413,"minutes":462,"cover":463},"blog\u002Ffree-logo-maker-guide","Free Logo Maker: What You Can Make Without Paying","What a free logo maker really gives you, a checklist for judging one, and how to design a logo for free on DepthLogo and pay only for the files.",[412,411],10,{"src":464,"alt":465,"width":398,"height":399},"blog\u002Ffree-logo-maker-guide\u002Fcover.webp","Six logo templates in the DepthLogo free logo maker, each one already set with the brand name Atelier",{"stem":467,"title":468,"description":469,"topics":470,"publishAt":433,"updatedAt":453,"minutes":444,"cover":472},"blog\u002Fhow-to-choose-a-logo-font","Logo Creator Tips: How to Choose a Font for Your Logo","How to choose a logo font in a logo creator. What bold, thin, serif and script letters say about a business, how to test them small, and when to stop at one.",[471,411],"logo-creator",{"src":473,"alt":474,"width":398,"height":399},"blog\u002Fhow-to-choose-a-logo-font\u002Fcover.webp","Four logos from the DepthLogo case library with different lettering, a bold sans-serif for Summit Gear, a thin sans-serif for Lumen Studio, a serif for Hartley & Vale and a formal script for Olive & Thyme",{"stem":476,"title":477,"description":478,"topics":479,"publishAt":423,"updatedAt":413,"minutes":462,"cover":480},"blog\u002Fhow-to-make-a-3d-logo","How to Make a 3D Logo With an AI 3D Logo Maker","A step-by-step guide to making a 3D logo with AI, from a brief that suits depth and the right 3D style to colors that hold up and judging the light.",[421,442],{"src":481,"alt":482,"width":398,"height":399},"blog\u002Fhow-to-make-a-3d-logo\u002Fcover.webp","Six 3D logos made with the DepthLogo AI generator, from Donut Social's retro 3D letters and a clay bakery bear to an ice letter F and a gold monogram",{"stem":484,"title":485,"description":486,"topics":487,"publishAt":488,"updatedAt":413,"minutes":489,"cover":490},"blog\u002Fhow-to-make-a-logo-with-ai","How to Make a Logo With an AI Logo Generator","A plain-English guide to making a logo with an AI logo generator, from what to type and which style to pick to judging the results and getting the right files.",[432,422],"2026-10-15",9,{"src":491,"alt":492,"width":398,"height":399},"blog\u002Fhow-to-make-a-logo-with-ai\u002Fcover.webp","Logos made with the DepthLogo AI logo generator, from a fox mascot in headphones to a gold monogram",{"stem":494,"title":495,"description":496,"topics":497,"publishAt":488,"updatedAt":453,"minutes":404,"cover":498},"blog\u002Fhow-to-use-a-logo-maker","How to Use a Logo Maker: A Step-by-Step Guide","How to use a logo maker to design your own logo, from picking a template worth editing to making the name, fonts and colors yours and downloading the files.",[411,471],{"src":499,"alt":500,"width":398,"height":399},"blog\u002Fhow-to-use-a-logo-maker\u002Fcover.webp","The DepthLogo logo maker editor with a leaf emblem template, its layers on the left and its text settings on the right",{"stem":502,"title":503,"description":504,"topics":505,"publishAt":443,"updatedAt":413,"minutes":444,"cover":507},"blog\u002Flogo-checker-before-you-use-your-logo","Logo Checker: What to Fix Before You Use Your Logo","Read a logo checker report without chasing the score. Find out which warnings need a new file, an extra version or a closer look at the design itself.",[506],"logo-checker",{"src":508,"alt":509,"width":398,"height":399},"blog\u002Flogo-checker-before-you-use-your-logo\u002Fcover.webp","A diagram showing the Harbor & Pine lighthouse logo on white and dark navy, with a small-size preview and notes about background contrast and legibility",{"stem":511,"title":512,"description":513,"topics":514,"publishAt":423,"updatedAt":407,"minutes":515,"cover":516},"blog\u002Flogo-file-formats","Logo File Formats Explained: PNG, SVG, PDF and More","Logo file formats in plain English: what PNG, SVG, PDF and WebP are for, which file to send a printer or sign maker, and how to check a logo file.",[412,506],11,{"src":517,"alt":518,"width":398,"height":399},"blog\u002Flogo-file-formats\u002Fcover.webp","The DepthLogo files page for an Atelier logo, with the logo, the logo on its background, the icon and the name each offered as SVG, PDF, PNG and WebP",{"stem":409,"title":5,"description":400,"topics":520,"publishAt":407,"updatedAt":413,"minutes":404,"cover":521},[411,412],{"src":396,"alt":397,"width":398,"height":399}]