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

Как использовать иконки Font Awesome¶

Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.

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

Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).

Используйте элемента <i> для ссылки на элемент:

Или используйте элемент span:

Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).

Создать панель иконок

Шаг 1) Добавить HTML:

Пример

<!— Добавить библиотеку иконок —><link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»><div class=»icon-bar»>  <a class=»active» href=»#»><i class=»fa fa-home»></i></a>  <a href=»#»><i class=»fa fa-search»></i></a>  <a href=»#»><i class=»fa fa-envelope»></i></a>  <a href=»#»><i class=»fa fa-globe»></i></a>  <a href=»#»><i class=»fa fa-trash»></i></a></div>

Шаг 2) Добавить CSS:

Пример вертикальный

.icon-bar {  width: 90px; /* Установите определенную ширину */  background-color: #555; /* Темно-серый фон */}.icon-bar a {   display: block; /* Сделайте так, чтобы ссылки располагались друг под другом, а не бок о бок */  text-align: center; /* Выравнивание текста по центру */  padding: 16px; /* Добавить немного отступы */  transition: all 0.3s ease; /* Добавить переход для эффектов наведения */  color: white; /* Белый цвет текста */  font-size: 36px; /* Увеличенный размер шрифта */} .icon-bar a:hover {  background-color: #000; /* Добавить при наведении цвет */}.active {  background-color: #4CAF50; /* Добавить активный/текущий цвет */}

.icon-bar {  width: 100%; /* Полная ширина */  background-color: #555; /* Темно-серый фон */  overflow: auto; /* Переполнение из-за поплавка */}.icon-bar a {  float: left; /* Поплавок одной стороны бок */  text-align: center; /* Выравнивание текста по центру */  width: 20%; /* Равная ширина (5 иконок с шириной 20% каждая = 100%) */  padding: 12px 0; /* Некоторые верхние и нижние отступы */  transition: all 0.3s ease; /* Добавить переход для эффектов наведения */  color: white; /* Белый цвет текста */   font-size: 36px; /* Увеличенный размер шрифта */}.icon-bar a:hover {  background-color: #000; /* Добавить при наведении цвет */}.active {  background-color: #4CAF50; /* Добавить активный/текущий цвет */}

Добавление иконки

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

Чтобы установить фавикон на сайт, нужно всего лишь следовать несложному алгоритму:

  1. Во-первых, необходимо создать фавикон. Этот процесс не должен доставить неудобств. Для начала нужно выбрать изображение, которое будет позиционировать сайт, а потом отредактировать его при помощи специального сервера, который автоматически подгоняет картинку под стандартный размер фавикона.
  2. Во-вторых, нужно полученный материал загрузить в корневую папку сайта.
  3. И в-третьих, вписать в тег <head> такой код:

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

Самый простой и доступный – через корневой каталог. Его мы рассмотрим в первую очередь.

Для начала нам нужно конвертировать файл в ICO. Это можно сделать при помощи любого онлайн-сервиса, достаточно ввести в поисковую строку: “Конвертация в ICO” или “PNG в ICO”. Загружаем туда фотографию, получаем favicon.ico.

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

Для этого идем во “Внешний вид” – “Редактор”, находим в боковой панели нужный файл и кликаем для редактирования. Код мы должны вставить внутри тега <head>.

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

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

Через тему WordPress

Заходим в настройки темы, используя верхнюю панель на сайте (“Внешний вид” – “Темы”). Далее идем в “Свойства сайта”.

Вот тут-то мы и настраиваем фавиконку. Просто нажимаем на “Выбрать/изменить изображение”, далее откроется менеджер, через который мы и загружаем нашу картинку.

Плагины

Также есть возможность сделать это с помощью плагинов, но это не рекомендуется из-за нагрузки на CMS.

Идем в “Плагины”, выбираем “Добавить новый”. Откроется страница каталога, где в окно поиска мы должны ввести ключевое слово – Favicon. Нашему взору будет представлено большое количество всевозможных плагинов. Все они работают примерно одинаково, но я все же позволю себе объяснить, как все это делается, на примере одного из самых популярных – All in One Favicon.

Нажимаем на кнопку “Установить”, а после активируем нужное расширение.

После того как плагин будет установлен и активирован, мы должны перейти в настройки. Они представлены в таком виде.

Для каждого формата здесь есть соответствующая вкладка. Допустим, вы создали иконку в формате GIF и хотите, чтобы именно она отображалась во вкладке. Соответственно идем во вторую по счету строку, нажимаем “Загрузить” и в файловом менеджере выбираем наш файл. То же касается и других форматов.

Отдельного внимания заслуживает вкладка “Apple Touch Icon Frontend”. В ней вы сможете задать иконку для устройств от Apple. В отличие от обычного фавикона, логотип для Айфонов или Макбуков имеет большее разрешение и качество. То есть вам, чтобы загрузить картинку, придется создать еще один вариант. Уже в разрешении 512 x 512 или 1 024 x 1 024. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

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

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

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

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

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

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

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

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

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

Как создать фавикон?

Сделать иконку для названия сайта можно несколькими способами. Конечно же, самый простой — это работа с разными готовыми решениями. Речь может идти о каких-нибудь сервисах или программах, которые позволяют из полноценного изображения сделать иконку путем уменьшения его. Однако, я бы рекомендовал заняться разработкой такого логотипа собственными силами. Это, во-первых, даст возможность чему-то научиться; а во-вторых, предоставит большее количество инструментов. Все, что вам нужно будет уметь для этого -что рисовать, а также знать, какого размера фавикон должен быть в конечном варианте. О размере иконки для сайта мы поговорим чуть позже, а пока отметим некоторые тонкости работы с такими изображениями. В частности, не упоминая размер фавикона для сайта, следует уточнить формат такого изображения. Как отмечают опытные дизайнеры, картинка должна быть сохранена в виде.PNG (24-битном), либо же как файл.ICO.

Произвести сохранение картинки можно, например, при помощи Photoshop, где и будет рисоваться эмблема.

Что такое фавикон и почему он важен для СЕО

Фавикон (favicon) – значок веб-сайта размером 16 x 16 (или 32 x 32, но не более). Он отображается во вкладке браузера. Выглядит это так:

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

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

Подведем небольшие итоги:

  • Favicon влияет на поведенческие факторы и кликабельность в выдаче.
  • Поисковые роботы также могут учитывать наличие или отсутствие фавикона.
  • Такой технический недочет может привести к падению трафика.

Иными словами, если у вас вообще возникает вопрос: добавить favicon или же нет, то ответ очевиден – обязательно добавлять.

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

Искушение № 1. Отображение всех функций

Мы уже привыкли к тому, что иконка принтера отправляет на печать одну копию документа на принтер, который стоит по умолчанию. Но представьте, что вы никогда прежде не печатали документы: данная иконка может использоваться для настройки параметров печати или для поиска и добавления принтера(пример из книги Алана Купера About Face 3).

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

На примере панели инструментов Outlook 2007 мы видим, что многочисленные конверты снижают читабельность иконок.

МЕНЮ

Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок

Больше

Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME

Что такое фавикон

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

Для чего нужны иконки ICO?

А может, можно и вовсе обойтись без иконок? Ведь необходимые действия и категории всегда можно просто подписать. Можно, конечно, но есть несколько веских причин, которые говорят в пользу того, что создать иконку ICO не просто нужно, а действительно необходимо

  • Простота распознавания. Создать иконки для сайта ICO 16х16 или 48х48 – настоящая необходимость, если вы действительно заботитесь о своих пользователях. Давайте на секунду представим, что стандартные пункты меню, оснащенные надписями и иконками, стали плохо видны (для людей с плохим зрением это представить несложно). И, о ужас, мы больше не можем прочитать ни одной надписи! Тем не менее, практически все иконки ICO остались узнаваемыми – теперь, даже не читая надпись, мы можем с легкостью делать в программе нужные действия благодаря привычным значкам.
  • Узнаваемость. Решив создать иконку ICO, вы заметите, что каждый такой значок в отличие от надписи обладает своими собственными характеристиками – формой и цветом. Таким образом, чтобы отличить одну надпись от другой, вам нужно ее прочитать. В случае с иконками ICO ничего читать не надо – достаточно секундного взгляда.
  • Запоминаемость. Экспериментально доказано, что картинки запоминаются лучше, чем надписи. Таким образом, со временем иконка вызывает даже определенные ассоциации в голове у пользователя. А ведь именно это вам и надо! Решив воспользоваться программой для создания иконки для сайта в формате ICO, в конечном итоге вы сможете создать значок, который настолько запомнится вашему пользователю, что в дальнейшем будет ассоциироваться у него только с вашим сайтом.
  • Привлечение пользователей. Иконки ICO 16х16 – отличный способ привлекать на сайт пользователей чуть чаще. Не так давно веб-мастера придумали такую «фишку» — размещать иконку ICO в адресной строке рядом с именем сайта. Такой значок получил название favicon.ico и позволил выделить определенный сайт из множества конкурентов. Но подробнее об этом – в следующем пункте.

Чтобы имидж не испортить

Как уже было сказано фавикон – это бренд, лицо сайта

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

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

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

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

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

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

ФОРМЫ

Форма входаФорма регистрацииФорма оформления заказаКонтактная формаФорма входа в соц сетиРегистрацияФорма с иконкамиРассылка по почтеСложенная формаАдаптивная формаФорма всплывающаяФорма линейнаяОчистить поле вводаКопирование текста в буфер обменаАнимированный поискКнопка поискаПолноэкранный поискПоле ввода в менюФорма входа в менюПользовательский флажок/радиоПользовательский выборТумблер перключательУстановить флажокОпределить Caps LockКнопка запуска на EnterПроверка пароляПереключение видимости пароляМногоступенчатая формаФункция автозаполнения

Форматы favicon

Основными форматами для favicon являются ICO, PNG и SVG. При желании, значок сайта можно сделать в форматах JPEG или анимированном GIF. Но из-за слабой поддержки основными браузерами использование таких значков превращается в нецелесообразную экзотику. Хотя и можно сделать favicon в формате GIF без анимации, но не нужно – лучше в PNG.

Favicon.ico

Хотя формат ICO сейчас считается устаревшим, но сбрасывать со счетов его ещё рано. Основными достоинствами этого формата являются: возможность хранения в одном файле нескольких вариантов размеров иконки сайта и поддержка полупрозрачности. Надо помнить что, IE10 и более ранние версии этого браузера понимают только ICO. Так же следует учитывать то, что этот формат довольно широко используется в операционной системе Windows. Т. е. favicon.ico используется как изображение для вкладок, панели задач, рабочего стола. Поэтому для корректного отображения на этих объектах, создаётся файл в формате ICO, содержащий три изображения рекомендуемых размеров: 16х16, 32х32 и 48х48. Сделать такой файл можно здесь. Подключение favicon.ico на сайте производится с помощью следующего кода:

<link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

В параметре href указывается путь до иконки сайта. В этом примере и далее в этой статье предполагается, что файл favicon размещён в корне сайта. Если файл иконки размещается не в корне сайта, то тогда нужно указать соответствующий путь.

Favicon.png

Формат PNG предоставляет более широкие возможности для изображения, чем ICO. Сейчас очень большое количество сайтов используют favicon в формате PNG. Он поддерживается всеми основными браузерами. Подключение favicon.png на сайте производится с помощью следующего кода:

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

Favicon.svg

Формат SVG — новый открытый формат векторной графики. В силу того, что изображения в SVG масштабируются без потери качества, он идеально подходит для favicon. Этот формат является рекомендацией консорциума W3C, его поддерживают ещё не все браузеры, но за ним будущее. Подключение favicon.svg на сайте производится с помощью следующего кода:

<link href="/favicon.svg" rel="icon" type="image/svg+xml" />

Отслеживать поддержку SVG браузерами можно

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

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

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

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

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

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

Как этого избежать?

Способов создать фавикон для сайта несколько:

1. Сделать его в графическом редакторе, например, в Photoshop с помощью специального плагина Favicon.ico. 

2. Нарисовать фавикон в специальных онлайн-сервисах (например, Katvin или favicon.cc) и потом скачать его оттуда в уже подходящем формате.

3. Воспользоваться имеющимся у вас изображением (например, вашим логотипом) и загрузить его в онлайн-генератор фавиконов — например, Favicon.by, Realfavicongenerator.net и др.

4. Скачать готовые фавиконы для сайта из специальных банков иконок — например, галерея Findicons. Данная сборка насчитывает более 500 тысяч иконок. Еще один вариант — IconJ c 18 тысячами фавиконов.

Когда вы скачаете сгенерированный фавикон, остается только добавить его на ваш сайт. 

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

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

После этого нужно просто вставить следующий код в мета-тег <head></head>:

<head>

  ...

  <link rel="icon" href="https://yoursite.ru/favicon.png" type="image/x-icon">

  <link rel="shortcut icon" href="https://yoursite.ru/favicon.png" type="image/x-icon">

  ...

</head>

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

Favicon для мобильных устройств Apple

Как и в андроид, устройства Apple имеют различный PPI для разных устройств, в том числе так называемые Retina-экраны. Для разных версий разрешений экрана и версий ОС так же существует ряд различных вариантов иконок:

  • 57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
  • 60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
  • 72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
  • 76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
  • 114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
  • 120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
  • 144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
  • 152×152 – для iPad с ретина дисплеем и iOS версии 7.0
  • 180×180 – для iPhone 6 Plus c iOS версии 8.0

Дизайн фавикона — когда проще не значит хуже

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

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

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

Можете ли вы в размере 16*16 четко сказать, что изображено на фавиконе? Постарайтесь, чтобы ваш фавикон не содержал мелких деталей, был хорошо различим и не пестрил всеми цветами радуги.

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

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

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

Изображения

Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Как проверить фавикон и исправить основные ошибки

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

  • Яндекс – https://favicon.yandex.net/favicon/mysite.ru 
  • – https://www.google.com/s2/favicons?domain=mysite.ru

Есть еще один вариант для проверки фавикона на разных устройствах — с помощью специальных сервисов, например, Realfavicongenerator. 

Если ваш фавикон не отображается в Яндексе или Google, начните с проверки таких моментов:

  1. Графическое изображение в формате ico, png или gif находится в корне ресурса?
  2. Код, ведущий к изображению, на страницах ресурса прописан правильно?
  3. Иконка не размытая и уникальная?
  4. Доступен ли файл с фавиконом для сканирования поисковых роботов?

Обратите внимание, что от пути к изображению напрямую зависит его отображение. Если хотите удалить или изменить фавикон, необходимо просто удалить или изменить файл favicon.ico (jpeg, gif, png). . С отображением фавиконов в Яндексе могут быть нюансы

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

С отображением фавиконов в Яндексе могут быть нюансы. Например, Яндекс отображает иконки не на всех страницах в поисковой выдаче. Если сайт находится ниже 10-15 позиции, то и изображения рядом со ссылкой не будет.

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

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

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

Делаем анимированный фавикон в онлайн генераторе

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

Рисуем Favicon с помощью веб-сервиса

Самый простой способ сделать фавикон — воспользоваться сервисом www.favicon.cc. Выглядит он так:

Чтобы нарисовать иконку, нужно просто выбрать нужный цвет, прозрачность и нарисовать нужные контуры. При создании иконки сразу есть возможность предпросмотра:

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

Что такое фавикон и для чего он необходим?

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

Создаем Favicon из готового изображения

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

Устанавливаем Favicon на сайт

Когда иконка будет готова, вы сможете ее скачать в формате .ico
. Чтобы добавить favicon на сайт, поместите файл favicon.ico в корневой каталог сайта и добавьте между тегами строчку:

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

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

(для Internet Explorer).

Размер фавикона может быть 16×16, 32×32.

References

FAVICON-WIKIPEDIA
Favicon, Wikipedia, Available at
http://en.wikipedia.org/wiki/Favicon .
GRDDL
Gleaning
Resource Descriptions from Dialects of Languages
, D.
Hazaël-Massieux, D. Connolly, Editors, W3C Team Submission, 16 May
2005, http://www.w3.org/TeamSubmission/2005/SUBM-grddl-20050516/ . Latest version
available at http://www.w3.org/TeamSubmission/grddl/ .
HTML401
HTML
4.01 Specification
, D. Raggett, A. Le Hors, I. Jacobs,
Editors, W3C Recommendation, 24 December 1999,
http://www.w3.org/TR/1999/REC-html401-19991224 . Latest version
available at http://www.w3.org/TR/html401 .
SITEDATA-36
Web site metadata improving on robots.txt, w3c/p3p and favicon
etc.
, TAG, Available at
http://www.w3.org/2001/tag/issues.html#siteData-36 .
XHTML1
XHTML 1.0 The
Extensible HyperText Markup Language (Second Edition)
, S.
Pemberton, Editor, W3C Recommendation, 1 August 2002,
http://www.w3.org/TR/2002/REC-xhtml1-20020801 . Latest
version available at http://www.w3.org/TR/xhtml1 .

Заключение

Начав свой путь с самого конца XX века, фавиконка от обычного типового оформления закладок стала неким атрибутом, который должен присутствовать у каждого интернет-сайта априори. Без данного элемента, о котором кстати часто, как владельцы сайтов, так и их администраторы или специалисты по продвижению, совершенно забывают, сложно представить полную завершенность оптимизации веб-ресурса. Надеемся, что написанный материал, коснувшийся объяснения определения «favicon», самых различных способов его создания и двух вариантов установки поможет вам выделиться на фоне конкурентов, а при необходимости проверить наличие данного изображения и произвести его корректировку с целью наибольшего вовлечения интернет-пользователя с поисковых систем или рекламы.

вебмастер
продвижение сайта
favicon

Заключение

У человека, прочитавшего всё вышеизложенное, может сложиться впечатление, что всё это очень сложно и нудно. Отчасти это так. Но к счастью, есть сервисы, которые делают всю эту работу за нас. Например, http://realfavicongenerator.net. На этом ресурсе можно сгенерировать все нужные иконки и получить код для вставки на сайт.

Вот и всё. Удачи в сайтостроении!

Об авторе:

Меня зовут Андрей Золкин. Из более, чем пятнадцати лет работы в сфере информационных технологий, десять лет работаю с системами, базирующимися на открытом исходном коде. На страницах сайта Aitishnik.Ru веду блоги по CMC Joomla и Debian GNU/Linux.

Оцените статью
Рейтинг автора
5
Материал подготовил
Андрей Измаилов
Наш эксперт
Написано статей
116
Добавить комментарий