Как добавить фавикон на лендинг пейдж. Как поставить фавикон в директе
Как добавить фавикон на сайт
Добрый день. Сегодня просматривал разные сервисы, которые анализируют сайты, выводят статистику и дают рекомендации по улучшению и исправлению ошибок. И в разделе “юзабилити”, большинство из них, проверяли наличие фавиконки.
Фавикон – это картинка, которая отображается во вкладках браузеров и рядом со снипетом в поисковике Яндекс.
В связи с этим, решил написать статью о том, как добавить фавикон на сайт, чтобы ваши лендиннг пейдж выглядели симпатичнее в выдаче и солиднее в глазах покупателя. Для кого-то это покажется ерундой ни на что не влияющей, но с первых дней ведения блога, я пытаюсь научить вас не полагаться только на свои ощущения, а брать и тестировать, оставляя то, что действительно лучше работает.
Как установить favicon на лендинг пейдж
Первое, что нужно сделать — это создать изображение размером 16х16 или 32х32px и сохранить его с под именем favicon. Сделать картинку можно как в любом текстовом редакторе, так и на специализированных сайта по созданию фавиконок. Сейчас можно пойти несколькими путями: самому рисовать иконку в одном из сервисов или в графическом редакторе или сделать фавиконку из уже готового изображения.
Давайте предположим, что у вас уже есть картинка, которую вы хотели бы видеть в качестве иконки своего сайта. Для того, чтобы превратить ее в фавиконку, можно воспользоваться сервисом pr-cy.ru/favicon/
Тут все очень просто. Нажимаем на кнопку “Выбрать изображение с компьютера…”, далее “Создать Favicon” и скачиваем саму иконку. Это будет картинка с именем favicon и расширением ico (favicon.ico). Теперь копируем иконку в корень вашего сайта, а затем открываем index.html (index.php) и между тегами head подключаем иконку к сайту:
Теперь обновите несколько раз свою страничку, и фавиконка появится. Если у вас нет готового изображения, вы можете нарисовать и скачать простенькую фавиконку в этом сервисе: favicon.ru.
Надеюсь, у вас не возникло никаких проблем с добавлением фавикон на лендинг пейдж. Если возникнут вопросы, то задавайте их, пожалуйста, в комментариях.
Обратите внимание на то, что мы сделали иконку только в одном разрешении, фавиконки для touch устройств нужно готовить целым набором.
А на сегодня – все. Всем пока. До встречи на smartlanding.biz
smartlanding.biz
Как сделать фавикон | Дорога к Бизнесу за Компьютером
Мы с Вами будем учиться делать фавикон, причем мы будем учиться делать фавикон и на блогах, и на одностраничных, и на многостраничных сайтах. Для начала — что такое фавикон? Фавикон — это маленькая картинка рядом с названием сайта, которая позволяет ему выделяться среди других сайтов, и иметь свое неповторимое лицо. Само слово favicon произошло от английского FAVorites ICON, что означает «любимая иконка». Иногда фавикон называют ласково — фавиконка.
Фавикон виден в заголовке, в закладках и в поисковой выдаче.
Сначала делаете саму картинку — фавикон. Как правило, в разных источниках рекомендуют размеры фавикона делать 16 на 16 пикселей. Я предпочитаю размеры побольше, скажем, 30 на 30, или 50 на 50, картинка получается красивей.
Словом, дело вкуса. Также пишут, что фавикон должен обязательно называться favicon.ico. Я лично пробовал другие названия, и другие расширения, такие как jpg и gif, и всегда фавиконка отображалась. Но лучше, наверное, все же использовать традиционное название.
Также существуют различные сторонние сервисы для генерации фавикона, я как-то попробовал, получилось что-то непонятное с отвратительным качеством.
Мы с Вами будем использовать проверенные дедовские методы, а именно Adobe Photoshop.
В Adobe Photoshop делаете картинку приемлемого качества, не забывая про то, что на самом деле она будет очень маленькая, и, например, буквы не будут видны, если они будут относительно картинки небольшие.
После этого сделайте название картинки favicon.ico — просто возьмите и переименуйте, как обычно переименовываете файлы. Убедитесь, что у Вас расширение отображается, а то я видел, например, файлы favicon.ico.jpg.
Установка фавикона
Полдела сделано, теперь надо поставить фавикон на сайт. Для начала нужно определиться, зарезервировано ли в коде место под него. Правой клавишей мыши кликаете по сайту в браузере и смотрите html код страницы — ищете строку вот такого содержания:
<link rel="icon"href="http://pro444.ru/wp-content/themes/arthemia/images/favicon.ico" />
Вы видите здесь после href адрес ссылки: это именно то место, где стоит, или должен стоять Ваш фавикон. Если эта строка есть — ставите Вашу фавиконку по нужному адресу.
В данном случае это значит, если у Вас хостинг Джино, что Вы заходите в папку domains, затем в папку домена pro444.ru, в папку wp-content, и дальше в папки themes, arthemia, images. В папку images и кладете Ваш фавикон favicon.ico. Такой сложный адрес характерен для блогов на WordPress, для страниц адрес будет попроще.
Другое дело, если такой строчки нигде нет. Тогда ее нужно сделать. В одностраничнике или простом html сайте такую строчку ставите между тегами <head></head>. Можете указать вместо абсолютного пути относительный, без доменного имени и http. Следующий адрес означает, что фавиконка будет находиться в той же папке, что и файл с кодом страницы.
<link rel="shortcut icon" type="image/ico" href="favicon.ico"/>
Естественно, эта строка не должна быть внутри других тэгов и вложенных в head контейнеров. Чтобы не ошибиться, ставьте ее сразу после закрывающего тэга title, например:
Естественно, что путь к файлу фавикона Вы укажете такой, где будет этот фавикон лежать. К примеру, предположим, что фавикон будет лежать в корневой папке блога http://pro444.ru. В этом случае и строчка будет выглядеть так:
<link rel="icon" href="http://pro444.ru/favicon.ico" />
Саму строчку в блоге Вы пишете в файле header.php, файл этот находится в папке темы блога. Можно поступить проще - заходите в Консоль блога — Дизайн — Редактор, находите шаблон «Шапка» (header.php), и в шаблоне после контейнера <title></title> ставите нужную строчку.
После этого Вам останется поставить файл favicon.ico в нужное место, и фавикон у Вас появится. Правда, Вы можете его сразу не увидеть, если у Вас блог кешируется, например, с помощью плагина WP Super Cache. Если Вы хотите увидеть фавикон сразу — отключите этот плагин, хотя бы на время.
Более подробные сведения Вы можете получить в разделах "Все курсы" и "Полезности", в которые можно перейти через верхнее меню сайта. В этих разделах статьи сгруппированы по тематикам в блоки, содержащие максимально развернутую (насколько это было возможно) информацию по различным темам.
Также Вы можете подписаться на блог, и узнавать о всех новых статьях. Это не займет много времени. Просто нажмите на ссылку ниже: Подписаться на блог: Дорога к Бизнесу за Компьютером
Проголосуйте и поделитесь с друзьями анонсом статьи на Facebook:
pro444.ru
Реклама от Яндекса – как поставить правильно. Маленькие хитрости, которых нету в описаниях.
Не так давно нам наконец-то дали рекламу Direct от Yandex. Кстати договор мы заключили непосредственно с Яндекс без посредничества различных партнерских центров – т.е. весь доход нам + Яндекс сам отчисляет подоходный налог, что тоже очень позитивно.После одобрения сайта, в процессе оформления документов мне уже был доступен конструктор блоков рекламы и я начал экспериментировать.
Создание блока Direct.Yandex.
Блоки директа создаются в панели управления partner.yandex.ru. Там после выбора площадки есть опция “Настроить блоки Директа” – им и воспользуемся.
Тут мы видим список уже созданных блоков или попадем сразу на выбор формата.
Теперь выберем вид блока – как расположен и сколько объявлений содержит. Жмем далее и попадаем на экран настройки дизайна блока.
Самые важные настройки внизу, выделены красным.
Иконки сайтов – это большие картинки, рядом с описанием сайта (не favicon, а именно большие картинки)
Быстрые ссылки – ссылки внутри сайта 2-3 на сайт
На странице с кодом можно выбрать срез статистики (позволит в дальнейшем посмотреть статистику по этому конкретному блоку рекламы – полезно для анализа) и включить асинхронность загрузки. И вот тут небольшая хитрость.
Как убрать картинки (иконки) сайтов из блоков рекламы Direct?
Для это придется обратиться в службу поддержки – т.к. чекбокс по сути ничего не делает ))) Работают они оперативно, не стесняйтесь писать.
Финальная настройка блока рекламы
Как установить 2 и более блоков Яндекс Директ на одной странице?
Обратите внимание на две строки, выделенных красным – это ID элемента DIV, в котором будет производиться загрузка рекламы. Если на странице присутствует более одного блока рекламы от Директа, то этот параметр надо вручную править на какой-то уникальный для каждого блока, иначе на странице будет только один блок, стоящий первым в коде. Но выведен этот блок будет в месте, которое указано для последнего. Вот так запутано. Так что ставьте уникальные ID!
Поделиться в соц.сетях
- Мой мир
- Вконтакте
- Одноклассники
- LiveJournal
- Яндекс
Related
nord-tramper.ru
Как установить фавикон на сайт?
Слово «фавикон» представляет собой сокращение от словосочетания «избранный значок» в переводе с английского языка. Данное название происходит от списка закладок в браузере Internet Explorer под названием «Избранное».
При увеличении числа вкладок название сайтов оказывается скрытым. Фавикон позволяет пользователям идентифицировать ссылки и быстро переключаться на нужную вкладку. Также иконка будет использоваться в том случае, если пользователь захочет добавить свой любимый сайт на рабочий стол на мобильном устройстве. Поэтому прежде чем установить фавикон, необходимо определиться с выбором рисунка. Такая иконка сайта будет отображаться как значок приложения на рабочем столе смартфона или планшета.
Как создать фавикон?
Чтобы создать favicon.ico, нужно просто сохранить файл формата PNG с размером 16×16 и преобразовать его в значок с png2ico. На свое усмотрение вы можете добавлять в один и тот же значок различные изображения, чтобы обеспечить альтернативные решения. Большинство современных браузеров использует для такого изображения только формат 16×16. Однако в другом контексте, например, при перетаскивании URL на рабочий стол, может быть отображена большая иконка. Если в значке ресурса содержится только изображение 16×16, то оно будет автоматически масштабироваться до нужного размера. С технической точки зрения не нужно будет добавлять альтернативные решения. Это может существенно увеличить качество изображения. Прежде, чем установить на сайт фавикон, необходимо посмотреть, как картинка будет выглядеть в разных размерах. Необходимо учитывать, что для пользователя с медленным интернетом фавикон может увеличить время загрузки страниц на несколько секунд. Это будет возможно в том случае, если файл загрузки изображения будет слишком большим, поэтому лучше не усердствовать. Добавления альтернативного формата 32×32 должно быть вполне достаточно для того, чтобы картинка хорошо смотрелась даже в случае с крупными значками. Возможность использования большого количества вариантов является приятным бонусом, который выполняется только при желании разработчиков сайта. Количество цветов лучше стараться поддерживать до 16. 16-цветную иконку можно создать при помощи png2ico. Это позволит создать файл меньшего размера, который будет быстрее загружаться. При создании изображения для добавления в favicon.ico стоит также помнить о том, что иконки могут быть отображены в различном фоновом цвете. По этой причине лучше будет использовать прозрачность, а не сплошной фон. Также необходимо продумать, как более грамотно установить фавикон, чтобы он гармонировал с фоном. Стоит заметить, что можно устанавливать промежуточные значения, измеряемые в процентах. Специалисты говорят о том, что идеальной является настройка, которая включает в себя примерно 30-40% от прозрачности фона. Чтобы сделать индивидуальный значок для сайта можно использовать логотип вашего бренда, любимое изображение или символ тематики ресурса. Рекомендуемым размером для фавикона является 512 пикселей и в высоту, и в ширину. Изображение должно иметь форму квадрата, но также можно использовать и прямоугольные картинки. Некоторые движки позволяют обрезать картинку при добавлении. Поэтому не стоит волноваться о том, как поставить на SMFфавикон в виде большой картинки.
Как создать иконку при помощи Photoshop
Специалисты рекомендуют для создания иконок использовать специализированную программу для редактирования изображений, например, GIMP или AdobePhotoshop. Это дает возможность создать значок с размерами ровно 512×512 пикселей. Это позволяет сохранять точные пропорции изображения, залить фон или использовать прозрачные изображения. Данная картинка может быть в форматах JPEG, PNG, GIF. После этого необходимо определить, как можно установить на сайт фавикон. Зачем необходимо добавлять фавикон на сайт? Как уже отмечалось ранее, иконка favicon представляет собой небольшой значок, который появляется в браузере рядом с названием сайта. Он дает возможность пользователям идентифицировать ссылку. Те посетители вашего сайта, которые заходят на него часто, смогут моментально определять это небольшое изображение. Это повысит узнаваемость бренда и поможет завоевать доверие среди пользовательской аудитории. Можно сказать, что фавикон определяет личность вашего сайта. Также он улучшает пользовательский опыт и юзабилити.
Как можно установить фавикон в html
Чтобы добавить фавикон на веб-страницу, необходимо установить его на сервер в той же папке, где расположена веб-страница. Это та информация, которую любой браузер в первую очередь будет искать для загрузки. Если он не обнаружит иконку, то проверит каталог верхнего уровня сервера. Если вы установите его там, то по умолчанию для всех страниц вашего домена будет отображаться один значок. В зависимости от типа браузера и его конфигурации, фавикон не всегда будет отображаться, даже в том случае, если он находится в одном из указанных мест. Чтобы прописать наличие фавикона в коде страницы, необходимо добавить две следующих строки в разделе <Head>:
<link rel=”icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
Как добавить фавикон в блог WordPress
Если вы задаетесь вопросом, как можно установить фавикон в «Директ», то здесь нет ничего особо сложного. Данный интерфейс имеет соответствующие пункты меню, которые дают возможность выбирать и загружать картинки. Начиная с WordPress 4.3 можно добавлять faviconна сайт из области администратора. Для этого необходимо просто перейти в «Вид»/»Настройки» и выбрать вкладку «Сайт». Используя раздел идентификатора сайта в настройщике, можно поменять название ресурса и его описание. Перед выходом из меню появится вопрос, хотите ли вы, чтобы новые данные отображались в заголовке. Также данное меню позволяет загрузить значок для сайта. Нужно просто нажать на кнопку «Выберите файл» и загрузить изображение, которое вы собираетесь использовать в качестве фавикона.
Как добавить фавикон на блог
Дальнейшая инструкция по установке фавикона будет выглядеть следующим образом. Если изображение, которое вы хотите загрузить, превышает рекомендуемый размер, то WordPress дает возможность обрезать его. Если файл не соответствует рекомендованным параметрам, вы можете сохранить внесенные изменения. Необходимо отметить, что инструкция по установке фавикона на сайт Joomlaбудет выглядеть примерно так же. После этого при просмотре содержимого сайта вы сможете увидеть faviconв действии. Также вы можете зайти на сайт при использовании мобильного устройства и выбрать в меню браузера пункт «Загрузить полную версию». Вы сможете заметить, что иконка в данном случае будет отображаться как на полноценном рабочем столе персонального компьютера.
Устанавливаем фавикон в старых версиях WordPress (ниже 4.2)
Прежде всего, необходимо загрузить свой фавикон в корневой каталог сайта по протоколу FTP. После этого вы можете самостоятельно вставить данный код в файл header.phpнужной темы.
<link rel=”icon” href=”http://www.example.com/favicon.png” type =”image/x-icon”>
<linkrel=”shortcuticon” href=” http://www.example. com/favicon.png ” type=”image/x-icon”>
Теперь осталось только заменить wpbeginner.comна URL вашего сайта, и можно считать дело сделанным. Если в блоге нет файл header.php и вы не можете его найти, то необходимо использовать специальный плагин. Установить и активировать его необходимо в настройках сайта. После того, как плагин будет активирован, нужно зайти в «Настройки», найти пункт «Вставка колонтитулов» и перейти ко вкладке «Вставка кода». Здесь необходимо внести приведенные выше изменения и сохранить настройки. Если вы не хотите разбираться с тонкостями настройки FTP, но все же интересуетесь установкой фавикона, то можете попробовать использовать специальный плагин, который осуществляет регулировку загрузки иконки на всех этапах. Такие дополнения к движку будут доступны не только для WordPress, но и для других систем, например, Joomla.
bezwindowsa.ru
