Как сделать значок в поиске
Pipemaker.ru
Записная книжка без политики и религии
Иконки сайтов в поиске Google
Сегодня речь пойдет о полезном плагине для браузера Google Chrome, которое позволяет очень удобно визуально искать нужные сайты в выдаче поисковика.
У Яндекса есть очень приятная и полезная штука. Когда вводишь поисковый запрос, слева от каждого сайта есть маленькая иконка (favicon), которая позволяет узнать сайт с первого взгляда:
А вот в Google такой штуки нет. Более того, у Гугла нет почему-то и нумерации сайтов, но это другая история:
Это дико неудобно и, честно сказать, бесит. Глаза сломаешь, пока найдешь нужное.
Добрые люди пришли на помощь страждущим и написали небольшое приложение под названием «Faviconize Google«, которое как раз и добавляет те самые фавиконы в выдачу Гугла. Установив этот плагин в браузер Хром, я увидел идиллическую картинку:
Справедливость восторжествовала, юзабилити в норме. Я бы даже сказал, что выдача Гугла стала user friendly.
Скачать Faviconize Google можно с Google Play
Очень полезное расширение, очень рекомендую.
15 Comments on «Иконки сайтов в поиске Google»
Слушай, меня тоже этот факт бесит. Зрительно пробегаешь глазами по иконкам и видишь знакомый сайт.
А ещи гугл убрал предпросмотр сайтов. очень классная фича была.
Вот я и озаботился фавиконами. А предпросмотр не сделать никак.
Спасибо большое, по вашему совету удалось вернуть иконки))
А для предпросмотра теперь появился SearchPreview, доступен там же.
Faviconize Google не работает уже давно и никто не отвечает, как исправить. Разработчики молчат. При смене кода выдачи, начинает работать, но только до перезагрузки, потом пишет что расширение повреждено и не работает.
И правда 🙂 Не обращал до Вашего комментария внимания даже.
Не работает это расширение уже, есть другие варианты?))
Не работает, других способов нет?
Я не знаю, может и есть.
вот это расширение работает Search Engine Favicons
«Знаковое» обновление поисковой выдачи «Яндекс»
Время чтения: 3 минуты Нет времени читать? Нет времени?
Вчера в блоге «Яндекс» появилась статья о системе знаков, которые выдаются сайтам и отображаются в поисковой выдаче. Знаки помогут пользователям решить, по какой ссылке перейти.
На данный момент существуют следующие знаки:
Популярный сайт. Сайт с большим трафиком и постоянной аудиторией.
Выбор пользователей. Ресурс с активными и лояльными пользователями.
Навигационный ответ. Сайт, который лучше всего соответствует поисковому запросу. Например, по запросу «твиттер» галочка будет у сайта twitter.com.
Подтвержденный профиль. Официальная страница человека или компании в социальных сетях.
Галочки также получают:
Это поможет попасть и выдачи на подлинный сайт, что уменьшит вероятность мошенничества.
Как получить знак в «Яндекс»
О порядке выдачи и отображения знаков известно немного. Эти процессы регулируются автоматическими алгоритмами, которые не разглашаются и не комментируются. Также в «Яндексе» заявили, что алгоритмы могут в любое время измениться.
Пока можно свести все к «улучшайте сайт, получите знак». Однако это не гарантирует, что знак будет отображаться в выдаче, потому что это тоже регулируются алгоритмами, хоть и утверждается, что все сайты равны перед ними.
Пока система работает недостаточно точно, потому что у сайта «Текстерра» нет галочки:
В то же время у страницы на Plus.Google и у канала на YouTube есть знак «популярный сайт»:
У групп в Facebook и «ВКонтакте» тоже нет знаков. Галочка на «Яндекс.Картах» не зависит от «Текстерры», потому что «Карты» – это сервис «Яндекс». Сложно сделать вывод, получен ли «огонек» благодаря популярности самого YouTube или Google, потому что его нет ни у одной из других социальных сетей, хотя они тоже очень популярны.
Безусловно, все сайты будут акцентировать внимание на данных иконках, и стараться получить максимально возможное их количество. Однако для пользователя, который не увлекается данной сферой и ставит перед собой задачу просто найти то, что интересует, иконки – пустой звук в данный момент.
Во-первых, чтобы посмотреть общую статистику по сайту нужно кликнуть по стрелке, а затем уже выбрать пункт «информация о сайте»:
Не думаю, что большой процент пользователей будут это делать. Сейчас уже «Яндекс» добавили пояснения ко всем иконкам, но опять же это спорные действия.
Во-вторых, нужно время на то, чтобы люди в принципе стали замечать и акцентировать внимание на них. Иконки небольшие и явно не сразу бросаются в глаза:
Я бы выводил сразу все возможные иконки, естественно, чтобы это было визуально не аляписто.
В-третьих, как и в любых других нововведениях, необходимо давать больше пояснений со стороны «Яндекса» по данным иконкам. Достаточно старая иконка официального источника понятна всем и влияет на выбор:
А новые требуют времени для адаптации и принятия.
Поэтому, если данное нововведение и повлечет за собой некоторую гонку, выхлоп от нее получим не скоро.
Как сделать и установить фавикон на сайт
В этой статье я расскажу вам о том, как установить фавикон на сайт. Сделать это можно с помощью корневого каталога сайта или используя функционал шаблона. Мы разберем все варианты и определим, какой из них будет наилучшим для того или иного случая.
Но перед этим мы поговорим о том, как этот самый favicon можно нарисовать. Далее разберемся в том, какой размер должен быть у логотипа, в конце расскажу, как вставить созданную иконку на сайт.
Что такое фавикон и почему он важен для СЕО
Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:
Также иконка отображается в поисковой выдаче, и если ваш сайт не имеет собственного фавикона, то пользователи вряд ли будут обращать на него внимание. Особенно более опытные, которые действительно ценят каждую мелочь.
В Яндекс Вебмастере отсутствие фавикона классифицируется как ошибка, которую срочно нужно исправить. Связано это не только с тем, что люди в поисковике могут не доверять сайту без иконки, но и с определенными поисковыми алгоритмами. Роботы видят такие технические недостатки и чаще всего понижают ресурс в выдаче. Печальное явление, которое может сказаться на всем SEO-продвижении.
Подведем небольшие итоги:
Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.
Теперь давайте разберемся в том, как можно эту самую иконку нарисовать. Сделать это можно при помощи различных онлайн-сервисов, редакторов.
Где скачать готовый вариант
Далеко не лучший выбор, но кто-то им пользуется. Вы можете скачать готовый фавикон из интернета и особо не заморачиваться над самостоятельным созданием своего. Все они представлены в удобных форматах и нужных размерах.
Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.
Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.
Готовые варианты можно поискать и на различных сайтах. Как правило, там представлены целые подборки всевозможных тематических логотипов, которые могут прийтись по вкусу некоторым вебмастерам.
Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.
Создание фавикона
Онлайн-сервисы
Нарисовать фавикон можно в онлайн-сервисах. Достаточно просто ввести в поисковик соответствующий запрос, после чего вашему вниманию будет представлен целый перечень сайтов, которые могут помочь вам реализовать задуманное.
Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.
Как видите, здесь все интуитивно понятно. Выбираем карандаш, настраиваем цвет и рисуем. Если вашему логотипу нужна какая-то основа, то вы можете воспользоваться “Импортом из файла” и “Импортом с сайта”.
Как только мы закончим наши художества, прокручиваем страницу вниз и скачиваем нашу картинку.
Обратите внимание на левую часть окна “Ваш результат”. Там вы посмотрите, как будет выглядеть ваша иконка во вкладке браузера.
Все остальные генераторы работают по схожему сценарию. Точно так же выбираем цвет, рисуем при помощи простых инструментов, а после – скачиваем к себе на жесткий диск.
Adobe Photoshop
Если у вас есть данный графический редактор, то создание логотипа можно вывести на более качественный уровень. В основном, конечно, все и делают иконки через фотошоп или аналогичные редакторы. Предыдущими вариантами пользуются новички. Крупные порталы и сайты больших компаний вряд ли будут использовать картинку, нарисованную в онлайн-генераторе.
Итак, у нас есть два варианта:
Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.
Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.
Тут мы можем выбрать размер – в пикселях или любой другой метрический системе. Здесь же – содержимое фона. Рекомендую выбирать прозрачный фон, который в случае чего может быть залит абсолютно любым цветом.
Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.
Нажимаем кнопку “Создать”, после чего у нас перед глазами появляется область с заданным размером. Сейчас мы будем творить.
Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.
Фон как на скриншоте показывает, что я выбрал вариант “прозрачный” на первом этапе создания картинки.
Теперь вводим любую букву с клавиатуры. Мы можем уменьшить или увеличить ее, поменять цвет, добавить тени или расположить в любой части созданного нами квадрата. Давайте сделаем лого в виде буквы “А”.
Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.
Если зажать левую кнопку мыши на букве, то можно передвигать букву относительно границ квадрата. Когда вы разместите ее в центре, программа покажет вам соответствующее уведомление в виду перекрестия внутри квадрата. Как только вы отпустите кнопку, оно пропадет.
Если вы хотите добавить в свой фавикон что-то особенное, то можно воспользоваться инструментом “Стили”. Для этого перейдите в соответствующий раздел, как это показано на скриншоте.
Тут можно придать своей букве интересный вид. Например, настроить тени, сделать обводку или же градиентный цвет.
Кстати говоря, не пугайтесь, если при приближении ваша буква будет выглядеть как квадратное нечто. Если вы уменьшите масштаб до 100 % она примет свой естественный, четкий вид. Во вкладке картинка тоже будет выглядеть хорошо.
Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.
При установке через плагины или тему можно использовать любое название и формат. Однако в случае с корневым каталогом файл должен иметь название favicon и формат – ICO.
Установка на сайт
Теперь, когда мы создали фавикон одним из способов выше, мы должны установить его на наш сайт. Это можно сделать несколькими способами.
Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.
С помощью корневого каталога
Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.
Важно: размер должен быть 16 x 16 или 32 x 32. Название favicon, а расширение *.ico.
Теперь мы должны загрузить этот файлик в корень нашего сайта. Можно сделать это при помощи FTP-клиента или файлового менеджера.
Корень сайта, как правило – public_html. Независимо от платформы. Но в некоторых темах могут наблюдаться проблемы с отображением фавиконки. Чтобы пофиксить их, мы должны вручную добавить в header.php следующий код:
Теперь проверьте отображение фавиконки во вкладке браузера, для этого перейдите на любую страницу сайта. При необходимости очистите кэш браузера.
Также вы можете проверить наличие иконки в выдаче Яндекса, но там она появится не сразу, а только после того, как проиндексируется.
Через тему WordPress
Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.
Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.
Плагины
Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.
Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.
Нажимаем на кнопку “Установить”, а после активируем нужное расширение.
После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.
Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.
Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple. В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант. Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.
Заключение
Теперь вы знаете, зачем нужен фавикон и что это такое вообще. Надеюсь, что данная статья окажется полезной для вас и при помощи описанных инструментов вы сможете установить логотип на свой сайт. По сути, это дело нескольких десятков минут. Однако значение такой технической особенности очень велико для поисковой оптимизации и поведенческих факторов.
Многие вебмастеры, к сожалению, упускают этот момент. Вместе с ним из вида выпадают и другие, не менее важные нюансы. Если вы новичок и готовы учиться создавать крутые сайты и зарабатывать на них, то я приглашаю вас на курс Василия Блинова “Как создать блог”.
На этом курсе будут рассмотрены самые главные особенности грамотного создания информационных проектов, взаимодействия с командой и прочие полезные аспекты, которые обязательно понадобятся вам при развитии вашего бизнеса.
Как создать иконку для сайта
В этой заметке поговорим о том, как создать иконку для сайта и установить её на свой ресурс, как сделать иконку из обычной картинки, и о том, как поменять уже существующую иконку на новую. Я опишу, как это делаю я. Не исключаю, что есть и другие способы, но они мне неизвестны.
Н а самом деле, создание иконки для сайта — простая и незатейливая процедура. Вопросы об этом, конечно, периодически возникали и я отвечал каждому спрашивающему лично. Но лень меня наконец поборола и была написана эта заметка. Теперь можно отправлять сюда всех интересующихся.
П овторюсь, здесь описан мой личный опыт. То, как я делаю иконки. Эстеты и гурманы могут проходить мимо.
П еред тем, как установить иконку на сайт, её нужно создать. С этого и начнём.
§ 1. Как сделать иконку
Ч то такое иконка (favicon), описано здесь. Поэтому перейдём непосредственно к процессу её создания. Как делаю я:
В сё — иконка для сайта готова.
Нужно подбирать простые рисунки чего-то. Крупно. Если на картинке будет много чего-то и мелко, то иконка получится в форме расплывчатого пятна. И станет уже не иконкой, а следом жизнедеятельности птиц;
Способ проверялся только в XnView. Он при сохранении перекодирует картинку как надо.
§ 2. Создание иконки для сайта
С обственно, сохранив картинку как favicon.ico, мы и создали иконку для сайта.
§ 3. Как установить иконку на сайт
К опируем наш файл favicon.ico в корневую папку сайта (там, где лежит главная страница сайта) и всё. Браузеры, поисковые системы и прочие программы с сервисами автоматически нашу иконку найдут и отобразят. Главное, чтобы она называлась favicon.ico и лежала в корневой папке сайта.
§ 4. Как поменять иконку сайта
З аменить файл favicon.ico, лежащий на хостинге, на свой, созданный способом выше.
§ 5. Зачем оно вообще надо
Ч то даёт наличие иконки у сайта? Ну, самое важное это то, что сайт получает свой опознавательный знак. В браузере:
В поисковой системе Яндекс (Google иконки сайтов не отображает):
В закладках браузера:
И при отображении в других программах и сервисах, коих большое число.
И это действительно важно. Например, по ссылке с иконкой намного охотнее кликают в поисковой выдаче. В общем, думаю, понятно, что своя иконка для сайта нужна.
§ 6. Заключение
Э то всё. Я же говорил, что создание иконки — простая и незатейливая процедура. Но если вдруг (всякое бывает) у тебя ещё остались вопросы, то по ссылке ниже ты их сможешь задать.
Поделиться ссылкой на эту страницу в: