Как добавить иконку во вкладку сайта?
Наверняка вы часто видели на других сайтах, что во вкладке рядом с названием сайта находиться маленькая иконка? Обычно там располагается логотип компании. Это привлекает внимание и придает больший авторитет вашему ресурсу. Именно поэтому её и стоить добавить на свой сайт. Ниже я покажу как. Если у вас пока нет иконки — можете попробовать нарисовать тут.
Обычная верстка (HTML)
Тут все просто. Нужно всего лишь добавить внутри тега данный код, заменив путь в атрибуте href на свой. Изображение можно использовать любое.
Выше был пример для изображения в формате png. Можно и использовать другие форматы. Например, gif или ico. Для этого нужно заменить значения атрибута type на image/gif или image/x-icon соответственно.
WordPress
Установить иконку во вкладке сайта на WordPress ещё легче.
1. Для начала войдите на сайт с админа. Далее переходите на главную страницу сайта. Тут вверху вы увидите такую кнопку:
2. Нажав на неё, вы увидите меню, в котором нужно нажать, на указанный пункт.
3. В низу данного пункта, вы увидите кнопку «Выберите иконку сайта», кликнув на которую, вы сможете выбрать favicon для своего сайта.
Спасибо за внимание, если у вас остались вопросы — задавайте их в комментарии, буду рад ответить.
Семенюк Назарий
Full Stack разработчик, Frontend: Vue.js (2,3) + VueX + Vue Router, Backend: Node.js + Express.js. Раньше работал с РНР, WordPress, написал несколько проектов на Laravel. Люблю помогать людям изучать что-то новое)
Добавляем иконки сайта для iPhone, iPad и Android
Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов!
Многие добавляю его в закладки на рабочий стол телефона или планшета, для того чтобы на рабочем столе отображалась красивая иконка вашего сайта, необходимо:
Первым делом, нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.
Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти «картинки» под разные устройства.
Второе, необходимо сделать иконки разных размеров для разных устройств:
для старых iPhone размер иконки должен быть 57х57, для новый, начиная с 4-го действуют следующие размеры:
- 60х60 — IPhone
- 76×76 -iPad
- 120×120 — iphone-retina
- 152×152 — ipad-retina
Третье, вставить в код указав пути к картинкам:
Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок , чтобы эффект не применялся — нужно к именам файлам добавить —precomposed.png
А что Android.
Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.png и несмотря на наличие в названии слова «apple» 🙂
Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на «рабочий стол».
В заключении — если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием «apple-touch-icon.png». Это самый простейший способ.
Для быстрого автоматического создания иконок для сайта
Мы советуем использовать сервис ICONOGEN
Укажите файл с иконкой и сервис быстро сделает иконки разных размеров:
Файлы можно скачать архивом.
Сервис так же генерирует html код для вставки в шаблон сайта:
Как добавить иконку (favicon) на сайт?
Профессиональной разработкой сайта можно назвать только такой процесс, при котором предусматриваются возможности и подготавливаются инструменты продвижения. Одна из необходимых деталей, без которых работу нельзя назвать завершенной — создание и загрузка иконки favicon.
Что такое favicon
Favicon — это устоявшееся в интернете сокращение от английского словосочетания favorites icon, что можно вольно перевести как «иконка для избранного». Это небольшое изображение размером 16 на 16 пикселей, которое выводится рядом с заголовком сайта на вкладках браузера, в сохраненных закладках и в некоторых поисковых системах.
Favicon задумывалась как способ быстрой идентификации ресурса, но в итоге они стали действенным инструментом раскрутки сайтов, привлечения к ним внимания. Красивая и аккуратная иконка рядом с названием страницы в выдаче поисковой системы позволяет выделиться на фоне конкурентов и получить нового посетителя.
Как добавить Favicon
Прежде чем добавлять favicon на сайт, его необходимо создать. Есть три основных способа сделать это:
- Нарисовать иконку с нуля.
- Конвертировать готовое изображение в иконку.
- Заказать отрисовку уникальной иконки у дизайнера.
Для первых двух способов вам понадобится либо специальный графический редактор, либо онлайн-сервис, предназначенный для создания иконок. Так или иначе, результатом этого этапа должен стать графический файл с названием favicon.ico разрешением 16 на 16 пикселей.
После этого остается лишь правильно загрузить иконку. Её нужно поместить в корень сайта — папку на сервере, в которой лежат все файлы ресурса. Сделать это можно по протоколу FTP или через панель управления хостингом. В случае работы на локальном сервере, можно просто скопировать и вставить файл в нужную папку.
Может возникнуть резонный вопрос: как добавить иконку на сайт, если по каким-то причинам копирование файла в корневую директорию невозможно или нежелательно? Такое бывает, если ресурс работает на какой-либо CMS (системе управления контентом). Выбор папки, в которую следует поместить иконку, зависит от используемой системы. Обычно это директория шаблона оформления. В его коде уже должно быть указание на нестандартное расположение фавикона, но если его нет, следует добавить код между тегами
и в файле, описывающем структуру шапки страницы.После всех проделанных действий достаточно будет перезагрузить страницу (иногда может потребоваться очистить кэш), чтобы увидеть иконку в заголовке браузера. В поисковых системах изменения могут отобразиться не сразу, а лишь спустя какое-то время. Это нормально и не стоит переживать: если иконка видна в шапке, вы все сделали правильно.
Автор: Анна Казнова (Digital Agency CASTCOM) / Дата публикации: 2018-05-14
Начните свой проект
уже сегодня!
Давайте работать вместе!
Отправьте нам заявку и мы свяжемся с вами, чтобы обсудить детали.
Также мы предлагаем:
- Сайт—визитка
- Корпоративный сайт
- Портал/Сервис
- Интернет-магазин
- Доработка сайтов
- Логотип
- Брендбук/Гайдлайн
- Фирменный стиль
Как добавить иконку для сайта в поисковике
По статистике большинство интернет пользователей запоминает иконку сайта, а не адрес. Иконки помогаю им легче ориентироваться, чтобы сразу найти нужный сайт, так как иконки бросаются в глаза и легко запоминаются. Сегодня я вам расскажу как добавить иконку для сайта в, которая будет показываться в поисковике, возле ссылки и во вкладке рядом с названием сайта.
Для того чтобы добавить иконку, нам нужно для начала её выбрать. Я могу посоветовать вам сайт на котором есть огромное количество бесплатных иконок, которые вы можете использовать на своих сайтах.
Я уже вам рассказывал о данном сервисе, в своей подборке, поэтому не буду повторяться, а просто оставлю ссылку на данный пост — http://prog-time.ru/poleznye-servisy-dlya-web-programmirovaniya/
Теперь, когда выбрали нужную иконку, вы должны добавить её на свой сайт.
Делается это с помощью следующего кода:
Данный код необходимо разместить во внутрь тега head. В атрибут href мы вписываем путь к файлу иконки.
На этом всё!
Больше интересных статей в нашей группе — https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи — https://vk.com/prog_time
Так же прокачивайте свои навыки на нашем канале — https://www.youtube.com/c/ProgTime
Наши планы
- Написание материала для курса по разработке ботов на Telegram
- Разработка универсального парсера на PHP
Поддержите мой сайт!
Каждый переведённый донат, мотивирует на создание новых записей и уроков на YouTube