Сайт

Как вставить иконку на сайт: Как сделать иконку сайта на вкладке

12.05.2021

Содержание

Устанавливаем favicon на сайт ⋆

Быстрая навигация по этой странице:

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


Зачем нужен favicon?

Favicon — это иконка, которая по умолчанию имеет формат 16 на 16 пикселей и отображается в верхней части вкладки браузера рядом с названием сайта/страницы. Если иконка не задана или задана не правильно, то тогда в браузере рядом с названием сайта просто рисуется значок самого браузера (например, значок Firefox или Google Chrome).

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

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

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

Про то, как сделать иконку ico, у нас есть отдельная статья (ссылка), потому перейдем сразу к рассмотрению вопроса о том, каким должен быть фавикон.

Каким должен быть файл с иконкой и где он должен находиться?

Исторически сложилось, что для сайтов используется формат .ico. Особенность этого формата состоит в том, что внутри одного .ico-файла может храниться несколько картинок размером от 16х16 до 64х64 (размер должен быть кратным восьми). Правда, для веб-сайтов в действительности используется только формат 16х16 — ни Яндекс, ни браузер не будут показывать другой размер иконки.

Соответствующий Файл в формате .ico можно создать с помощью графического редактора или множества доступных в сети онлайн-сервисов. Важно, чтобы данный файл имел название favicon.ico.

Теоретически, сохранить файл можно в любой папке с файлами сайта, но крайне рекомендуется сохранять его именно в корневой директории вашего ресурса — чтобы он всегда был доступен по адресу vash-site.ru/favicon.ico, так как по умолчанию именно там его ищут поисковики и браузеры.

Как добавить на сайт?

Добавление иконки для вашего ресурса является очень простым: достаточно лишь прописать необходимый html-код между тегами <head></head< вашего сайта.

Для добавления favicon html код является следующим:


<link rel="icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="http://vash-site.ru/favicon.ico" type="image/x-icon" />

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

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

Как поставить свою favicon.ico на сайт

Итак, вопрос:

vik wrote:
я хотел бы узнать как поставить лого сайта
перед урлом.у вас это—«W»у маил ру это»@»

И собственно ответ:

Favicon («избр. значок»; этот термин образован от слова «Favorites», обозначающего меню избранных ссылок в Internet Explorer) — это небольшая картинка, которая отображается рядом с названием вашего сайта в «Избранном», или в «Закладках», и рядом с адресом вашего сайта в адресной строке браузера вместо стандартной.

Обычно используется изображение размера 16?16 пикселов формата ICO. Традиционно помещается в корень сайта под именем favicon.ico, так как исторически сложилось, что там его ищет Internet Explorer. Все современные браузеры понимают явное указание положения значка в HTML-коде и могут использовать вместо формата ICO формат PNG, GIF, BMP и других.

Путь к файлу, его формат и размеры изображения могут быть любыми, допустимыми для WWW (за исключением Internet Explorer, который допускает для значка только формат ICO, «лежащего» в корне сервера).

На сегодняшний день Internet Explorer — это единственный браузер, который показывает иконку сайта только если сайт добавлен в «Ибранное» (Закладки), иконка называется favicon.ico и лежит только в корневой папке сервера, но в последующих версиях разработчики обещают это исправить. К сайту иконка подвязывается прописанием в коде документа между тегами <head></head> следующего кода:

<link rel="icon" href="/favicon.

ico" type="image/x-icon">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">

Если, например, вы используете WordPerss, то этот код нужно разместить между тегами <head></head> в файле темы header.php.

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

  1. Использовать специальные программы Microangelo, QTam Bitmap to Icon, Axialis IconWorkshop.
  2. Использовать специальный плагин для Photoshop, например — IconBuilder-XP100
  3. Использовать онлайн ресурсы для создания favicon. Например — http://favicon.ru/

Делаем favicon онлайн

Сайт Favicon.ru полностью посвящен иконкам сайта favicon.ico. Сайт содержит форму, позволяющую загрузить собственную картинку размером не более 300 Кб для создания иконки. В этой форме предусмотрена возможность поставить галочки для добавления в favicon.ico значков 32х32 и 48х48 для десктопа.

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

В принципе, думаю что вопрос раскрыт более-менее полно. Если вы считаете, что вопрос раскрыт недостаточно полно, то напишите, что еще вам нужно знать (или добавте что знаете вы) о favicon.

Добавляем иконки сайта для iPhone, iPad и Android

Если Ваш сайт достаточно популярен, то многие пользователи заходят на него даже с телефонов и планшетов!

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

Первым делом, нам необходимо создать нужную иконку в формате .png. Рисуете (или подбираете) ее. Желательно, в хорошем разрешении.

Качество (разрешение) экранов устройств от Apple постоянно растет и меняется, поэтому нужно оптимизировать эти «картинки» под разные устройства.

Второе, необходимо сделать иконки разных размеров для разных устройств:

для старых iPhone размер иконки должен быть 57х57, для новый, начиная с 4-го действуют следующие размеры:

  • 60х60 — IPhone
  • 76×76 -iPad
  • 120×120 — iphone-retina
  • 152×152 — ipad-retina

Третье, вставить в код указав пути к картинкам:

<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" href="touch-icon-ipad-retina.png">

Safari на iOS 7 не добавляет эффекты к иконкам. А старые версии Safari добавляли эффекты для иконок , чтобы эффект не применялся — нужно к именам файлам добавить —precomposed.png

А что Android!?:

Все дело в том, что Android-девайсы также подхватывают файлы apple-touch-icon.

png и несмотря на наличие в названии слова «apple» 🙂

Справедливости ради, хочу заметить, что ОС Android намеренно не ищет эти иконки, а только в том случае, если пользователь решил добавить сайт на «рабочий стол».

В заключении — если не хотите заморачиваться со вставкой кода, подготовкой картинок разного размера, то просто закиньте в корень сайта картинку (размером 60 на 60 пикселей) с названием «apple-touch-icon.png». Это самый простейший способ.

Для быстрого автоматического создания иконок для сайта

Мы советуем использовать сервис ICONOGEN

Укажите файл с иконкой и сервис быстро сделает иконки разных размеров:

Файлы можно скачать архивом.

Сервис так же генерирует html код для вставки в шаблон сайта:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-60x60. png">
<link rel="apple-touch-icon" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-16x16.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<link rel="icon" type="image/png" href="/favicon-96x96.png">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png">
<meta name="msapplication-square70x70logo" content="/smalltile.png" />
<meta name="msapplication-square150x150logo" content="/mediumtile. png" />
<meta name="msapplication-wide310x150logo" content="/widetile.png" />
<meta name="msapplication-square310x310logo" content="/largetile.png" />

Как добавить иконки социальных сетей на сайт c Moodle

Если вы хотите добавить иконки социальных сетей на ваш сайт c Moodle без адаптации темы оформления, тогда «Font Awesome» — это лучшее решение.

Вы можете настроить цвет и размер иконок в соответствии со стилем вашего сайта.

Чтобы начать использовать Font Awesome на сайте, вам сначала нужно добавить CDN на ваш сайт. Для этого перейдите на страницу https://fontawesome.com/start и скопируйте оттуда следующий код:

 

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uh3+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

 

Затем этот код нужно вставить в раздел <head> HTML-кода вашего сайта. Чтобы сделать это в Moodle, вам необходимо войти на свой сайт как администратор, затем перейти к разделу «Администрирование сайта» -> «Внешний вид» -> «Дополнительный HTML» и вставить код в раздел «В тег HEAD», а затем нажать «Сохранить изменения».

Теперь вам нужно найти иконки, которые вы хотите использовать. Перейдите по ссылке https://fontawesome.com/icons?from=io и найдите нужные иконки.

Как только вы найдете нужную иконку, вам нужно скопировать строку кода. Код будет выглядеть примерно так:

 

<i class=»fab fa-vk»></i>

 

Этот код можно вставить в HTML-блок на вашем сайте (или в любом другом месте, где вы можете добавить код). Чтобы добавить блок HTML, необходимо включить режим редактирования на главной странице, затем в блоке «Добавить блок» выбрать «HTML».

 

 

После добавления HTML-блока перейдите к его настройке.

Прежде чем вставлять код в блок, сначала включите редактор HTML, щелкнув на значок, как на рисунке ниже.

 

 

После этого вставляем код нужной иконки.

 

 

Теперь нам нужно добавить ссылку, на которую пользователь будет переходить после нажатия на иконку. Для этого необходимо немного изменить код, который вы вставили. Для этого меняем буквы «i» на английские «a» и добавляем ссылку: href=»ссылка на вашу страницу». Сейчас код выглядит так:

 

 

Теперь можно выключить редактор HTML, снова нажав на кнопку «</>». Вы должны увидеть в блоке «Содержимое» нужную иконку:

 

 

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

Чтобы посмотреть исходный код, вы можете использовать опцию «Инструменты разработчика», доступную в веб-браузере «Google Chrome». Для активации этой опции нажмите клавишу F12.

Теперь вы должны увидеть меню, как показано на рисунке ниже.

 

 

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

 

 

Сейчас нажмите точно на иконку VK. После этого вы должны увидеть такой код:

 

 

 

Скопируйте этот код.

То, как вы добавите пользовательский CSS в свою тему, будет зависеть от того, какую тему вы используете. В нашем примере мы будем использовать тему Clean, так для этой темы добавить пользовательский CSS немного проще, чем для темы Boost.  Выберите «Администрирование сайта» -> «Внешний вид» -> «Темы» -> «Clean». После этого нужно найти текстовое поле с надписью «Custom CSS». Примерно так же добавляется пользовательский CSS в большинстве тем оформления Moodle.

Вставьте скопированный код в это поле:

 

 

Так как иконка в CSS считается «шрифтом», чтобы увеличить ее, вы можете включить дополнительную строку в пользовательский CSS. Вы можете изменить значение на нужное вам, в этом примере мы используем размер шрифта (font size) 75 пикселей (75px).

 

 

Чтобы изменить цвет иконки, добавьте следующую строку в пользовательский CSS:

 

color: #597da3;

 

Набор символов #597da3 — это шестнадцатеричный код цвета (или hex-код), в данном случае это синий цвет VK. Вы можете подобрать любой цвет. В Интернет есть таблицы с цветами и даже палитры, где вы визуально выбираете цвет, а затем получаете код этого цвета.

 

 

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

 

 

Теперь вы можете повторить предыдущие шаги и добавить другие иконки.

Как сделать иконку для сайта и установить ее. Фавикон для сайта

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

Что такое Фавикон и зачем нужна иконка сайту

Иконка для сайта или Фавикон – это значок сайта, который можно разглядеть в строчке браузера рядом с URL и в закладках. Фавиконы также отображаются в выдаче Яндекса рядом с ссылками, чего кстати нет в Гугле (ай-ай). Иконкой для сайта является файл favicon.ico, который браузер пытается загрузить из корневого каталога сайта при переходе. По размеру обычно 16х16 пикселей и имеет .ico расширение.

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

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

Рассмотрим несколько способов создания иконки для сайта.

Создание иконки для сайта с помощью Photoshop

У меня установлен Photoshop CS5. И как оказалось, он не поддерживает сохранение файла в формате .ico, который нам нужен. Однако существует выход из этого положения, а точнее специальный плагин ICO. Скачать который вы можете вот на этом сайте.

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

Как вы заметили в основном я использую Google Chrome, который довольно легок в использовании и весьма расширяем. Но вернемся к созданию фавикона.

Онлайн-сервисы для создания иконок для сайта

Этот способ попроще и подходит для тех, кто с Photoshop на «ВЫ», или не имеет установленной лицензионной (нет пиратству!) копии данной программы у себя на компьютере. Так вот, представляю вашему вниманию пару онлайн-сервисов по созданию иконок для сайтов.

Favicon.ru — для создания иконки необходимо загрузить уже готовую картинку любого размера со своего компьютера (1) или указать ссылку на изображение в интернете (2).

Далее следуя простым инструкциям (3) создаем фавикон и сохраняем его у себя на жестком диске.

Favicon.cc — Возможности этого онлайн-сервиса входит как загрузка уже готового изображения (2) с преобразованием его в иконку, так и создание фавикона с нуля (1) и (3).

Онлайн-сервисов для создания достаточно, но эти два мне показались наиболее удобными.

Готовые галереи фавикон

Уж если вам не подошли вышеописанные способы, то можно скачать уже готовый фавикон из галереи. Но в этом случае никто не даст гарантии, что эта иконка будет установлена только на вашем сайте. А уж если хотите просмотреть пару галерей, то вот: The Favicon Gallery, ICONJ.

Установка иконки на сайт

Для того чтобы установить фавикон, его достаточно загрузить в корневой каталог сайта под именем favicon. ico и, в принципе, икнока уже будет отображаться. Но веб-мастера рекомендуют прописать следующий код в header.php внутри тэга <head> </head>.

<link rel=»icon» href=»название_сайта/favicon.ico» type=»image/x-icon»>

<link rel=»shortcut icon» href=»название_сайта/favicon.ico» type=»image/x-icon»>

Вот так все достаточно просто создать и установить иконку Favicon на сайт.

Загрузка…

Favicon — что это такое, как создать фавикон и установить на свой сайт, онлайн-генераторы иконок

Главная / Как самому раскрутить сайт

24 января 2021

  1. Что такое Фавикон и зачем он нужен для сайта
  2. Как создать Favicon
  3. Онлайн генераторы и галереи иконок
  4. Как установить или поменять Favicon на сайте

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Разговор в сегодняшней статье пойдет о так называемых иконках Favicon. ico. Мы разберемся, что такое фавикон, почему в обязательном порядке его нужно устанавливать на своем сайте и как самому создать иконку нужного размера.

Чуть ранее я уже писал про то, где можно взять иконки для сайта и упомянутые там сервисы (в той статье) можно использовать для поиска подходящих вариантов Favicon.ico, но есть и специальные онлайн-генераторы (favicon generator), как отечественные, так и зарубежные, а также специализированные коллекции и галереи с подходящими по размеру фавиконами. Ну, и естественно мы поговорим о том, как настроить и подключить их к своему сайту.

Что такое Фавикон и зачем он нужен для сайта

По сути Favicon — это обычный значок (изображение небольшого размера 16 на 16 пикселей, иконка). Но для владельца сайта он может очень много значить. Однако, обо всем по порядку.

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

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

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

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов. Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

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

Если у вашего проекта Favicon еще не настроен, то самое время задуматься о его создании и установке, т.к. это позволит вам привлекать большее количество посетителей с страниц Яндекса (из поисковой выдачи), ибо рядом с адресом вашего проекта будет красоваться эта иконка, побуждая пользователей выбрать вас, а не соседа по выдаче).

В принципе, Favicon.ico нужного размера вы можете сделать и сами, так же у вас будет возможность создать его с помощью онлайн генераторов (из загруженных вами картинок) или же просто скачать целиком их online коллекцию или галерею.

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

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 пикселей.

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

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

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

Как создать Favicon онлайн и где можно скачать их коллекцию

Давайте я сначала приведу примеры сервисов (так называемых favicon generator), где можно не имея особых навыков сконструлить вполне себе достойный мини-логотип для своего сайта, ну, или хотя бы автоматом переделать подходящую картинку в формат, необходимый для загрузки фавикона на сайт.

  1. Faviсon.cc — довольно-таки удобный онлайн-генератор фавиконов. Используя его вы можете, например, создать свою иконку с нуля (полный эксклюзив), нарисовав ее попиксельно. Для этого вам нужно будет нажать в левой части окна сервиса на кнопку «Create New Favcon».

    В центре страницы генератора расположена область, где каждый квадратик является пикселем вашей будущей фавиконки. Ваша задача состоит в закрашивании разными цветами этих квадратиков. Для закрашивания одного квадратика цветом нужно поставить галочку в правой части окна сервиса в поле «Color Picker», выбрать на расположенной там же палитре нужный цвет и щелкнуть по нужному квадратику. Для удаления неправильной закраски поставьте галочку в поле «transparent» и щелкните по квадратику, в результате чего он станет бесцветным (прозрачным).

    Для перемещения пикселя по холсту генератора вам нужно будет поставить галочку в поле «move». Результат своих трудов в реальном масштабе вы сможете наблюдать в области «Preview» под холстом. Если созданный вами Фавикон вам подходит, то нажмите на кнопку «Download» для его сохранения к себе на компьютер. В результате вы получите графический файл, который сможете затем скачать и загрузить на сервер хостинга.

    Теперь вы знаете как сделать мини-логотип для своего сайта с нуля. Но если вы графическими талантами не обладаете, то можете на сервис онлайн генератора загрузить любую картинку для будущего фавикона, которая будет служить болванкой. Картинка может быть абсолютно любого размера и формата. Для загрузки файла значка на онлайн сервис вам нужно будет нажать в левой части окна сервиса на кнопку «Import Image».

    В открывшемся окне, нажав на кнопку «Обзор», найдите на своем компьютере подходящее изображение. Затем выберите, что делать с соотношением сторон вашей картинки при преобразовании его в формат 16 на 16 (квадрат). Это актуально, если загружаемое вами изображение не квадратное. В этом случае возможны два варианта: оставить соотношение сторон неизменным (Keep dimensions), либо преобразовать картинку к квадратному виду (Shrink to square icon). Во втором случае изображение будущей фавиконки будет искажено по одной из осей.

    Для загрузки в online generator и преобразования вашей картинки нужно будет нажать на кнопку «Upload». Созданная из него Favicon.ico будет доступна к редактированию точно так же, как и нарисованная вами. Когда закончите колдовать над шедевром, то нажмите на кнопку «Download» для того, чтобы скачать его к себе на компьютер.

    На этом онлайн сервисе также имеется возможность использовать коллекции фавиконов, созданные другими его пользователями и выложенные в общий доступ. Для того, чтобы посмотреть имеющиеся в галереи экспонаты, вам нужно будет нажать в левой части окна либо на кнопку «Latest Favicons» для просмотра коллекций отсортированных по дате создания, либо на кнопку «Top Rated Favicons» для просмотра галерей отсортированных по рейтингу.
  2. Favicon.ru — когда-то этот сервис был значительно проще описанного выше онлайн генератора, но последнее время он стал практически его аналогом, но только на русском языке. Favicon.ru позволяет не только преобразовывать любое имеющееся у вас изображение (на компьютере или в интернете) в формат ICO с размером 16 на 16 пикселей, но и дает возможность нарисовать его с нуля попиксельно.

    Этот вариант online favicon generator примечателен, пожалуй, только тем, что он отечественный. Поэтому он и попал в эту статью. Итак, для работы с ним вам нужно на главной странице вверху нажать на кнопку «Выберите файл» и указать путь до нужного изображения на вашем компьютере. Загруженное и преобразованное в формат Favicon.ico изображение можно будет подкорректировать, а затем сохранить к себе на компьютер. Все просто и удобно.

  3. Logaster.ru — это онлайн генератор логотипов, но помимо логотипов он еще создает и фавикон. В отличии от всех других сервисов, вам не нужно рисовать дизайн фавикона или конвертировать ее с логотипа.

    Для того, чтобы создать фавикон, сначала необходимо ввести название сайта или компании и выбрать вид деятельности. Сервис предложит готовые к использованию несколько десятков шаблонов фавикона. Более подробно, как создать фавикон, можно прочитать здесь. После создания Favicon.ico, вы можете скачать файл к себе на компьютер в формате ICO или PNG.

После этого вам только остается нажать на кнопку «Создать». На открывшейся странице вы увидите ссылку для скачивания получившегося фавикона.

Подборка онлайн генераторов, коллекции и галереи фавиконов

Если вам по каким-либо причинам не понравились описанные выше favicon generator, то могу предложить попытать счастье на одном из следующих бесплатных онлайн-сервисов:

  1. FaviconGenerator — позволяет преобразовать в нужный формат фавикона любое загруженное с вашего компьютера изображение (загружать можно картинки в формате PNG, JPEG, JPG, GIF).
  2. AntiFavicon — достаточно интересный Favicon Generator. На нем вы можете создать фавикон с надписью. Текст надписи вам нужно будет ввести в поля «Top text» и «Bottom tex», а цветовую гамму — настроить в области «Colors».
  3. FavIcon from Pics — еще один простой онлайн сервис — указываете путь до картинки на своем компьютере, преобразуете и скачиваете результирующий файл в формате ICO и GIF.
  4. DeGraeve — достаточно мощный Favicon Generator, по функционалу похож на рассмотренный ранее Faviсon.cc. Здесь тоже можно сделать все либо с нуля, либо загрузить изображение, которое в последствии можно подкорректировать и скачать уже в формате ICO подходящего размера.
  5. Generator — позволяет как генерировать фавикон из загруженного изображения, так и создать ее с нуля в специальном редакторе.
  6. Онлайн редактор иконок favicon.ico — ну, как бы, все при нем — и создание фавиконов с нуля, и доработка уже имеющегося изображения.
  7. Online Favicon — очень функциональный инструмент для создания и редактирования мини-логотипов
  8. Free Favicon Generator — на случай, если ничего из выше предложенного списка вас не устроит.
  9. Фавикон-генератор — простенько и со вкусом…

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

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

Если у вас нет желания или возможности (вы не художник и ни когда им не были), то проще всего будет попробовать поискать в галереях с коллекциями бесплатных фавиконов:

  1. Favicon.cc — 55 тысяч различных вариантов на все случаи жизни. Имеются также анимированные фавиконы, которые правда будут видны только в браузере FireFox

Если вы знаете еще какие-то подобные ресурсы, то я добавлю ваши ссылки в этот список.

Как установить Favicon на сайт и прописать путь до него

Ваш браузер и поисковый робот Яндекса будут искать фавикон прежде всего в корневой папке вашего сайта. Поэтому можно просто подключиться к сайту по FTP и загрузить в его корневую директорию (обычно это папки public_htm или htdocs) ваш файлик Favicon.ico (лучше его название писать с маленькой буквы). Откройте теперь ваш ресурс в каком-нибудь браузере и посмотрите, не поменялась ли пиктограмма на вкладке. Поменялась? Нет? Ну, ничего страшного.

Если поставить фавикон таким образом у вас не получилось, то возможно вам придется очистить кэш вашего браузера, т.к. часто бывает, что из кэша загружается старая версия. Можете попробовать открыть ваш сайт в FireFox, у меня он лучше всего реагирует на проводимые изменения без очистки кэша. Если дело не в кэше браузера, то это значит, что для вашего сайта задано другое место для favicon, отличное от корневой папки. Как это проверить?

Откройте исходный код любой страницы вашего сайта. Чтобы посмотреть ее исходный код, достаточно будет щелкнуть по странице правой кнопкой мыши и выбрать соответствующий пункт контекстного меню (например, «Исходный код» в старой Opera, либо «Исходный код страницы» в Мазила Фаерфокс, либо «Просмотр кода страницы» в Google Chrome, либо «Просмотр HTML-кода» в IE) или нажать сочетание клавиш Ctrl+U. Теперь поищите в верхней части кода страницы строку, задающую путь до favicon.ico.

Она может выглядеть примерно так:

<link rel="shortcut icon" type="image/ico" href="http:путь_до_вашей_иконки/favicon.ico" />

Также возможен и такой вариант задания служебной гиперссылки link:

<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon">

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

В Joomla Favicon обычно живет в папке с используемым вами шаблоном (путь до нее в Joomla 1.5 прописывался в файле index.php из каталога этого же шаблона,а вот в Joomla 3 все стало несколько сложнее). Т.е. для смены фавикона в Джумле достаточно будет пройти по этому пути и залить туда свой файлик favicon.ico, а на вопрос о замене ответить утвердительно:

/templates/папка_с_используемым_шаблоном_оформления/favicon.ico

Файлик favicon в WordPress по умолчанию тоже может лежать в папке с используемой вами темой (там же и задается путь до него):

/wp-content/themes/Папка_с_используемой_вами_темой_оформления/favicon.ico

В общем, если хотите задать или поменять путь до вашего фавикона, который бы поняли и браузеры, и поисковый робот Яндекса, то вам нужно будет прописать в соответствующем файле шаблона Joomla, WordPress или любого другого движка, между открывающим и закрывающим тегами HEAD, следующие строчки кода:

<link rel="shortcut icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />
<link rel="icon" href="http:путь_до_вашей_иконки/favicon.ico" type="image/x-icon" />

В каком именно файле шаблона нужно прописать эти строки, зависит от движка вашего сайта. Например, в в WordPress вам нужно открыть на редактирование файл header.php из папки с используемой вами темой оформления: wp-content/themes/Папка_с_вашей_темой_оформления. Открываете header.php в редакторе и в самом его начале находите открывающий Html тег HEAD. В любом месте за ним, но до закрывающего HEAD прописываете одну из приведенных выше строчек кода с указанием пути до вашего графического файла мини-логотипа.

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

 <link rel="shortcut icon" href="/img/favicon.gif" type="image/gif" >
 <link rel="icon" href="/img/favicon.gif" type="image/gif" >

Вот и вся разница между анимированными favicon и обычными. Но следует учесть, что будет работать анимированная иконка только в FireFox, в остальных же браузерах она будет статичной. Яндекс же, при загрузке вашего анимированного фавикона, преобразует его в статичный формат PNG. Но, по-моему, овчинка выделки не стоит — устанавливать вместо обычного мини-логотипа для сайта анимированный не имеет особого смысла. Но это только мое ИМХО.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

Как сделать иконку сайта в поиске Яндекса?

ТЕХПОДДЕРЖКА САЙТОВ

Полезные советы для обслуживания веб сайта и работы с ним

Как сделать фавиконку для сайта

Мы смотрим на сайты в поисковиках и видим слева изящные картинки с символикой сайтов.

Что такое фавиконка (иконка сайта, пиктограмма сайта)?

Это картинка размером 16Х16 пикселей, которая характерна для большинства профессионально сделанных сайтов. В интернет — браузерах иконка сайта показывается в адресной строке и в папке Избранное (отсюда и название Favorite Icon), рядом с названием сайта. Чаще всего в качестве фавиконки используется логотип сайта. Иконка сайта — отличительная черта грамотных сайтов. Она придает ему индивидуальность. Кроме того, при поиске необходимого сайта иконка позволяет ускорить процесс, поскольку выделяет ваш сайт в выданном поисковиком списке. Нужно только настроить параметры поиска.

В Яндексе, например, это делается так: выбрать ссылку «настройка» в верхней части страницы (www.yandex.ru/setup/index.html?rnd=1157334667, в меню «Результаты поиска» выбрать «настройка поиска», а там найти пункт «графика» и отметить галочку «показывать пиктограммы сайтов».

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

Для создания или редактирования иконки подойдет любой редактор иконок. Можно также использовать плагин к Фотошопу Icon Factory, который позволяет создавать фавиконки из уже готовых картинок. Название готового файла должно быть favicon.ico и никаким иным.

Самое логичное и простое объяснение установки плагина для фотошопа «пошагово» для создания формата рисунков .ico вы найдете у Влада Мержевича на странице htmlbook

Однако, во многих случаях не удается произвести вложение плагина в папку фотошопа, например при использовании пакета программ Adobe CS5 возникают иногда трудности. В таком случае (да и во многих других) рекомендуем простенький следующий способ. Рисуете картинку в фотошопе с размерами 16х16px и сохраняете её как gif изображение. После этого переходите на страницу: http://www.codenet.ru/services/png-to-ico/index.php — это он-лайн преобразование файлов в формат ico. Загружаете туда вашу картинку и получаете на выходе нужный вам файл, который размещаете в нужном вам месте.
О том, как это сделать — чуть ниже.

Куда загрузить готовый файл favicon.ico

Готовый файл favicon.ico необходимо загрузить в тот каталог на сервере, где лежит индексный файл вашего сайта. Если это не помогло (поисковые боты должны находить его по умолчанию), или index.html лежит не в корневом каталоге, то добавьте строку
в индексный файл между тегами и .
Кроме того, если вы считаете, что пользователь может занести в «Избранное» не только корневой URL вашего сайта, то скопируйте файл favicon.ico во все директории сайта.

Пример записи для робота между тегами и :

www.seomax.ru

Влияние фавиконки на ранжирование сайта

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

Favicon изобрели и впервые применили для браузера Internet Explorer пятой версии. Это была небольшая квадратная картинка в формате «.ico». Сейчас этот формат считается устаревшим – для современных браузеров используют фавиконы преимущественно в форматах «.png» и «.gif». Это, во-первых, позволяет отображать иконку в современных популярных браузерах, а во-вторых, – делает изображение более качественным (а в случае с «гифом» еще и анимированным).

Почему же так важно наличие фавиконки на сайте? И почему сотрудники Яндекса рекомендуют вебмастерам уделить особое внимание этой, казалось бы, маленькой детали? Дело все в том, что отображение правильно подобранного и качественно созданного фавикона позволяет увеличить количество кликов от заинтересованных пользователей. Интерес посетителей может повлиять на рост поведенческих факторов и со временем улучшить запоминаемость ресурса (по сути, создать бренд). Повышение поведенческих факторов отметят поисковики, что положительно повлияет на ранжирование сайта – естественно, если он правильно оптимизирован. Ниже приведен ряд важных рекомендаций, которым сотрудники Яндекса советуют следовать при создании и установке фавиконки на сайт.

Индексация


Размещая фавикон на сайте, важно знать, что срок индексации «свежего» фавикона составляет примерно до 3-х недель, а индексация начинается с обнаружения ссылки на картинку роботами поисковиков. Далее роботы скачивают фавиконку, после чего она добавляется в специальную базу иконок. База по данным Яндекса обновляется примерно раз в 1,5-2 недели. Это необходимо учитывать при установке или смене фавикона и стараться способствовать быстрому обнаружению ссылки поисковыми роботами, а именно важно прописывать адрес фавикона в коде главной страницы, располагать ее в корне сайта, использовать статический url картинки, при написании кириллического адреса рекомендуется использовать Punycode, а также не следует забывать проверять код ответа сервера (файл должен отдавать 200 ОК) и отсутствие запрета индексации файла с фавиконом в robots.txt.

Размеры фавиконки


Стандартный размер фавикона – 16х16 пикселей. Это классика, внедренная в первоначальных вариантах картинки. Сейчас активно используют и другие форматы: 24х24, 48х48, а также 64х64. Но сотрудники Яндекса рекомендуют не отступать от традиционных размеров иконки — 16х16, а также советуют делать картинку однослойной. Фавиконы больших размеров обычно служат ярлыками при сохранении пользователем страницы сайта на компьютере.

Как правильно установить фавикон на сайт?


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

Помните, что при установке фавикона важен его правильный формат, который, как показывает практика, часто отличается от указанного в названии файла. При загрузке фавиконки убедитесь в свойствах файла, что формат картинки совпадает с тем, что указан в названии. Кроме того, при передаче файла иконки с сервера сайта не забудьте указать корректный тип передаваемых данных — type=»image/x-icon – в случае, если картинка имеет расширение ico.

Как создать запоминаемый фавикон – 4 правила


  1. Фавикон – визитка сайта. Он должен соответствовать основному дизайну ресурса и гармонировать с ним, привлекать внимание и вызывать нужные ассоциации.
  2. Смысл фавикона должны понимать все с первого взгляда – поэтому никаких сложных элементов и скрытых значений в нем быть не должно.
  3. Идеальный фавикон должен охватывать все грани деятельности вашего сайта. Если это интернет-магазин – картинка должна отображать его направленность в целом, а не символизировать какую-то одну группу продаваемых товаров.
  4. Посмотрите побольше примеров удачных фавиконов – например, у популярных социальных сетей, СМИ или интернет-магазинов. Поставьте перед собой задачу создать картинку не хуже – такую же запоминающуюся и простую.

3 сервиса для автоматического создания фавикона без фотошопа и услуг дизайнера


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

— для разработки иконки на основе уже имеющегося изображения. Задача сервиса – превратить вашу картинку в иконку подходящего размера и формата.
favicon.ru

— здесь можно нарисовать фавикон онлайн и преобразовать его в подходящий формат. Если не получилось – здесь же можно заказать профессиональные услуги.
favicon.cc

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

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

rukala.ru

Почему не отображается фавикон в поиске Яндекса

Привет всем читателям блога! Сегодня, я хочу вам рассказать, почему не отображается фавикон в поиске Яндекса или браузере.

На самом деле совсем недавно у меня так же возник этот вопрос, когда я установила favicon на сайт. Разумеется, в адресной строке браузера он у меня появился, а вот в поисковой выдаче Яндекса нет. Не для кого не секрет что фавикон ( favicon.ico) обязательно нужно установить, чтобы повысить узнаваемость вашего ресурса и отразить его фирменный стиль. Но что же делать если он не высвечивается в поиске?

Теперь рассмотрим все причины, почему не отображается фавикон после его установки. Для начала давайте на всякий случай ещё раз посмотрим, видят ли favicon поисковики Яндекс и Google.

Проверяем фавикон в поисковых системах Яндекс и Google

Для этого вводим в адресную строку браузера этот адрес:

Для Яндекса — http://favicon.yandex.net/favicon/www.yandex.ru (где меняем в конце www.yandex.ru на свой домен).

Для Гугла — http://www.google.com/s2/favicons?domain=www.google.com (а здесь в конце вместо www.google.com так же вписываем имя проверяемого сайта).

В обоих случаях мы увидели, отображается фавикон в поиске Яндекса и Гугла или нет.

Если не отображается фавикон в браузере после установки нужно:
— перезапустить браузер
— почистить кэш
— проверить правильность создания и установки фавикона

Почему не отображается фавикон в поиске Яндекса:

1). В поисковой выдачи Яндекса favicon появится только после того, как сайт посетит робот и проиндексирует вашу иконку. Поэтому запаситесь терпением и подождите.

2). Скопируйте вот этот код и вставьте его

в админке в файл header.php прямо перед закрывающим тегом (см.картинку ниже) и обновите.Только не забудьте вместо ваш сайт-написать свой домен.

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

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

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

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

С уважением, Анна Федорова

sozdamblog.ru

Как поменять иконку сайта? Инструкция как сделать и установить иконку для сайта самостоятельно

Иконка веб сайта в браузере и в поисковике

Иконка сайта – это специальный значок сайта, который отображается в браузерах пользователей интернета. Данный инструмент получил название favicon.

Название «Favicon» — это английское сокращение от слов FAVorites ICON, что в переводе обозначает «значок для избранного». Иконка веб сайта в браузере отображается в адресной строке, непосредственно перед url-адресом страницы. Так же иконку веб сайта в браузере можно увидеть во вкладках и рядом с закладками.

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

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

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

Создание иконки для сайта

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

Как еще сделать иконку для сайта? Весьма популярно создание иконки для web сайта с помощью специальных программ , позволяющих редактировать изображения по своему усмотрению. Обычно программы отличаются между собой инструментами, встроенным функционалом и, конечно, пользовательским интерфейсом. Одни программы для создания иконок на сайт позволяют одновременно редактировать несколько картинок, другие дают возможность использовать градиентную заливку или 3D эффекты, а третьи имеют простой и понятный интерфейс. Скачать программу для создания иконок можно как здесь, выбрав любую из предложенных, так и поискав в поисковиках:

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

Для того, чтобы сохранить нарисованную иконку для сайта в фотошопе, нужно нажать «сохранить как» и выбрать специальный формат .ico.
Если вы не обнаружили у себя этот формат, не отчаивайтесь — просто стандартный набор форматов изображений Photoshop’а не включает его в себя. Но его очень легко добавить, достаточно лишь скачать плагин ico-формата и распаковать его в папку C:ProgramFilesAdobeAdobePhotoshopCS2Plug-InsFileFormats, после чего при сохранении изображений командой «Сохранить как» в списке доступных форматов появится строчка ICO (Windowsicon)(*.ICO).

Иконки для сайта: размер 16х16 или 32х32?

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

Формат иконки для сайта

На сегодняшний день универсальным форматом иконки для сайта считается формат .ico, так как именно его поддерживают все самые популярные браузеры: Google Chrome, Internet Explorer, Firefox, Opera и Safari. Следующие по универсальности форматы иконки для webсайта – PNG, JPEG, и GIF их поддерживают все браузеры, кроме Internet Explorer’а. А вот анимированные иконки для сайта GIF-формата поддерживают только Firefox и Opera.

Все возможности поддержки браузерами форматов иконок для сайтов представлены ниже:

Когда картинка создана и сохранена в нужном формате, можно переходить к тому, как установить иконку на сайт.

Как добавить иконку на сайт? Установка иконки на сайт

Первым нужно сделать не что иное, как добавить иконку на сайт в прямом смысле слова. Нужно загрузить изображение иконки, сохраненное в выбранном формате, на сервер: в корневую папку сайта (обычно она называется public_html). Как загрузить иконку на сайт? Это можно сделать с помощью специальных программ, помогающих соединиться по FTP или же в менеджере файлов, через панель управления сайтом.
После того, как вставка иконки на сайт произведена, необходимо сделать так, чтобы изображение отображалось в браузере. Для установки иконки на сайт (отображения в браузере) необходимо прописать специальный код и поместить его в правильное место.

Html код иконки для сайта

Обратите внимание на тип картинки иконки, его нужно прописывать в «type».
Например, если у вас картинка иконки имеет формат GIF , тогда код будет выглядеть следующим образом:

gif » type=»image/ gif «>

Данный Html код иконки для сайта нужно вставить в произвольном месте между тегами и в файл страницы, на которую нужно поставить иконку.

Если вам нужна в wordpress иконка сайта, то необходимо отредактировать файл header.php, в который вставляется этот же код.
Итак, вы теперь знаете, как установить иконку на сайт самостоятельно.

Как поменять иконку сайта? замена иконки сайта

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

seokleo.ru

Если «Яндекс» не видит фавикон — способы решения проблемы

16 февраля 2018 года. Опубликовано в разделах: SEO самостоятельно. 4598

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

Если человек добавляет понравившийся веб-ресурс в «Избранное», то фавикон также остается перед ссылкой.

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

Как правильно размещать фавиконку

  1. Создайте файл формата ico. Допускаются также еще 4 формата: png, а также gif, bmp и jpeg. Размер файла в пикселях должен быть 16 пикс., 32 или 120 (квадратный).
  2. В head главной странице добавьте код:
  3. Для указания адреса на кириллице применяйте Punycode.
  4. Проверьте отображение иконки в браузере:

Если вы действовали по правилам, и ваш веб-ресурс проиндексирован «Яндексом», то через 2 недели после захода робота на сайт появится ваша иконка.

Как «Яндекс» работает с иконками

  1. Яндекс.Бот Yandex/1.02.000, собирающий фавиконки, по расписанию посещает главную страницу каждого сайта в индексе, где HTML ищет путь к favicon.ico.
  2. Если путь не прописан, бот идет в корень.
  3. Иконка преобразовывается в png размером 16*16, затем загружается на сервер фавиконок.
  4. Бот периодически проверяет иконку заново — частота его захода зависит от частоты обновления вашего веб-ресурса.

Иногда после создания favicon не отображается в «Яндексе». Давайте разбираться, почему так происходит.

Как проверить, что фавикон корректно отображается в «Яндексе»

  1. Способ первый — Яндекс.Вебмастер.
    Если в разделе левого меню «Диагностика» нет уведомления о том, что робот-поисковик не загрузил файл, значит, все в порядке.Если сообщение об ошибке появилось, значит, фавикон не отображается в поиске «Яндекса».
  2. Способ второй: по прямой ссылке на базу фавиконок. Введите адрес: favicon.yandex.net/favicon/ваш домен.Если изображение появляется, значит, все в порядке.
  3. Вариант третий: проверяем фавиконку в базе Google. Если там она отображается, а в «Яндексе» ее нет — попробуйте подождать еще 2 недели. Возможно, фавиконка скоро попадет и в Yandex: www.google.com/s2/favicons?domain=ваш домен
  4. Вариант четвертый: проверка через специальные сервисы. Воспользоваться Favicon Val />
  5. Если не открывается, проанализируйте, не запрещен ли вышеуказанный файл к индексации в robots.txt, или, может быть, есть ошибка в его названии или в метатегах.
  6. Проверьте логин на посещение веб-ресурса роботом-поисковиком, найдите запись:

Если такая запись есть, значит, робот проиндексировал файл.

  • Если у вас подключен SSL сертификат, вы могли не указать главное зеркало в Яндекс.Вебмастере. Укажите зеркало в HTTPS.
  • Если в течение 2-х недель после посещения роботом favicon не появился, возможно, «Яндекс» не смог ее распознать.

Варианты решения проблемы

  • Конвертируйте фавиконку в другой формат (один из разрешенных).
  • Проверьте ее размер.
  • Используйте четкие уникальные картинки. Иконки плохого качества могут удаляться из выдачи.
  • Обновите файл на сайте и дождитесь посещения робота.

Если иконка так и не появилась, возможно, ваш веб-ресурс находится под фильтром.

Как определить, что сайт под фильтром

  • Соответствующие уведомления в Яндекс.Вебмастере, фатальные ошибки, обнаруженные вирусы.
  • Резко уменьшилось число проиндексированных страниц.
  • Упала посещаемость.
  • ТИЦ не определен. (Пройдите yandex.ru/yaca/cy/ch/ваш домен, если он от 0 или выше, то все в порядке).
  • Онлайн-сервисы показывают проблемы с сайтом (Xtool, Pr-cy).

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

Проблема с Яндекс.Директ

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

Еще один вариант — иконка может быть не видна, если сайт в выдаче находится очень далеко (за 10 страницей). Работайте над улучшением качества вашего веб-ресурса, используйте белые методы продвижения, и иконка со временем обязательно появится.

– Только качественный трафик из Яндекса и Google
– Понятная отчетность о работе и о планах работ
– Полная прозрачность работ

semantica.in

Не отображается фавикон в Яндексе

Статьи в этой же категории

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

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

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

Что делать, если фавикон не появляется в поисковиках?

Есть несколько причин почему не появляется ваш фавикон в поисковиках:

  • Не уникален рисунок фавикона
  • Еще не прошел робот поисковика и не зафиксировал его присутствие. Дело в том, что роботы бродят по интернету по своему, никому неизвестному расписанию, поэтому нужно набраться терпения и подождать какое-то время. Возможно он пройдет и проиндексирует ваш фавикон через день, а может и через две недели.
  • не прописан код в файле header.php, или неправильно прописан

Но прежде посмотрим, видят ли ваш фавикон поисковики.

Проверка на видимость фавикона в поисковиках

В Яндексе: Для этого наберите в адресной строке браузера http://favicon.yandex.net/favicon/www. ………… .ru (вставьте в пустое место ваш домен)

В Гугле: В адресной строке браузера набираем http://www.google.com/s2/favicons?domain=www. ……. .ru (в пустое место пишите свой домен)

В том и другом случае вы увидите в левом верхнем углу ваш фавикон. Ну или не увидите.

На всякий случай перед этим шагом почистите кэш браузера или перезапустите его.

и откройте в админке Внешний вид-Редактор, откройте в редакторе Заголовок (header.php). Вставьте перед тегом данный код и обновите файл.

После внесения этих изменений ждем их индексации поисковыми роботами. Через какое-то время фавикон появится.

Вставить фавикон при помощи плагина

В админке откройте Плагины, в поиске забейте All in One Favicon и активируйте его.

Затем в меню Настройки найдите All in One Favicon, войдите в него и загрузите, указав путь к вашему рисунку фавикона

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

rwix.ru

html — Добавить значок на веб-сайт

html — Добавить значок на веб-сайт — qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 321k раз

На этот вопрос уже есть ответы здесь :

Закрыт 8 лет назад.

Возможный дубликат:
Изображение заголовка HTML

Подскажите, пожалуйста, как сделать так, чтобы значки отображались на вкладках браузера в PHP?

Я хочу, чтобы мой значок отображался на вкладках при доступе к моему сайту.

Создан 09 авг.

Osgosg

1,10722 золотых знака77 серебряных знаков66 бронзовых знаков

0

Просто поместите файл с именем favicon.ico в корневом каталоге.

Если вы хотите узнать больше, начните читать: