Картинки для логотипов: Где найти иконки (картинки) для логотипа: поиск, подбор и скачивание изображений

Содержание

Картинки логотипов (43 фото)

На создание логотипа известные компании могут тратить огромные деньги. Ведь от качества работы дизайнеров сильно зависит дальнейший успех всего предприятия. Хороший логотип должен выглядеть эстетично и легко запоминаться. Эмблемы бывают нескольких типов: графические, текстовые, комбинированные. Предлагаем тут посмотреть картинки логотипов.

Фирмы известные по всему миру.

Логотипы в цветных квадратах.

Майкрософт, Интел, Нокиа.

Прикольные эмблемы в разных стилях.

Картинка логотипов.

Адидас, Кока-кола, Лего.

Запоминающиеся графические символы.

Логотипы компаний из всевозможных сфер.

Амазон, БМВ, Гугл.

Гиганты мировой экономики.

Красивая картинка логотипов.

Множество работ дизайнеров.

Простые и понятные символы.

Разбросанные логотипы.

Популярные эмблемы фирм.

Бургер Кинг, Самсунг, Принглс.

Логотипы российских компаний.

Текстовый стиль эмблем.

Крупные символы.

Логотипы напитков, автомобилей, компьютеров.

Графический знак андройд.

Компании с цветными символами..

Прикольные логотипы на картинке.

Желтый знак быстрого питания.

Игровая компания Сега.

Континенты увешаны в логотипах.

Симпатичные символы.

Известная поисковая система.

Большой выбор идей для логотипа.

Социальная сеть Вконтакте.

Бренды из разных стран.

Надписи логотипов на картинке.

Графические символы в уменьшенном виде.

Символ с американской банкноты.

Логотипы распределены по клеточкам.

Символы банков и спортивных производителей.

Крутые логотипы на картинке.

Фирма доступных ноутбуков.

Значок элитных авто из Японии.

Компании, выпускающие одежду.

Отечественные логотипы.

Красивый коллаж из графических знаков.

Яркие цвета в оформлении символов.

Понравился пост? Оцените его:

Рейтинг: 5,00/5 (голосов: 1)

Поделитесь с друзьями!

7 типов логотипов. Какой подойдёт вашей компании?

Логотип — символ вашего бизнеса, значок, по которому вашу компанию узнают визуально. Разработка этого элемента фирменного стиля — задача не из лёгких. Но мы знаем, с чего начать — с выбора типа логотипа. Редактор издания 99designs Хильда Моронес (Hilda Morones) насчитала 7 типов логотипов. Среди них есть текстовые, графические и смешанные

Словесные и буквенные логотипы

1) Аббревиатуры и монограммы

IBM, HP, ВТБ, МТС, NASA… Шаблон создания понятен, да? Все эти логотипы являются аббревиатурами длинных названий компаний. Товарный знак из 2-х или 3-х слов запомнить гораздо тяжелее, чем «инициалы». Согласитесь, легче выговорить NASA, чем Национальное управление по аэронавтике и исследованию космического пространства (англ.: National Aeronautics and Space Administration). Буквенные логотипы и монограммы — оптимальный вариант для компаний с многословными названиями.

При разработке таких товарных знаков повышенное внимание следует уделять подбору шрифтов. Начертание букв не только должно соответствовать стилю и духу компании, оно также должно быть разборчивым, чтобы его можно было прочесть на маленьких экранах мобильных телефонов и визитных карточках. Те, кто только открыл бизнес, могут в первое время размещать расшифровку аббревиатуры под лого.

2) Логотипы-слова (торговые марки)

Словесные логотипы очень хорошо работают, когда у компании есть краткое и чёткое название. Возьмём, к примеру, Google. Запоминающееся название в сочетании с колоритным шрифтом формируют сильную айдентику бренда. Поскольку словесные лого фокусируются на имени компании, ключевую роль в них опять же играет типографика. Выбирайте или создавайте шрифты, которые передают суть и характер вашего бизнеса

К примеру, маркам модной одежды подойдёт чистая, элегантная типографика с претензией на роскошь. А вот юридическим и правовым агентствам лучше выбрать традиционные «тяжеловесные» шрифты. Они формируют ощущения надёжности и безопасности.

Логотипы-картинки и символы

3) Графические знаки (или логотипы-символы)

Логотип-символ (иконка, пиктограмма) — дизайн, основанный на графике. Это визуальный образ, который всплывает в памяти, когда вы слышите или думаете, например, об Apple, Twitter, Android. Логотипы этих компаний настолько знаковы, настолько укоренены, что их узнаваемости можно только позавидовать.

Визуализация бренда, построенная исключительно на образе — это здорово. В логотип-символ можно заложить глубокую идею, с его помощью можно вызывать нужные эмоции у аудитории. Однако данное решение подходит далеко не всем. С таким лого сложно продвинуть новый, но неуникальный бизнес. Мобильному приложению для обмена исчезающими сообщениями Snapchat с лого в виде призрака запомниться и раскрутиться удалось. John Deere с «дорогим» логотипом в виде бегущего оленя тоже. Ещё один пример удачного использования логотипа-символа демонстрирует Всемирный фонд дикой природы с его стилизованным изображением панды. Но в целом таких примеров не так уж много. Так что, если вы не уверены в триумфальности идеи бизнеса, лучше сделайте ставку на название, а не на символ.

4) Абстрактные логотипы

Абстрактная метка — специфический тип графического логотипа. В его основе не общепонятные узнаваемые образы (как яблоко Apple и птица Twitter), а абстрактные геометрические формы. Самые известные примеры — круг Pepsi, диск Google Chrome, цветок Adidas. Как и все графические логотипы, абстрактные метки конденсируют бренд в единый образ. Но только они позволяют создавать поистине уникальные и неповторимые образы для визуального представления компании. С помощью абстрактного логотипа вы можете передать то, что символизирует ваш бренд, не опираясь на культурно-исторический опыт. Идеи и эмоции можно заложить с помощью цвета и формы — никаких узнаваемых шаблонов не надо.

Абстрактные логотипы — беспроигрышный вариант для международных торговых компаний. Значок — он и в Африке значок, а название, если не в каждой, то во многих из стран присутствия переводить точно придётся.

Для создания абстрактных логотипов лучше привлекать профессионалов, умеющих комбинировать цвета и формы для создания общедоступных смыслов.

5) Логотипы-талисманы

Зачастую красочный, иногда мультяшный и всегда весёлый, логотип-талисман — отличная возможность создать лицо бренда, его официального представителя, персонажа, который станет «послом» вашего бизнеса. Талисманы отлично подходят компаниям, работающим с семьями и маленькими детьми. Они позволяют формировать нужную атмосферу, задавать динамику и настроение при общении с аудиторией. Вспомните хотя бы mr Proper, основателя KFC полковника Сандерса

Одно из главных преимуществ логотипа-талисмана заключается в том, что он способен стимулировать взаимодействие с клиентами. Это эффективный инструмент маркетинговой деятельности в социальных сетях (SMM) и проведения промо-акций в реальном мире. Жаль только, такой тип логотипа не везде уместен. К примеру, талисманы довольно нелепо смотрятся на визитках.

Комбинированные логотипы

6) Текстово-графические знаки

Комбинированные текстово-графические знаки — логотипы, состоящие из букв / слов и изображений. Всемирно известные примеры: Burger King и Lacoste. Логотип, в котором графический образ работает в тесной связке с названием компании — универсальный выбор. Символ / талисман у аудитории сразу же начинает ассоциироваться с маркой. В будущем можно будет вовсе отказаться от текста.

7) Эмблемы

Эмблема — логотип, на котором шрифт находится внутри символа или значка. Создаются такие логотипы по принципу печатей, гербов, жетонов. Что касается области использования эмблем, то лучше всего такие фирменные знаки подходят для школ, некоммерческих организаций, правительственных учреждений, предприятий пищевой промышленности. Логотипы данного типа также пользуются популярностью у автопроизводителей. Да, многие из эмблем выглядят несовременно, но есть примеры удачной модернизации дизайна. К примеру, в XXI веке актуально смотрятся обновлённые эмблемы Harley-Davidson и Starbucks.

Недостатком логотипов данного типа является высокая степень детализации. Замысловатый дизайн знаков плохо воспроизводится на полиграфической продукции, превращается в кашу на экранах мобильных телефонов. Да и вышивать эмблемы с подписью на корпоративных футболках долго и дорого.

Хотя, конечно, профессионалам всё под силу. И дизайнеры «СофтЭксперт» могут создать эмблему, которая будет удачно смотреться на всех маркетинговых материалах вашей компании. Мы предлагаем сильные, смелые решения, с которыми вы будете смотреться как непревзойдённый профессионал своего дела.

Примеры логотипов, созданных нашими дизайнерами:

Цена создания логотипа в Москве, Туле и других городах ЦФО начинается

от 15 000 ₽. Обсудить детали возможного сотрудничества можно по нижеуказанным контактным данным.

Контактная информация:

Телефон (многоканальный): 8(4872)700-270, доб 240.
Карпачёва Ирина Николаевна
Должность: руководитель отдела веб-разработки
E-mail: [email protected]

Как сделать логотип из картинки: основные способы

Приветствую вас, уважаемые читатели!

Хороший, запоминающийся логотип – основа любой компании, её бренд. Этот элемент должен быть интересным, привлекающим внимание, а также должен отражать специфику работы предприятия. При открытии бизнеса, разработке сайта и печати рекламных материалов должно быть уделено достаточное количество внимания логотипу.

Можно пойти двумя путями:

Обратиться к специалистам, которые профессионально занимаются разработкой дизайна логотипа. В этом случае вам не нужно заморачиваться по поводу шрифтов, картинок и цветовой гаммы — вам делают несколько вариантов на выбор, а затем дорабатывают тот, который понравился больше всего.

Сделать логотип самостоятельно, сэкономив свои средства. Существует множество графических редакторов, с помощью которых вам под силам выполнить эту задачу. Главное — научиться владеть одной из этих программ.

Как создать логотип?

Если вы художник, то можете попробовать с нуля нарисовать уникальный логотип. Это будет по-настоящему круто! Нарисованные лого смотрятся классно, и можно быть уверенным в том, что ни у кого больше не будет подобного шедевра.

Однако реалии таковы, что большинство людей всё-таки не обладают навыками рисования. В этом случае нужно действовать следующим путём.

Нарисуйте на бумаге черновой вариант лого. Каким вы его видите? Что на нём должно быть? Обычно он сочетает в себе какую-то картинку (или фотографию) и название (или аббревиатуру) компании. Если так, то ваша задача — подобрать подходящую картинку и использовать её в своём логотипе.

Где искать картинки? — На просторах Интернета.

Рекомендую не искать бесплатные картинки в Яндексе или Гугле — есть вероятность, что вы нарушите чьи-то авторские права. Или потом увидите выбранное изображение на логотипе конкурирующей компании. Будет лучше, если вы пойдёте на платный фотосток, где купите понравившееся изображение. Тогда к вам никаких претензий не будет.

Какую картинку искать? — Есть несколько советов:

Выбор цвета. Логотип должен соответствовать фирменному стилю компании (или цветовой гамме сайта, если он уже есть).
Оптимальные пропорции. Если вы решили, что изображение в вашем логотипе будет квадратное, то ищите картинку с соответствующими пропорциями.
Выбирайте что-то особенное, что будет характеризовать именно вашу компанию. В будущем вы в любой момент можете сменить логотип, если он надоест. Но зачем вам эта катавасия? Сразу выбирайте актуальную картинку.
Изображение должно ассоциироваться с вашей деятельностью или названием фирмы.
Проще — лучше. Слишком яркая фотография и множество мелких деталей могут испортить впечатление.
Важно не просто выбрать красивую и яркую картинку, а хорошо её обработать, сделав индивидуальной.
Вдохновение можно черпать у других. Посмотрите, какие логотипы используют другие компании.

Как обработать картинку?

Для того, чтобы обработать картинку или добавить к ней текст с заголовком, необходимо использовать графический редактор. Для работы с некоторыми из них нужны определённые навыки, однако есть и более простые варианты. Сразу скажу, что НАИЛУЧШИЙ результат вы получается при работе в профессиональных программах, о которых пойдёт речь ниже.

Лучшей программой, по мнению многих (и я в их числе) является Фотошоп. Возможностей — масса. Просторов для творчества — сколько хотите! При помощи различных инструментов можно изменить исходную картинку до неузнаваемости: сделать замену цвета, добавить тени, поменять экспозицию, наложить специальный фильтр и т.д. У этого редактора есть один минус — его нужно освоить, а на это понадобится не один час времени. Кроме того, он платный.

CorelDRAW — ещё одна мощная графическая программа. Она потребует немало времени для своего изучения. Основное отличие от Фотошопа в том, что она создаёт изображения в векторе (формат CDR). Подробнее обо всех её преимуществах читайте ТУТ.

GIMP — достаточно функциональный редактор. Он включает в себя множество функций, которые позволят превратить картинку в красивый логотип. Добавляйте текст, работайте со слоями, меняйте контрастность — всё в вашем распоряжении. Главное достоинство GIMP — он распространяется абсолютно бесплатно. Вы можете свободно скачать эту программу и работать в ней, не заморачиваясь лицензионными ключами и активацией.

Paint — стандартная, довольно примитивная программа, которую, тем не менее, тоже можно использовать для обработки исходной картинки.

Онлайн-редакторы

Их много, но я выделю только те, которыми мне приходилось пользоваться.

Fotostars.me — картинки для своего сайта я часто обрабатываю именно здесь. Есть возможность изменения размера, яркости и контраста, наложения фотоэффектов, поворота, добавления рамок и т.д.
Photoshop Online — обладает основными функциями Adobe Photoshop. Преимущество в том, что не нужно скачивать и устанавливать программу. Работа ведётся в онлайн режиме.

Пользовались другими редакторами? Расскажите о них в комментариях к этой статье! Будет интересно всем.

Основная мысль, которую я хочу вам донести:

Если вы хотите создать профессиональный, брендовый логотип, то вам (если вы не планируете его рисовать вручную) придётся:

скачать картинку со стока (с правами на печать),
а также освоить Photoshop, CorelDRAW или GIMP.

Скачать бесплатное изображение с Гугла и в Пэйнте прилепить к нему надпись — это, извините, несерьёзный подход к делу. Детский сад.

Или, если не хотите заморачиваться, обратитесь к специалистам, которые разработают вам хороший логотип. Он станет отличным началом (или продолжением) вашей успешной деятельности.

Надеюсь, что данная статья была вам полезна. Остались вопросы? Задавайте их в комментариях!

С уважением, Сергей Чесноков

Skillbox Media / Скрытый смысл известных логотипов

Непонятные картинки могут казаться зрителю таковыми, но вряд ли дизайнер назовёт собственную работу непонятной. Обычно созданию абстракции предшествует вполне конкретная задумка — на этапе разработки знака. Сейчас мы убедимся в этом на примерах.

Если логотип нужен для кондитерской, первое, что приходит в голову, — нарисовать пончик. Если для модного бренда — изобразить платье. Показать в логотипе сферу деятельности компании — одно из наиболее очевидных решений. Но чтобы такой знак не смотрелся банально, многие дизайнеры лишь отталкиваются от конкретного образа, а потом стилизуют его почти до неузнаваемости.

Давайте, например, взглянем на знак бренда техники VAIO. Это не просто надпись с интересной типографикой: первые две буквы здесь имеют форму аналогового сигнала, а последние буквы похожи на запись цифрового сигнала — единицу и ноль. Сакральный смысл этого логотипа — объединение цифровых и аналоговых технологий.

Хотите научиться создавать хорошие шрифтовые композиции для айдентики и рекламы? Записывайтесь на наш курс по типографике!

Зачастую знак сочетает в себе одновременно несколько образов. Вот логотип сервиса по подбору авиабилетов Skyscanner: в нём можно разглядеть и небо с восходящим солнцем, и улетающий вдаль самолёт, и символическое изображение процесса сканирования — в виде расходящихся в разные стороны линий. Все эти интерпретации напрямую связаны с работой сервиса.

Брендинг включает в себя продуманный месседж, который несёт компания. Это всегда что-нибудь позитивное: клиентоориентированность, доступность, надёжность… И абстрактный логотип тоже может транслировать ценности бренда.

Например, представители Toyota утверждают, что их символ — это не просто три овала: пересекающиеся кольца символизируют единение клиентов и компании, а внешний овал очерчивает технические возможности будущего. Впрочем, в народ пошла и альтернативная интерпретация, согласно которой на логотипе изображена нитка, продетая в игольное ушко. Это отсылка к истории компании — Toyota раньше производила швейные машинки. Хотя ничего реально напоминающего иголку с ниткой в знаке нет:

Последний логотип Adidas из трёх полосок, напоминающих гору, символизирует преодоление трудностей, которое важно для спортсменов. Знак действительно похож на препятствие, и это достигнуто композиционными средствами. Во-первых, полоски расположены на разном уровне и дают ощущение неровности. Во-вторых, мы читаем название слева направо, а направление полосок противоположно. Так создаётся образ сопротивления:

Ещё одна очевидная идея для логотипа — изобразить название бренда. На ум сразу же приходят яблочко Apple и гамбургер Burger King. Но эти картинки простые и понятные.

Давайте лучше взглянем на более абстрактный символ ещё одного автомобильного бренда — Subaru. На нём нарисованы не просто звёздочки, а звёздное скопление Плеяды: именно так с японского переводится название компании.

Иногда детали, отсылающие к названию, почти незаметны. Например, в значке Pinterest буква P имеет заострённый конец — это изображение кнопки/булавки (pin).

Ещё один интересный пример связи логотипа с неймингом — это знак Starbucks. Кофейню назвали так в честь литературного героя — моряка. Соответственно, знак задумывали в морской тематике — и остановились на образе русалки. Первый логотип был весьма провокационным, но и в современной сдержанной версии русалка сохранилась:

Логотип не отвечает или временно недоступен • Про CSS

Заинтересовалась вопросом: как лучше всего верстать логотипы на сайте? Как правильно и почему? Картинкой или фоном? Как логотип будет выглядеть при печати? Как обеспечить доступность для скринридеров и как сделать подсказки для поисковиков?

Спасибо всем участникам дискуссии за полезные комментарии : ) Я сделала несколько вариантов разметки, провела ряд тестов и узнала много интересного.

Есть разные способы вставить логотип на страницу:

фоновой картинкой (обычно на элементе заголовка)
обычной картинкой
инлайновым SVG

Мне больше всего нравится вариант с фоновым изображением, заданным для h2. Почему именно этот? Потому что логотип обычно содержит название компании или сайта, и это название логично сделать главным заголовком на странице. Зачастую логотип — это просто красиво оформленное название, поэтому можно написать название текстом, а потом с помощью стилей оформления скрыть его и вместо него показать картинку. Помимо доступности текста для скринридеров, такой вариант разметки позволяет без проблем добавить какие-нибудь эффекты по наведению (например, менять картинку).

Вроде бы отличный способ, но нет. Логотип в этом случае невозможно скопировать или сохранить, а если пользователь просматривает страницу без картинок, вместо логотипа он увидит пустое место, то есть заголовок сайта окажется для него недоступен.

И тут возникает вопрос доступности. Что такое доступность? Для кого должен быть доступен логотип сайта? Обычно под доступностью подразумевается доступность веб-контента для людей с ограниченными возможностями, но я предлагаю посмотреть на вопрос немного шире, и подумать над доступностью логотипа:

при плохом соединении с интернетом, когда на странице может не быть стилей или картинок;
при печати страницы;
для копирования;
для поисковиков;
для манипуляций с помощью CSS.

Мы привыкли к хорошему интернету, который есть практически везде, и можем думать, что так у всех, пока нам внезапно не потребуется срочно открыть какую-то страницу находясь в метро или, например, в отпуске, в отеле с полудохлым вайфаем. Если вы бывали в такой ситуации, наверняка отвалившиеся стили или недогрузившиеся картинки из разряда редких мифических существ для вас резко перешли в разряд острых насущных проблем. «Да кто вообще делал этот тормозной сайт?!». В общем, стили могли не доехать, а картинки могли быть отключены пользователем для экономии трафика и ускорения загрузки страниц. Такое случается.

С печатью всё более-менее понятно: иногда люди печатают страницы, и логотип при этом не должен превращаться в тыкву, особенно если одновременно он является названием сайта.

Вопрос копирования актуален для контент-менеджеров, которым может понадобиться скопировать логотип с сайта компании. Если на сайте раздобыть не получится, можно прибегнуть к помощи поисковиков. Смогут ли поисковые роботы найти на странице ваш логотип?

Доступность для CSS может быть актуальным вопросом для разработчиков. Как сделать доступный и интерактивный логотип одновременно?

Ниже мы рассмотрим все способы сделать логотип и проверим как у них с доступностью в широком смысле этого слова.

Для тестов в MacOS использовался VoiceOver (встроенный скринридер) и браузеры Chrome, Firefox и Safari. На Windows 7 использовала NVDA и браузеры Chrome, Firefox и IE10.

Логотип фоном

Пример разметки:

<h2>Название сайта</h2>

.logo {
  
  width: 200px;
  height: 50px;
  
  text-indent: -1000px;
  overflow: hidden;
  
  background: url(logo.png) 50% 50% no-repeat;
}

Текст можно прятать разными способами: помимо text-indent иногда используют font-size: 0. Интересно, что в обоих случаях текст остаётся доступным для скринридеров, хотя и с некоторыми оговорками. Текст будет прочитан, но при этом скринридер не сможет корректно выделить элемент, который он читает в данный момент.

Обычно VoiceOver выделяет читаемый элемент заметной чёрной рамкой:

С этими способами, в зависимости от браузера, рамки может не быть вообще, или она будет указывать на другой элемент.

Это легко исправить, если добавить элементу с логотипом role="img". Правда, в этом случае скринридер начнёт читать его как картинку без alt — текст внутри окажется недоступен. Чтобы решить эту проблему, элементу нужно добавить aria-label, который содержит название сайта.

Итоговая разметка будет выглядеть как-то так:

<h2
 
  role="img"
  aria-label="Название сайта"
>Название сайта</h2>

Ещё можно скрывать текст с помощью .visuallyhidden (про него можно почитать тут). В этом случае для обеспечения доступности не нужны вспомогательные атрибуты, но для текста потребуется дополнительная обёртка с классом .visuallyhidden:

<h2>
  <span>Название сайта</span>
</h2>

В этом случае VoiceOver также выделит элемент чёрной рамкой, но по форме и размеру она будет соответствовать скрытому тексту:

VoiceOver во всех браузерах ведёт себя более-менее одинаково: чтобы он корректно воспринимал элемент, ему достаточно задать role с aria-label или использовать .visuallyhidden.

В NVDA на Windows всё не так радужно:

в Chrome вообще не читается элемент с .visuallyhidden
в Firefox у элемента с .visuallyhidden обрезается текст

Интересно, что при этом в IE10 прочитался вообще весь возможный текст, игнорируя даже role="img".

Доступность: 3/6

без стилей да
без картинок нет
для печати плохо
для копирования нет
для скринридеров да
эффекты по наведению да

Без картинок на странице вместо логотипа будет пустое место. Сохранить как картинку такой логотип не получится, если только продвинутый пользователь не воспользуется веб-инспектором.

По умолчанию фоны, заданные в стилях, не печатаются. Печать фоновых изображений можно включить в параметрах печати, но если пользователь не сделает это руками, вместо логотипа опять-таки будет пустое место.

Проблему можно решить разделением стилей для печатной и для экранной версий: для этого можно использовать @media screen (стили только для экранов) и @media print (стили для печатной версии). Таким образом, печать логотипа не будет проблемой, если позаботиться об этом заранее.

На самом деле, при таком способе не обязательно скрывать текст — он может быть частью логотипа, как это сделано на сайте Лии Веру:

и на сайте HTML5 Doctor:

Можно спорить являются ли эти примеры логотипами либо это логотип + заголовок страницы, но по-моему, в данных случаях пары картинка + текст воспринимаются как одно целое, поэтому я бы считала их логотипами.

Доступность: 5/6

без стилей да
без картинок да
для печати да
для копирования нет
для скринридеров да
эффекты по наведению да

Логотип всё ещё нельзя скопировать, но с остальным проблем не будет: при отключенных картинках и при печати пользователь хотя бы увидит текст.

Правда, есть один нюанс: если текст белый, при печати страницы с настройками по умолчанию он может получиться белым на белом, так что в этом случае о стилях для печати также нужно позаботиться заранее.

Логотип картинкой

Пример разметки:

<img src="logo.png" alt="Название сайта">

Доступность: 5/6

без стилей да
без картинок да
для печати да
для копирования да
для скринридеров да
эффекты по наведению нет

В этом варианте при незагрузившихся картинках отобразится содержимое атрибута alt. Возможно, это будет не очень красиво выглядеть, но текст всё ещё можно будет прочитать.

Преимущество этого способа в том, что он не сломается при отсутствии стилей и при печати, логотип легко можно сохранить со страницы, и всё это без каких-либо усилий с вашей стороны.

Недостаток — недоступность содержимого для CSS, если нужно менять картинку по наведению или добавить CSS-анимации.

Например, если это SVG-изображение, при инлайновом SVG можно было бы менять цвета заливки или скрывать части логотипа. Если вставить его через img, внутренее содержимое картинки по наведению менять не получится, хотя стилизация с помощью CSS-фильтров или трансформаций самого img всё ещё будет доступна.

Во всех браузерах читалки корректно читают картинку с alt. NVDA В IE10 прочитала не только alt, но и урлы картинок.

Инлайновый SVG

Пример разметки:

<svg viewBox="0 0 100 50"
  xmlns="http://www.w3.org/2000/svg">
  <path d="..."/>
</svg>

Доступность: 4/6

без стилей да
без картинок да
для печати да
для копирования нет
для скринридеров плохо
эффекты по наведению да

Код такого логотипа, скорее всего, будет довольно развесистым и с ним будет не очень удобно работать, но по сравнению с предыдущими способами у него есть несколько преимуществ: логотип не сломается при отвалившихся стилях, на него никак не повлияют выключенные картинки и он не потеряется при печати.

Правда, если оформление логотипа задано в CSS, без стилей он может стать просто чёрным, но его всё ещё можно будет прочитать.

Также векторному логотипу обязательно нужно задавать в атрибутах ширину и высоту, даже если вы потом планируете переопределить их стилями. Дело в том, что SVG-изображение, у которого задан viewBox, но не заданы размеры, постарается занять всё доступное пространство. Чтобы без стилей страница не превращалась в парад гигантских иконок, достаточно всем SVG на странице указать ширину и высоту, потом вы легко сможете задать в CSS нужные размеры (приоритет в данному случае будет у CSS).

С доступностью для скринридеров всё не так просто. В SVG есть специальные элементы для описания содержимого: title и desc, но они читаются не всеми читалками и не во всех браузерах. Например, Firefox и Safari их читают, а Chrome — нет. Я рассматриваю вариант последовательного чтения страницы сверху вниз, поведение по наведению на элемент может отличаться. Также в SVG можно вставить текст, но он прочитается только в Хроме. Если указать в SVG заголовок, описание и текст одновременно, такой элемент может быть прочитан в большинстве браузеров.

Также Леони Уотсон рекомендует добавить атрибут aria-labelledby, указав в нём id заголовка и описания. Получится примерно такое:

<svg viewBox="0 0 100 50"
  xmlns="http://www.w3.org/2000/svg"
  aria-labelledby="title desc">
  <title>Title</title>
  <desc>Description</desc>
  <text y="-10">Text</text>
  <path d="..."/>
</svg>

Таким образом можно сделать SVG максимально доступным для скринридеров, но следует помнить, что поведение разных скринридеров может отличаться, также как и доступность элементов в разных браузерах и на разных операционных системах. Перед использованием кода на реальных сайтах всё обязательно нужно тестировать.

Что лучше выбрать?

логотип картинкой — cамый надёжный способ, но он может оказаться неподходящим, если нужна интерактивность;
логотип фоном позволит добавить эффекты вроде замены картинки по наведению. В случае использования SVG-изображения, код не будет загромождать разметку, доступность можно обеспечить вспомогательными атрибутами, а проблема печати фонов решается стилями для печати;
инлайновый SVG даёт более широкие возможности взаимодействия с помощью CSS или JS, но код будет загромождать разметку, а о доступности для скринридеров нужно позаботиться отдельно.

Вообще если логотип одновременно выполняет обязанности названия сайта, возможно, для надёжности имеет смысл переложить эти обязанности на какой-нибудь заголовок с .visuallyhidden, а логотип оставить только для визуального отображения. Чтобы для скринридеров объявить логотип картинкой (если он не картинка, конечно), ему можно добавить role="img" + aria-label, после этого скринридеры перестают читать содержимое элемента как конент и начинают воспринимать его как изображение.

Доступность для поисковиков

Изначально это вид доступности я рассматривала вместе с остальными, но потом пришла в выводу, что он никак не зависит от разметки самого логотипа.

Как я проверяла: в гугле и яндексе делала запросы вроде «<COMPANY NAME> logo», ожидая увидеть логотипы с сайта компании в начале поисковой выдачи поиска по картинкам. Яндекс почему-то редко находил то, что нужно, зато гугл всегда первыми результатами показывал искомые логотипы, если только мог их найти.

Так вот: на Яндексе, Youtube и Facebook логотип сделан фоном, но при этом логотипы всех этих компаний легко находятся гуглом. У всех трёх компаний есть страницы с логотипами и у всех логотип указан в микроразметке.

У Гитхаба логотип сделан инлайновым SVG, но PNG-версия указана в микроразметке, а также есть страница с логотипами. Логотипы Гитхаба гугл находит без проблем.

По моим наблюдениям, гугл изначально показывает картинку из микроразметки, но если есть страница с логотипами, предпочтёт показывать картинки оттуда. Если логотип сделан картинкой, но на сайте есть микроразметка, содержащая ссылку на логотип, гугл выберет картинку из микроразметки. Например, так сделано на сайте Джеффри Зельдмана, и гугл показывает картинку из микроразметки, картинка с названием сайта при этом в поиске не обнаруживается.

Из этого я делаю вывод, что гуглу совершенно всё равно как выглядит разметка вашего логотипа, потому что он никак её не использует. Так что если вы хотите помочь поисковым роботам, укажите ссылку на логотип в микроразметке. Если вы хотите помочь людям, которые будут искать логотип компании, сделайте страницу с логотипами. Разметка логотипа на странице не решает такие задачи.

В заключение (этой кошмарно длинной статьи) следует сказать, что я ни разу не эксперт по доступности и могла допустить ошибки и неточности. Сообщите мне о них, пожалуйста, если встретятся. Также буду рада дополнениям и хорошим ссылкам по теме.

Комментарии по работе с читалками

VoiceOver удобный, показывает читаемый элемент и показывает текст, который читает в данный момент, это очень удобно для тестирования;
NVDA свободно распространяется, быстро устанавливается и готов к работе сразу. Читаемый элемент не показывает, но может показывать читаемый текст в отдельном окне;
Jaws платный, но есть версия для тестирования, которую нужно перезапускать раз в 40 минут вместе с перезагрузкой компа. У меня очень долго скачивался и ставился, потребовав в процессе несколько раз перегрузить комп. Текущий элемент не подсвечивает, читаемый текст не показывает. Возможно, он всё это умеет, но я в настройках не нашла, и воспользоваться им как следует у меня не получилось.

Спасибо Роме Комарову за помощь с текстом.

логотипы Такси PNG картинки для бесплатного скачивания

Логотипы Такси PNG картинки можно скачать бесплатно. Есть около 27 комплектов изображений. Эстетичные логотипы Taxi PNG можно использовать для коммерческой графики.

Taxi logos PNG изображения информации

1. Общая: 27 P+
2. Авторское право: Pngimg.com
3. Формат: PNG images
4. Обновление: 2019-03-12

Taxi logos PNG скачатьs