Как вставить логотип на сайт

Фавикон. Как добавить логотип (иконку) сайта на вкладку браузера

После ряда обновлений на сайте WordPress часть функций пропала, как обычно. А именно нет иконки сайта.

Не совсем люблю принудительные обновления. По-моему, они не становились лучше и удобнее, зато хлопот доставляли порой немало. На данный момент самым пугающим выскакивает предупреждение на айфоне о доступности обновления. Старательно и аккуратно жму: “напомнить позже”. Однажды щелчок был сделан не в том месте и не в то время. И проклятая 10ка начала загружаться на моих глазах. Выключение телефона ни к чему, естественно не привело, и к моему горю, 10-ка нагло установилась. Многие пользователи и не заметили бы обновления ios, как и я раньше. Но тут была другая ситуация – мне не понравились все изменения, вплоть до звука клавиш. Целый вечер убился на поиск, скачивание и установление старой девятки. Некоторые личные файлы были, конечно, утеряны окончательно, как например и старая иконка для этого сайта в формате .png или хотя бы .psd. Создавать новую – очень лень, поэтому воспользуюсь остатками роскоши – изображением в .jpg. А айфон теперь трогаю бережно, зная, что в любой момент может соскочить палец не на тот пункт в предупреждении о готовности обновления к установке.

ФАВИКОН (favicon) – ИКОНКА, ЛОГОТИП, КАРТИНКА САЙТА, ЭМБЛЕМА, то есть небольшое изображение, которое видят пользователи интернета на своих вкладках, окнах, закладках перед названием страницы сайта.

Рекомендовалось загружать иконки оптимальным размером 16 на 16, 32 на 32, 120 на 120 пикселей в формате .png. Конечно, лучше изготовить картинку большего размера, а затем сжимать ее для дальнейшего использования, как вздумается, или как потребуется. Нужно учитывать, что уже сейчас есть устройства, которые воспроизводят фавикон и в размере 32, 64 (retina-дисплей, safari, новые платформы windows и проч). Различные темы WordPress могут предлагать в настройках темы задать иконку, там же и стоит рекомендованный для нее размер. Если в теме этого нет, то иконку можно вставить через файловый менеджер или через код.

Код вставки иконки сайта, фавикона выглядит так:

Где тип ресурса задается атрибутом rel. Допустимо использовать icon и shortcut icon (для браузера IE), тип данных указывается форматом изображения:

image/x-icon – для формата ICO; image/gif — для формата GIF; image/jpeg — для формата JPEG; image/png — для формата PNG; image/bmp — для формата BMP.

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

В Консоли выбираем Внешний вид, подпункт Редактор. Слева выбираем шаблон заголовка header.php

В данном случае вставлен адрес (ссылка) изображения, загруженное ранее в галерею (медиатеку)

Вставляем код – строка 19 на снимке

Обратите внимание, что формат иконки в type=”image/ jpg “ нужно изменить на png, если ваше изображение в .png

Что такое логотип на сайте

13 октября 2017 года. Опубликовано в разделах: Азбука терминов. 5671

Фактически, это картинка, с которой будут ассоциировать вашу компанию (это в идеале, если все сделано правильно). Например, у Nike логотип «правильный», потому что узнаваемый.

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

Для чего брендам нужен логотип

У этого знака есть несколько брендинговых и маркетинговых функций:

• Узнаваемость, отстройка на фоне конкурентов.
• Защита торговых знаков и марок от подделки, копирования. Важно зарегистрировать и оформить все необходимые патенты на всех рынках, на которых планируете работать. Если этого не сделать, может обойтись очень дорого.
• Реклама, формирование лояльности и доверия к бренду. Качественный логотип отработает любые средства, вложенные в его создание.

Какие бывают логотипы

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

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

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

Общие требования к логотипу

• Не используйте несочетаемые цвета и не комбинируйте больше двух-трех.
• Избегайте шрифта с нечитабельным начертанием слов. Выглядеть будет, возможно, оригинально, но прочесть никто не сможет, название не запомнит.
• Изучите конкурентов. Даже если вам очень нравится вариант, но у них похожие уже есть – откажитесь. Это не столько вопрос оригинальности, сколько финансовых потерь. Например, вы будете проводить активные рекламные кампании, а поток клиентов попадет не к вам, потому что не сумели сделать четкое позиционирование.
• Не мельчите. Ни с буквами, ни с графикой. Помимо размещения логотипа на сайте, вы будете использовать его в других форматах, например, на визитках. Мелкие детали просто сольются в одно пятно.
• Чтобы прикинуть, как будет смотреться на вебсайте, уменьшите стороны примерно до 50 пикселей. Теоретически, разместить в шапке можно и больший, но практически, это часто нецелесообразно, поскольку занимает полезную площадь другого контента.

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

В зависимости от изображенных элементов, делятся на:

• Графические. В основе картинка, иконка, значок, фигура
• Трехмерный. Он трансформировался из предыдущего, отличается иллюзией объема. Для примера, шарик компании Xerox.
• Текстовые. Как понятно из названия, это символы. Чаще всего, название фирмы, аббревиатура. Делать длинные не принято по причине неудобства использования. Если слов несколько – это слоган. Он может быть написан рядом и выглядеть как единая конструкция, но он не входит в лого.
• Комбинированные – объединяют в себе изображение и надпись.
• Эмблемы. Самый технически сложный и трудоемкий вариант, для которого характерны простая геометрическая форма и при этом сложная композиция.
• Некоторые отдельно выделяют геральдический стиль с изображением флагов, гербов, символов геральдики. Логотип Peugeot.

Как сделать логотип для сайта

1. Обратиться к дизайнеру. Не поленитесь разместить заказ на сайтах фрилансеров, отправить в несколько студий и потом сравнить цены. Время, потраченное на поиски, окупится, поскольку разница будет существенной. Не всегда дороже – значит лучше.
2. Разработать самостоятельно. Если у вас есть навыки работы с графическими программами, такими как Photoshop, InDesign, чувство вкуса, богатое воображение и много свободного времени.
3. Третий вариант: найти вебсайты, помогающие создать логотип онлайн. Работают они по принципу генерации и комбинирования различных параметров. Можно получить результат по своему вкусу, меняя настройки фона, цветов, градиентной заливки, шрифтов. Рекомендуют такие: Creatr.cc, Turbologo.ru, Logaster.ru
4. Четвертый, воспользоваться специальным профессиональным ПО именно для разработки логотипов. Free Card Maker, Logo Design Studio, AAA Logo, GIMP, Banner Maker Pro.

Технические требования к логотипам на сайтах

1. Размещается вверху страниц, чаще всего в хэдере (шапке).
2. Лучше использовать картинку с прозрачным фоном (допустимо с любым). Оптимально выбирать svg – векторный формат. Поскольку растровый (популярный jpg) при масштабировании теряет качество отображения.
3. Если никак нельзя избежать размещения слогана вместе с логотипом, оформляем его текстом либо в векторе. Буквы в растре нечеткие, а при малейшем изменении размера станут нечитабельными.
4. Само изображение нужно положить в корневую папку на сервере, название должно быть logo, чтобы было легко искать.
5. На внутренних страницах сайта используют как элемент навигации. По умолчанию принято и интуитивно используется многими интернет-пользователями, при клике возвращает на титульную страницу.
6. Соблюден принцип адаптивности. О нем расскажем ниже.

Как вставить логотип на сайт

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

А также стили css, назначая показывать нужный размер в зависимости от разрешения устройства, которое к нему обратилось.

Для логотипа, как и для любой картинки, полезно прописать атрибуты alt и текст всплывающей подсказки title.

1. После оценки влияния фирменного стиля на успешность бизнеса очевидна роль логотипа для сайта, что это не просто элемент декора. Это рабочий инструмент для повышения узнаваемости, лояльности.
2. Отнеситесь к разработке фирменного стиля, как к лицу вашей компании. Не обязательно делать дорого, важно сделать аккуратно и презентабельно.
3. Нужно учесть три компонента и поработать над каждым: форма, посыл, цвет.
4. Протестируйте варианты логотипа на других людях, представителях ЦА, получите обратную связь от коллег и клиентов. Лучше на начальном этапе внести корректировки, чем впоследствии проводить ребрендинг.

– Опыт работы более 3х лет.
– Специально разработанные проекты.
– Отлаженные процессы.

Как установить логотип на сайт

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

Пример логотипа, установленного на сайт .

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

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

После создания логотипа сохраняем его изображение у себя на компьютере. Теперь нужно залить эту картинку на хостинг. Для этого нужно зайти на тот хостинг, которым Вы пользуетесь, перейти в файловый менеджер и найти папку /wp-content/themes/название вашей темы/images. В нее и загружаем созданное изображение логотипа.

Теперь пришло время установить логотип на сайт. Для этого в меню WordPress необходимо перейти в раздел «внешний вид», в котором выбрать пункт «настройки темы» с названием темы, установленной на Вашем сайте. В верхней части появившегося окна есть поле «изображение логотипа», в него и вставляем полный путь к залитой на хостинг картинке. Обязательно сохраняем изменения.

Однако не во всех темах есть поддержка логотипа. В таких случаях необходимо указать его наличие прямо в коде. Заходим в консоль, выбираем раздел «дизайн» и пункт «редактор». Здесь нужно выбрать пункт «Заголовок (header.php)».

Чтобы узнать, куда именно вставить логотип, нужно посмотреть имеющийся код. Ищите в нем следующие теги: div id=”logo”, div class=”header-title”, div id=”site-logo”, и другие, в которых название в кавычках можно примерно перевести как «логотип».

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

Вот так просто можно добавить свой оригинальный логотип для сайта и сделать его еще привлекательнее.

Развивайте и продвигайте свой сайт по нашей программе, став студентом нашего Тренинг-Центра.

Источники:

Фавикон. Как добавить логотип (иконку) сайта на вкладку браузера

http://semantica.in/blog/chto-takoe-logotip-na-sajte.html

Как установить логотип на сайт