Как скачать логотип с любого сайта — 5 легальных способов
Нужен логотип банка для презентации, иконка сервиса для схемы интеграций, знак партнёра для слайда «нам доверяют». Первое движение — скриншот с сайта. И это худший из возможных вариантов: мыльный растр с куском фона, который стыдно ставить в макет. Между тем на любом сайте логотип уже лежит в отличном качестве — надо только знать, как его забрать.
Порядок действий от лучшего к худшему: каталог логотипов (SVG в один клик) → пресс‑кит бренда (официальные файлы) → вытащить SVG через DevTools (30 секунд) → правый клик → сохранить картинку → и только если всё провалилось — скриншот. Про право использовать чужой логотип — в конце, спойлер: для большинства бытовых задач можно.
Способ 1. Правый клик — иногда этого достаточно
Правый клик по логотипу → «Сохранить изображение как…» или «Открыть изображение в новой вкладке». Если логотип вставлен обычным тегом <img>, вы получите исходный файл — часто это SVG, и тогда задача решена идеально.
Когда не работает: логотип вставлен инлайн‑кодом, фоном через CSS или прикрыт другим элементом. Пункта «сохранить изображение» в меню просто не будет. Тогда — способ 2.
Способ 2. DevTools — достаём что угодно за 30 секунд
Работает в Chrome, Яндекс Браузере, Firefox — везде одинаково:
- Правый клик по логотипу → «Просмотреть код» (Inspect).
- В открывшейся панели вы окажетесь рядом с элементом логотипа. Варианты:
<img src="...">— откройте ссылку из src в новой вкладке и сохраните файл.<svg>...</svg>— логотип вставлен инлайн. Правый клик по тегу в панели → Copy → Copy element — SVG‑код у вас в буфере. Вставьте его в файл с расширением .svg или прямо в Figma (Ctrl+V — Figma понимает SVG‑код из буфера).background-image: url(...)в стилях — откройте URL из CSS и сохраните.
- Проверьте добычу: настоящий SVG состоит из
<path>и фигур, а не одного тега<image>с растром внутри.
В шапке сайта часто лежит упрощённая или анимированная версия. В футере, пресс‑разделе и на внутренних страницах нередко находится более полная версия логотипа — а то и ссылка на официальный архив со всеми файлами.
Способ 3. Пресс‑кит бренда — официальный путь
У большинства средних и крупных компаний есть раздел «Пресс‑центр», «Медиа», «Brand assets» — с логотипами в SVG/PNG, фирменными цветами и правилами использования. Это самый правильный источник: файлы гарантированно актуальные и официальные, а правила использования написаны прямо рядом. Ищите ссылку в футере сайта или запросом «название бренда логотип пресс‑кит» / «brand assets».
Способ 4. Каталоги логотипов — когда нужно быстро и много
Когда логотипов нужно несколько (список банков, сетка партнёров, схема сервисов), ходить по пяти сайтам с DevTools утомительно. Каталоги решают это одним местом: официальные версии, единое качество, сразу в SVG и PNG.
Наш каталог логотипов заточен ровно под это: сотни российских и мировых брендов, у каждого — SVG, PNG нужного размера, копирование кода в один клик и даже перекраска прямо на странице. Для сеток «способы оплаты» и «нам доверяют» — самый короткий путь.
Способ 5. Скриншот — крайняя мера
Если логотип запечён в растровую картинку вместе с фоном (например, в обложке видео), остаётся скриншот с последующей обработкой: кадрирование, удаление фона. Качество будет равно размеру на экране — то есть посредственное. Прежде чем смириться, проверьте способы 3 и 4: почти для любого бренда где‑то лежит нормальный файл.
А это вообще законно?
Скачивание логотипа — не нарушение: нарушением может быть способ использования. Общий принцип: показывать логотип, чтобы указать на сам бренд (в статье, презентации, списке интеграций, способах оплаты), — можно; выдавать за свой, намекать на несуществующее партнёрство или лепить на продаваемый товар — нельзя. Подробный разбор с судебной практикой и таблицей ситуаций — в нашей статье можно ли использовать чужой логотип.
Куда бы вы ни поставили чужой логотип — не искажайте его: не растягивайте, не перекрашивайте в свои цвета, не обрезайте. Это и юридически чище, и профессиональнее выглядит. Правила искажений мы разбирали в статье про брендбуки.
Продвинутый уровень DevTools: три приёма для сложных случаев
Когда простой Inspect не находит логотип, помогают приёмы поглубже:
- Вкладка Network. Откройте DevTools → Network → фильтр Img, обновите страницу. В списке — все картинки, которые скачал сайт, включая те, что спрятаны в CSS и скриптах. Отсортируйте по имени — логотип обычно называется logo‑что‑нибудь. Двойной клик открывает файл для сохранения.
- Поиск по исходнику. DevTools → Ctrl+Shift+F (поиск по всем файлам) → введите «logo» или «.svg». Находит пути к логотипам, зашитые в JS‑бандлы и JSON‑конфиги, куда Inspect не заглядывает.
- Псевдоэлементы и шрифты‑иконки. Если логотип нарисован через ::before с иконочным шрифтом, картинки‑файла не существует вовсе. Смотрите Computed → content и font‑family: скачивать нужно будет шрифт или искать растровую/векторную альтернативу в пресс‑ките.
И общий совет: мобильная версия сайта иногда отдаёт другой, более простой файл логотипа — переключите эмуляцию устройства в DevTools и проверьте.
Как проверить качество скачанного файла
Добыча в руках — теперь три быстрых теста перед использованием:
- Вектор или обёртка? Откройте SVG текстовым редактором: настоящий вектор состоит из
<path>и фигур; один тег<image>— это растр, замаскированный под SVG. - Актуальная ли версия? У брендов случаются редизайны, а на сайтах — в футерах, старых лендингах, поддоменах — годами живут прошлые версии знака. Сверьте добычу с главной страницей бренда или его свежими соцсетями.
- Полная ли версия? В шапке сайта часто урезанный вариант (только знак без текста, или упрощённая версия для малых размеров). Для презентаций обычно нужен полный логотип — ищите его в пресс‑ките.
Типовые задачи и лучший путь для каждой
| Задача | Оптимальный путь |
|---|---|
| Один известный бренд для слайда | каталог: SVG за 10 секунд |
| Сетка «нам доверяют» из 10 логотипов | каталог: единое качество и стиль |
| Логотип малоизвестной локальной компании | DevTools по их сайту |
| Логотип для печати в высоком качестве | пресс‑кит (там вектор и правила) |
| Логотип из PDF‑презентации | открыть PDF в Illustrator/Inkscape и извлечь вектор |
| Старый логотип, которого нет на сайте | веб‑архив (web.archive.org) + DevTools |
Последняя строка — недооценённый приём: Wayback Machine хранит старые версии сайтов вместе с файлами логотипов, и это спасение, когда нужен именно исторический вариант знака.
Коротко
Скриншот — последнее средство, а не первое. Сначала каталог или пресс‑кит (официальный SVG за секунды), затем DevTools (вытащит логотип с любого сайта), и только потом растровые компромиссы. Добытый вектор ставьте в макет неискажённым — и всё будет и красиво, и законно.
Сэкономьте себе DevTools: в нашем каталоге логотипов логотип любого крупного бренда скачивается в SVG и PNG за один клик — или копируется кодом сразу в Figma.