Как добавить иконку сайта в адресную строку браузера? Как сделать иконку для сайта


создать и установить иконку на сайт

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

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

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

Название «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 код иконки для сайта

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

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

<link rel="SHORTCUT ICON" href="/favicon.gif" type="image/gif">

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

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

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

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

 

Статьи по теме:

Самостоятельное продвижение сайтов в ИнтернетеКак закрыть внешние ссылки от индексацииКак подобрать ключевые слова на сайтГде взять контент для сайтаКакой URL добавить на страницу

seokleo.ru

Как добавить иконку сайта в адресную строку браузера?

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

Отображение иконки в строке браузера

Отображение иконки в строке браузера

Чтобы установить подобную «фичу», необходимо нарисовать изображение размером 16х16 пикселов и сохранить его в формате ICO в корне сайта под именем favicon.ico.

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин.

Для работы плагина файл необходимо распаковать и сохранить в папке Plug-Ins\File Formats. По умолчанию программа Photoshop CS под Windows устанавливается в папке c:\Program Files\Adobe\Photoshop CS. Тогда полный путь для файла плагина будет c:\Program Files\Adobe\Photoshop CS\Plug-Ins\File Formats.

Размещение плагина для сохранения файлов в формате ICO

Размещение плагина для сохранения файлов в формате ICO

После добавления плагина, при сохранении рисунка в списке доступных форматов появляется новый пункт «Windows Icon».

Тип файла для сохранения иконки

Тип файла для сохранения иконки

Остается сделать желаемую иконку 16х16 пикселов и сохранить ее под именем favicon.ico в корне сайта. Браузер автоматически ищет этот файл и добавляет его в адресную строку, а также закладки.

Файл не обязательно должен располагаться в корне сайта, но тогда следует указать браузеру, где он находится. Это делается через тег <link>, как показано ниже.

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

Атрибут href задает расположение и имя файла.

Формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG. При этом необходимо сменить значение атрибута type на image/gif или image/png, в зависимости от типа изображения.

<head> <link rel="shortcut icon" href="/images/favicon.png" type="image/png"> </head>

htmlbook.ru

Иконка сайта.

Что такое иконка сайта?

Для начала разберемся, что такое иконка сайта и где мы её можем наблюдать. Иконка сайта это небольшое изображение 16х16 пикселей в формате ico. которое можно увидеть в адресной строке, "закладках", "избранном" "истории", заголовках страниц в браузерах,

а также в результатах поиска поисковой системы Яндекс

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

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

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

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

Напомню, тег <link> имеет атрибуты:

  • href - Путь к файлу.
  • rel - Определяет отношения между текущим документом и файлом, на который делается ссылка.
    • shortcut icon - Определяет, что подключаемый файл является иконкой.
    • stylesheet - Определяет, что подключаемый файл содержит таблицу стилей.
    • application/rss+xml - Файл в формате XML для описания ленты новостей.
  • type - MIME тип данных подключаемого файла.

И пишется в голове документа между тегами <head> </head> следовательно вся запись вместе приобретает следующий вид:

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

Где favicon.ico название иконки лежащей в корневой папке сайта.

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

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

Однако всё же лучше связывайте иконку со страницей сайта тегом <link>

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Иконка сайта</title><link rel="shortcut icon" href="../graphics/favicon.ico" type="image/x-icon"></head><body><h2>Моя любимая страничка!</h2><p>Эта страничка использует индивидуальную иконку в виде сердечка.</p></body></html>

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

Как самостоятельно изготовить файл favicon.ico?

Способ первый:

Найти в Интернете готовую подходящую иконку в коллекциях иконок..

Способ второй:

Изготовить иконку с помощью какого либо онлайн сервиса. Наиболее популярным сервисом, создающим иконки для сайта, в русскоязычном Интернете, является ресурс www.favicon.ru

Всё просто заходите на данный ресурс, загружаете большое размером изображение (желательно квадратное) только весом не более 300кб.. ну например логотип сайта, жмете кнопку "Создать favicon.ico" на выходе скачиваете уменьшенную копию этого изображения 16х16 (а так же по желанию 32х32 и 48х48) пикселей в формате ico. Достаточно удобный ресурс позволяющий быстро создавать иконки приемлемого качества.

Ну и третий способ:

Лучше всего, конечно, нарисовать иконку самостоятельно, в которой каждый пиксель будет именно таким каким Вы желаете его видеть. Однако большинство популярных графических редакторов типа фотошопа не желают сохранять изображение в формате ico.. Но не беда!! В Интернете гуляет масса редакторов иконок хороших и не очень, платных и бесплатных, функционально простеньких и жутко навороченных.

Лично я пользуюсь не сильно хитрой программкой - редактором иконок, но пользуюсь ей не так, как задумывали авторы.. Я сначала рисую иконку в привычном мне фотошопе, сохраняю её в формате jpg, потом открываю это изображение с помощью этой нехитрой программки и сохраняю его же уже в формате ico. Короче использую программку в качестве "конвертора", а не графического редактора.. программка называется IcoFX впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.

www.webremeslo.ru

Как быстро сделать иконку для сайта

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

В любом случае, нелишним будет знать, как создать, установить и изменить иконку. Об этом и поговорим.

Создание фавикона с помощью онлайн-сервисов

Иконку, или фавикон (от английского favorites icon) легче всего создать, используя популярные бесплатные сервисы.

16-500x230 Как сделать иконку для сайта

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

Сделать фавикон для сайта можно, используя любой графический редактор. Если уже есть готовая картинка (например, эмблема компании), ее стоит лишь подготовить и уменьшить. Если же нужно создать рисунок «с нуля» — сервис «фавикон» предлагает воспользоваться элементарной, но довольно удобной программой рисования иконок.

21-500x347 Как сделать иконку для сайта

Итак, иконка загружена или нарисована. Для того, чтобы получить готовое изображение, достаточно нажать кнопку «Скачать favicon» в правом нижнем углу страницы. В результате загрузится файл favicon.ico.

Фавикон и Фотошоп

Можно создать искомый файл, используя только Фотошоп. Подобрав или предварительно отрисовав нужное изображение, следует нажать «Сохранить как» и из списка форматов для сохранения  выбрать .ico.

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

Небольшой совет. Практически все браузеры стандартизируют иконки сайтов до размера 16 на 16 пикселей. Учитывая это, не нужно создавать высокохудожественные полотна — их просто-напросто не будет видно.

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

31-500x162 Как сделать иконку для сайта

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

Заветный фавикон получили. Следует подумать, как поставить иконку на сайт. Для этого нужно загрузить файл изображения в корневую директорию сайта (обычно она носит название public_html).

Но это еще не все. Для отображения иконки нужно прописать следующий html-код:

<link rel=»SHORTCUT ICON» href=»/favicon.ico»type=»image/x-icon»>

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

<link rel=»SHORTCUT ICON» href=»/favicon.gif»type=»image/gif»>

Этот код устанавливается в любом месте между тегами <head> и </head> файла главной страницы.

63-500x55 Как сделать иконку для сайта

Как установить иконку на сайт, мы разобрались. Проверить правильность установки можно, просто введя в строке браузера адрес своей страницы. Если слева от адреса отображается фавикон — все сделано верно.

44-500x245 Как сделать иконку для сайта

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

Замена иконки

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

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

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

wildo.ru

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

Вы имеете свой сайт, но не знаете, как сделать иконку для сайта? На самом деле это не трудно и не занимает много времени...

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

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

Если вы будете продвигать свой блог в соц.сетях, например, ВКонтакте, то вам хорошим помощником будет socprka.ru. Такая раскрутка блога может принести неплохие результаты... А красивый фавикон будет выгодно выделять ваш сайт из массы других!

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

Как это сделать?

Иконка для сайта, как сделать?

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

установить фавикон на сайт

Если и вы хотите отличаться от других блогеров и развивать свой бренд, то установить фавикон, вам просто необходимо! Кстати, некоторые это называют — изменить иконку сайта! smile

Зачем нужна уникальная иконка для сайта?

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

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

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

Понятно, что для этого нужен индивидуальный шаблон! А в шаблоне уже нужен индивидуальный фавикон! И желательно ЭТУ уникальность делать еще до написания уникальных статей! Почему?

Все просто — когда статья появляется на вашем блоге, то приходят роботы Яндекса и Гугла. И как вы думаете, что они делают? Только на статью смотрят? Не угадали! smile

Боты (поисковые роботы), анализируют ваш сайт целиком. Смотрят на дизайн, юзабилити (удобство пользования сайтом), верстку (ошибки в коде) и контент. А, если контент отличный, а все остальное оставляет желать лучшего, то как бот отнесется к такому сайту?

Вряд ли такой сайт вскоре будет в ТОПе! smile

Поэтому давайте начнем с малого и первостепенного — установим иконку (фавикон), на наш сайт!

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

Сам код выглядит вот таким образом:

<link href='/ffi.ico' rel='icon' type='image/x-icon'/><link href='/ffi.ico' rel='shortcut icon' type='image/x-icon'/><link href='/ffi.ico' rel='shortcut icon' type='image/gif'/>

Можете его скопировать в блокнот, заменить мои ссылки на свои и смело вставлять в Blogger сразу после закрывающего тега </title>.

В WordPress зайдите в Редактор, найдите справа Заголовок (header.php) и точно также после тега </title> вставляйте ваш код!

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

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

sergmedvedev.ru

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

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

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

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

Для создания иконок для сайта есть специальный сервис, который Вы можете найти по адресу www.favicon.cc.Для создания своего favicon’a выберите цвет и начните рисовать, закрашивая пикселы Вашего будущего фавикона. Если результат Вам не нравится по тем или иным причинам, то вы можете воспользоваться инструментом transparent, который предназначен для «попиксельного» удаления. Вот что у меня получилось.

Замечательной особенностью сервиса favicon.cc является наличие раздела Preview, в котором отображается результат Вашего труда оригинального размера. Кроме того, результать автоматически отображается прямо в браузере рядом с заголовком www.favicon.cc.

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

Как сделать favicon (фавикон), используя готовое изображение

Если Вас, также как и меня, природа обделила талантом художника, для создания иконки можно использовать готовое изображение. Для этого можно воспользоваться ресурсом favicon.ru. У Вас не возникнут проблемы с его использованием, так как он полностью русскоязычный. По кнопке «Обзор» выбираем изображение, которое станет иконкой сайта, далее кликаем “Создать favicon.ico” и напоследок “Скачать favicon.ico”. К несчастью, у меня не оказалось подходящего изображения, поэтому для того, чтобы сделать своему сайту иконку я воспользуюсь еще одним способом.

В сети можно воспользоваться хранилищами бесплатных готовых favicon’ов и подобрать наиболее подходящий по тематике вашему сайту(блогу). Я рекомендую следующие базы:

www.iconj.com

www.favicon.co.uk

www.audit4web.ru

После продолжительных поисков я остановился на фавиконе с белой буквой S на синем фоне. Все, что теперь осталось, это установить иконку на сайт.

Для того, чтобы установить понравившуюся иконку на Ваш сайт необходимо прежде всего, закачать файл favicon.ico в корневую папку Вашего сайт. После этого, необходимо вставить  между тегами <head> и </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 Вашей темы оформления. Вот и все. Проделав эти нехитрые манипуляции, я установил на свой сайт фавиконку.

Если Вам понравилась статья, обязательно напишите об этом в комментариях. И по традиции напоминаю, не забывайте подписываться на RSS.

Как сделать иконку для сайта was last modified: Декабрь 16th, 2016 by admin

www.bestseoblog.ru

Как сделать и установить favicon — иконку для сайта / webentrance.ru

Установить faviconКак сделать и установить favicon для своего сайта, чтобы он отличался от других ресурсов в интернете и был узнаваем с первого взгляда. Вопрос совсем не праздный.

Содержание:

Что такое favicon

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

Там, где размещается адресная строка браузера с адресом сайта, эта картинка, иначе favicon, также отображается.

Это позволяет посетителям обратить внимание на ваш ресурс в интернете и лучше его запомнить по сравнению с другими.

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

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

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

Как работает favicon

Замечено, что люди в результатах поиска чаще кликают на сайты, которые имеют такие иконки, чем на пустые, на которых не установлен favicon.

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

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

Делаем favicon с помощью программы Paint

Favicon для сайта может быть двух размеров, это 16 ×16 или 32 × 32. Изображение может быть в форматах png, либо gif.

Сделать favicon лучше таким образом, чтобы он был разборчив и что-то изображал. Разберем, как сделать и установить favicon на сайт.

Подготавливаем изображение. Например, с помощью программы Paint, которая есть на любом компьютере. Выбираем изображение,

Картинка для favicon

в программе нажимаем Изменить размер. В открывшемся окне снимаем флажок Сохранить пропорции и выставим размеры в 16 px по горизонтали и по вертикали.

Размеры favicon

Нажимаем Сохранить как, выбираем формат при сохранении – пусть PNG и выбираем нужную папку.

Как сделать favicon с помощью онлайн сервиса

Чтобы сделать favicon, можно воспользоваться специальным сервисом — favicon.cc. Сервис предоставляет возможность сделать иконку для favicon без каких-либо условий, по сравнению с другими сервисами. Так, например, favicon.ru требует поставить на вашем сайте ссылку на сервис, что не совсем хорошо.

Сервис favicon.cc

В открывшемся окне есть несколько функций, в частности можно залить уже готовое изображение, если нажать на ссылку Import Image, то есть его загрузить.

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

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

Предварительный просмотр

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

Для этого надо выбрать ссылку Greate Now Favicon и перед нами будет чистое поле. Здесь можно поэкспериментировать с изображением и создать что-нибудь подходящее и оригинальное для своего проекта.

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

Рисуем favicon

Когда картинка будет создана, то под предварительным просмотром есть ссылка Download Favicon. Нажимаем на нее и предлагается сохранить эту картинку в нужную папку на компьютер с расширением ico.

Как установить favicon на сайт

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

Но favicon в адресной строке сайта может пока не появиться. Чтобы картинка подгружалась, нужно внести изменения в заголовок сайта – в файл header.php. То есть нужно дать команду, чтобы сайт подгружал favicon.

Для этого входим в консоль – Внешний вид – Редактор. Выбираем header.php и перед закрывающим тегом </head> вставляем код следующего содержания:

<link rel=”shortcut icon” type=”image/png” href=”адрес вашего сайта/wp-content/themes/название картинки.png”/>

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

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

Другие записи по теме:

webentrance.ru