Как создать фавиконку и подключить ее к сайту
Содержание:
- Иконки
- Масштаб иконок Font Awesome и их цвет¶
- Google Icons
- Для чего нужны иконки ICO?
- Font Awesome 5 Icons
- МЕНЮ
- Как сделать фавикон для сайта
- Создать наложение иконки на изображение
- Как создать фавикон всего за 2 минуты
- Фавикон и Фотошоп
- Добавление фонового изображения
- Как самостоятельно изготовить файл favicon.ico?
- Как добавить favicon для портативных устройств
- Установка иконки
- Характеристики значков
- Установка кнопок без плагинов
- Управление повтором фонового изображения
- Что такое иконка сайта?
- Как использовать иконки Font Awesome¶
- Создание фавикона с помощью онлайн-сервисов
- Фавикон под микроскопом
- Заключение
Иконки
Captain Icon
Здесь можно найти более 350 векторных иконок. Их можно легко масштабировать без потери качества. Форматы разные: eps, psd, png, svg, а также веб-шрифты и Sketch.
Иконки распространяются под лицензией CC BY-SA, то есть материалы можно использовать в личных и коммерческих проектах.
Ego
Иконки представлены в синих и серых оттенках.
Endless Icons
Здесь есть множество бесплатных черно-белых иконок. Помимо общего каталога, иконки можно выбрать по тематическим группам: fashion, food, shopping, social media и так далее. Есть еще разбивка по тегам.
Все иконки можно использовать как в личных, так и в коммерческих проектах.
Flaticon
Один из самых крупных сайтов с бесплатными иконками: здесь представлено больше миллиона векторных иконок. Бесплатно использовать их можно при условии, если вы укажете авторство. Если желания указывать нет, то вам нужно купить платную подписку. Она стоит 9,99 евро в месяц либо 89,99 евро за год (т.е. 7,50 евро в месяц).
Flaticon дает возможность редактировать свои иконки — перед загрузкой вы можете поменять их цвет. Это очень удобно, можно сделать иконки в цветовой палитре своего сайта.
Icofinder
Еще один сайт с большим количеством самых разных иконок. Здесь их почти три миллиона. Часть из них платные, часть можно скачать и использовать бесплатно. Иконки различаются по цвету и гамме, поэтому здесь можно найти подходящие элементы практически для любого сайта.
Масштаб иконок Font Awesome и их цвет¶
Иконки наследуют размер шрифта их родительского контейнера, чтобы соответствовать любому тексту, который может быть использован вместе с ними. Можно увеличить или уменьшить масштаб иконок относительно унаследованного размера шрифта с помощью таких классов, как fa-xs, span class=»attribute»>fa-sm, fa-lg, fa-2x и др.
Что касается цвета, он может быть установлен с помощью CSS свойства color. Просто необходимо установить иконки внутри элемента <div> и задать для него цвет в стиле, или просто установить стиль для элемента <i>.
Смотрите детали:
| Класс | Величина |
|---|---|
| fa-xs | .75em |
| fa-sm | .875em |
| fa-lg | 1.33em |
| fa-2x | 2em |
| fa-3x | 3em |
| fa-4x | 4em |
| fa-5x | 5em |
| fa-6x | 6em |
| fa-7x | 7em |
| fa-8x | 8em |
| fa-9x | 9em |
| fa-10x | 10em |
Также возможно добавить стиль непосредственно к размеру иконки, устанавливая font-size во внешнем стиле иконки или в стилевом атрибуте HTML элемента, который ссылается на иконку.
Google Icons
To use the Google icons, add the following line inside the section of your HTML page:
Note: No downloading or installation is required!
Example
<!DOCTYPE html><html><head>
<link rel=»stylesheet» href=»https://fonts.googleapis.com/icon?family=Material+Icons»></head><body><i class=»material-icons»>cloud</i><i class=»material-icons»>favorite</i><i class=»material-icons»>attachment</i><i class=»material-icons»>computer</i><i class=»material-icons»>traffic</i></body></html>
For a complete list of ALL icons (font awesome, bootstrap and google), visit the
Icon Reference.
❮ Previous
Next ❯
Для чего нужны иконки ICO?
А может, можно и вовсе обойтись без иконок? Ведь необходимые действия и категории
всегда можно просто подписать. Можно, конечно, но есть несколько веских причин,
которые говорят в пользу того, что создать иконку ICO не просто нужно, а действительно
необходимо
-
Простота распознавания. Создать иконки для сайта ICO 16х16 или
48х48 – настоящая необходимость, если вы действительно заботитесь о своих пользователях.
Давайте на секунду представим, что стандартные пункты меню, оснащенные надписями
и иконками, стали плохо видны (для людей с плохим зрением это представить несложно).
И, о ужас, мы больше не можем прочитать ни одной надписи! Тем не менее, практически
все иконки ICO остались узнаваемыми – теперь, даже не читая надпись, мы можем с
легкостью делать в программе нужные действия благодаря привычным значкам. -
Узнаваемость. Решив создать иконку ICO, вы заметите, что каждый
такой значок в отличие от надписи обладает своими собственными характеристиками
– формой и цветом. Таким образом, чтобы отличить одну надпись от другой, вам нужно
ее прочитать. В случае с иконками ICO ничего читать не надо – достаточно секундного
взгляда. -
Запоминаемость. Экспериментально доказано, что картинки запоминаются
лучше, чем надписи. Таким образом, со временем иконка вызывает даже определенные
ассоциации в голове у пользователя. А ведь именно это вам и надо! Решив воспользоваться
программой для создания иконки для сайта в формате ICO, в конечном итоге вы сможете
создать значок, который настолько запомнится вашему пользователю, что в дальнейшем
будет ассоциироваться у него только с вашим сайтом. -
Привлечение пользователей. Иконки ICO 16х16 – отличный способ привлекать
на сайт пользователей чуть чаще. Не так давно веб-мастера придумали такую «фишку»
— размещать иконку ICO в адресной строке рядом с именем сайта. Такой значок получил
название favicon.ico и позволил выделить определенный сайт из множества конкурентов.
Но подробнее об этом – в следующем пункте.
Font Awesome 5 Icons
To use the Free Font Awesome 5 icons, go to
fontawesome.com and sign in to get a code to use in your web pages.
Read more about how to get started with Font Awesome in our
Font Awesome 5 chapter.
Note: No downloading or installation is required!
Example
<!DOCTYPE html><html><head>
<script src=»https://kit.fontawesome.com/yourcode.js» crossorigin=»anonymous»></script>
<!—Get your code at fontawesome.com—></head><body><i class=»fas fa-band-aid»></i><i
class=»fas fa-cat»></i><i class=»fas fa-dragon»></i><i class=»far fa-clock»></i>
<i class=»fas fa-clock»></i>
</body></html>
МЕНЮ
Панель иконокЗначок менюАккордеонВкладкиВертикальные вкладкиЗаголовки вкладокВкладки полностраничныеВкладки при наведенииВерхняя навигацияОтзывчивый верхний навигаторНавигация с иконкамиМеню поискаСтрока поискаФиксированная боковая панельАнимированные боковые панелиОтзывчивая боковая панельПолноэкранная навигация наложенияМеню Off-CanvasБоковые кнопки навигацииБоковая панель с иконкамиМеню с горизонтальной прокруткойВертикальное менюНижняя навигацияОтзывчивая нижняя навигацияГраницы навигацииМеню по правому краюСсылка меню по центруМеню равной шириныФиксированное менюСкольжение вниз по полосе прокруткиСкрыть меню при прокруткеУменьшить меню при прокруткеЛипкая навигацияНавигация на изображенияВыпадающее менюВыпадающий при кликеВыпадающее меню в навигацииВыпадающий список в боковой навигацииОтзывчивая навигация с выпадающимПодменю навигацияВсплывающее менюМега менюМобильное менюМеню занавесСвернуть боковой барСвернуть боковую панельПагинацияХлебные крошкиГруппа кнопокГруппа вертикальных кнопокЛипкий социальный барНавигация таблеткиОтзывчивый заголовок
Как сделать фавикон для сайта
Есть как минимум 3 способа, разберем каждый.
Генераторы фавикон
Это самый быстрый и оптимальный способ, тем более генераторов сейчас предостаточно. Разберем самый крутой на мой взгляд: realfavicongenerator.net. Переходим на сайт, правом верхнем углу нажимаем на кнопку «Select your Favicon image» и выбираем png или jpg изображение.
Далее откроется страница с настройками — настраиваете цвета под свой вкус (все изменения сразу визуально отображаются) и нажимаем кнопку «Generate your Favicons and HTML code»
Далее realfavicongenerator сгенирирует все нужные иконки и код для их установки на сайт.
Скачиваем архив с иконками на ПК, нажав на кнопку «Favicon package», далее распаковываем архив и заливаем из него все файлы либо в корень (если не чего не меняли), либо в папку которую указали выше.
И копируем сгенерированный код на сайт в секцию head.
Альтернативные сервисы для создание фавикон онлайн из готового изображения
Довольно достойный конкурент, выше указанного сервиса favicon-generator.org — тоже сгенерит много иконок и код для них. И pr-cy.ru/favicon/ — это по факту просто конвертер ico. Здесь вам нужно загрузить картинку с компьютера, нажать «Создать favicon» и скачать его. Минус от выше указанного генерит только favicon.ico.
Сервисы для самостоятельного создания и выбора готовых Favicon иконок.
Одним из таких сервисов является favicon.cc. В нем Вы можете нарисовать Favicon иконку или если у вас нет не времени, ни желания на создание иконки самому(ой), тогда нажмите на вкладку «Top Rated Favicons», после чего справа появиться множество страниц с различными фавиконами, где Вы сможете поискать себе подходящую иконку, а также Вы для того чтобы ускорить поиск картинки, Вы можете воспользоваться формой для поиска и подобрать иконку по ключевому слову. А после того, как выберите подходящую Favicon, нажимаете на её название
, а на открывшейся страничке, нажмите на кнопку «Download favicon» для её загрузки:
Если вы параноик, то можете самостоятельно нарезать (сохранить) изображения различных размеров при помощи Фотошопа, а чтобы сохранить иконку в формате iso, можно поставить специальное дополнение icon.
Создать наложение иконки на изображение
Шаг 1) Добавить HTML:
Пример
<!— Добавить библиотеку иконок —><link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css»><div class=»container»> <img src=»img_avatar.png» alt=»Аватар» class=»image»> <div class=»overlay»> <a href=»#» class=»icon» title=»Профиль пользователя»> <i class=»fa fa-user»></i> </a> </div></div>
Шаг 2) Добавить CSS:
Пример
/* Контейнер, необходимый для размещения наложения. Отрегулируйте ширину по мере необходимости */.container { position: relative; width: 100%; max-width: 400px;}/* Сделайте изображение отзывчивым */.image { width: 100%; height: auto;}/* Эффект наложения (полная высота и ширина) — накладывается поверх контейнера и поверх изображения */.overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .3s ease; background-color: red;}/* Когда вы наводите курсор мыши на контейнер, исчезает значок наложения */.container:hover .overlay { opacity: 1;}/* Значок внутри наложения расположен посередине вертикально и горизонтально */.icon { color: white; font-size: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center;}/* При наведении курсора мыши на значок, измените цвет */.fa-user:hover { color: #eee;}
Совет: Также смотреть другие эффекты наложения изображений (затухание, слайд и т. д.) в нашем учебнике Как сделать — Эффект наведения на изображение.
Зайдите на наш учебник CSS Изображения чтобы узнать больше о том, как стилизовать изображения.
Как создать фавикон всего за 2 минуты
Иконка для вашего сайта может быть в формате png или ico, размером 16 х 16 пикселей.
Вы можете воспользоваться конвертером и создать фавикон из любой картинки. Например, тут https://www.icoconverter.com/. Выберите файл.
Вот, например, я уже подготовил рисунок. Лучше всего выбирать формат png, тогда края будут прозрачными.
Выбираем 16 пикселей. Некоторые предпочитают изображения в 8 бит (показатель Bit depth). Тогда картинка будет грузиться быстрее. Мне кажется, что это уже не особо актуально. Используйте красивые и качественные вещи. Это будет гораздо полезнее.
Итак, казалось бы, все. Однако, у меня вылезает ошибка. Дело в том, что размер изображения превышает допустимые нормы. Картинка должна быть не более 3 мб.
Можно сжать и обрезать ее в Photoshop или Paint, но я покажу вам другой вариант. Если вы скачали изображение в гугле, то найдите его вновь, а затем запустите «Поиск по картинке».
Теперь выберите «Маленькие».
Скачайте то же самое фото, но меньшего размера.
Конвертируем снова.
Готово. Фавикон уже в ваших загрузках, можно добавлять на сайт.
Фавикон и Фотошоп
Можно создать искомый файл, используя только Фотошоп. Подобрав или предварительно отрисовав нужное изображение, следует нажать «Сохранить как» и из списка форматов для сохранения выбрать .ico.
Может получиться, что версия программы обработки изображений не будет поддерживать этого формата. В таком случае следует поискать и скачать плагин формата ico. Его нужно распаковать в папку Plug-InsFileFormats. После этих нехитрых действий возможность сохранения в данном расширении будет доступна.
Небольшой совет. Практически все браузеры стандартизируют иконки сайтов до размера 16 на 16 пикселей. Учитывая это, не нужно создавать высокохудожественные полотна — их просто-напросто не будет видно.
Формат ico используется наиболее часто, так как он поддерживается всеми популярным браузерами
Можно сохранять изображения и в других графических форматах, но важно помнить, что некоторые браузеры не будут отображать такую иконку
Добавление фонового изображения
Следующие правила добавляют цвет фона и фоновое изображение к элементу <body>. Затем мы задаем для элемента <div> (с классом wrapper) белый цвет фона:
body {
background-color: #333;
background-image: url('image.png');
}
.wrapper {
width: 80%;
margin: 20px auto 40px auto;
background-color: #fff;
color: #333;
}
Попробовать »
Свойство background-color просто добавляет цвет фона на страницу или к определенному элементу. Мы использовали в примере background-color, чтобы установить фоновый цвет для элемента <body> и внутри элемента <div>. Если бы цвет фона для элемента <div> не был бы установлен, то в качестве фона был бы показан фон, который установлен для <body>, так как по умолчанию все элементы имеют прозрачный фон.
Свойство background-image позволяет указать картинку, которая будет отображаться в качестве фонового изображения для всей страницы или для отдельного элемента. В примере мы использовали фоновое изображение в качестве фона для всей страницы.
Если возникает вопрос зачем устанавливать цвет фона, когда используется фоновое изображение, то на него можно легко ответить: если по каким-либо причинам фоновое изображение не может быть загружено на страницу, в этом случае будет отображаться цвет фона.
Как самостоятельно изготовить файл favicon.ico?
Способ первый:
Найти в Интернете готовую подходящую иконку в коллекциях иконок..
Способ второй:
Изготовить иконку с помощью какого либо онлайн сервиса. Наиболее популярным сервисом, создающим иконки для сайта, в русскоязычном Интернете, является ресурс www.favicon.ru
Всё просто заходите на данный ресурс, загружаете большое размером изображение (желательно квадратное) только весом не более 300кб.. ну например логотип сайта, жмете кнопку «Создать favicon.ico» на выходе скачиваете уменьшенную копию этого изображения 16х16 (а так же по желанию 32х32 и 48х48) пикселей в формате ico. Достаточно удобный ресурс позволяющий быстро создавать иконки приемлемого качества.
Ну и третий способ:
Лучше всего, конечно, нарисовать иконку самостоятельно, в которой каждый пиксель будет именно таким каким Вы желаете его видеть. Однако большинство популярных графических редакторов типа фотошопа не желают сохранять изображение в формате ico.. Но не беда!! В Интернете гуляет масса редакторов иконок хороших и не очень, платных и бесплатных, функционально простеньких и жутко навороченных.
Лично я пользуюсь не сильно хитрой программкой — редактором иконок, но пользуюсь ей не так, как задумывали авторы.. Я сначала рисую иконку в привычном мне фотошопе, сохраняю её в формате jpg, потом открываю это изображение с помощью этой нехитрой программки и сохраняю его же уже в формате ico. Короче использую программку в качестве «конвертора», а не графического редактора.. программка называется IcoFX впрочем, как уже сказано выше существует куча других программ, так что не стоит останавливаться именно на этой!! Это я к ней приловчился, а Вы, может быть, найдете, что ни будь более удобное для себя.
Как добавить favicon для портативных устройств
С развитием технологий иконки стали использоваться не только в десктопных браузерах, но и при выводе информации на iOS и Android-устройствах. Как правило, эти значки также используются в качестве ярлыков на рабочем столе. Каждое из них имеет свои требования к подходящему изображению.
Android
Выбор фавиконки для Android-устройства зависит от показателя PPI (pixels per inch – пикселей на дюйм); это важно учитывать, так как из-за этого одно и то же изображение может выглядеть по-разному на экранах с различным параметром PPI. Общая таблица с указанием коэффициента плотности и соответствующего ему размера фавиконки выглядит следующим образом:
Что касается формата, то изображения должны быть в формате png.
iOS
В отличие от Android, размер иконок для iOS-устройств зависит от наличия Retina и версии операционной системы. В таблице это выглядит так:
Для того, чтобы создать фавиконку для всех возможных форматов и устройств, вы можете воспользоваться специальным сервисом: https://realfavicongenerator.net/.
Этот онлайн-генератор позволяет отредактировать иконку для каждого устройства, при этом у него есть просмотр получившегося результата в интерфейсе девайса.
Сначала вам нужно выбрать изображение, которое составит основу вашей фавиконки. Оно необязательно должно быть квадратным, но такой формат предпочтителен. В противном случае вы сможете заполнить пустые края изображения каким-либо цветом (для iOS) либо оставить их прозрачными (для Android). Также RealFaviconGenerator создает иконки и для других платформ (Windows 8 и 10).
После того, как вы создали нужные вам изображения, вам нужно лишь скачать архив с получившимися изображениями, загрузить их в корневую папку своего сайта и добавить сгенерированный HTML-код в контейнер <head>.
После этого проверьте наличие всех необходимых иконок, введя адрес своего сайта в соответствующую строку на главной странице RealFaviconGenerator.
Теперь ваш сайт имеет все необходимые фавиконки, благодаря которым ваш ресурс будет выделяться на фоне остальных вне зависимости от того, с какого устройства на него зашел пользователь, и станет хорошо узнаваемым.
Установка иконки
Заветный фавикон получили. Следует подумать, как поставить иконку на сайт. Для этого нужно загрузить файл изображения в корневую директорию сайта (обычно она носит название 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> файла главной страницы.
Как установить иконку на сайт, мы разобрались. Проверить правильность установки можно, просто введя в строке браузера адрес своей страницы. Если слева от адреса отображается фавикон — все сделано верно.
Следует заметить, что в результатах выдачи поисковиков иконка отобразится не сразу, а лишь после обновления кэша. Этот процесс может занять от недели до месяца, а то и больше.
Характеристики значков
Взять любую понравившуюся картинку и с ходу использовать ее как Favicon не получится. Надо соблюсти два несложных требования: выбрать подходящее расширение и размер.
Формат
Тут есть из чего выбирать:
- .ico (.icns в macOS) — своего рода стандарт, используется повсеместно.
- .png — более современный вариант, тоже широко распространен и поддерживается даже во многих старых браузерах.
- .svg — перспективный векторный формат с вариативным разрешением под нужды конкретной страницы. Настраивается через CSS.
.svg не поддерживается в старых браузерах для ПК и некоторых Android-браузерах
У .png поддержка заметно шире
Можно использовать и другие форматы. Какой-нибудь .jpeg или .gif. Проблема может возникнуть лишь в поддержке со стороны программного обеспечения клиента.
Из-за особенностей браузеров в разных ОС я бы рекомендовал выбрать .ico. Самый каноничный формат, с которым точно не ошибешься.
Размер
Здесь тоже есть некие стандарты, но они разнятся от системы к системе. Часто используются размеры:
- 16 на 16 точек
- 32 на 32
- 192 на 192
- 512 на 512
При желании можно использовать несколько вариантов, чтобы адаптировать фавиконку под требования нескольких платформ.
Установка кнопок без плагинов
Распространенный вариант работы с этой CMS, поскольку позволяет разместить социальные кнопки на сайте WordPress без установки лишних плагинов, снижающих производительность сайта. К тому же, вебмастер может детально изучить код, модернизировать его и разместить в нужном месте.
Вертикальный блок
Это решение достаточно популярно, так как не мешает изучению контента на сайте и всегда на виду, ведь прокручивается со статей. Это делается для того, чтобы пользователь не забыл оценить материал, если он был интересен ему. В некоторых случаях наличие блоков в конце статьи не дает такого эффекта, поскольку посетители могут не опустится в самый низ и не заметить его. Необходимо сделать так, чтобы блок был всегда на виду, но не мешал работе со статьей и другими элементами ресурса.
Вот пример кода, рассмотренный для Facebook:
|
<!– SocialButtons –> <span style=”display:scroll;position:fixed;bottom:280px;left:50px;”> <a target=“blank” rel=“nofollow” <?php the_permalink(); ?>“> <img src=” http://site.ru/f.png” width=“50” height=“50” title=“Рассказать на Фейсбук” alt=“Опубликовать в Фейсбук”> </a> |
<!– SocialButtons –> – определяет место размещения блока. Не несет никакой функции, позволяет находить блоки в коде сайта. Тег содержит запись, которая является следующей функцией: блок прилипнет к текущей позиции посетителя и не будет исчезать во время скроллинга страницы. Свойства bottom и left устанавливают положение кнопок по нижнему левому краю. Для изменения их расположения, следует изменить значения.
Чтобы разместить несколько кнопок социальных сетей, необходимо изменить значение bottom, отнимать от него высоту иконки – 50px. Так как они могут налаживаться одна на вторую. Для каждой последующей значение следует изменять. Обязательно нужно скрывать тегом и атрибутом rel=“nofollow” ссылки кнопок от индексации. Для того, чтобы разместить другую социальную сеть или добавить еще несколько, следует изменить ссылку в href. Получаем образец, который после заполнения параметров установит кнопки на сайте.
|
<!– SocialButtons –> <span style=”display:scroll;position:fixed;bottom:{значение};left:{значение};”> <a target=“blank” rel=“nofollow” href=”{ссылка на соцсеть}<?php the_permalink(); ?>“> <img src=“{ссылка на картинку кнопки}” width=“{значение}” height=“{значение}” title=“{Поделиться, рассказать на …}” alt=“{Поделиться, рассказать на …}”> </a> |
Чтобы разместить социальные кнопки в WordPress в конце контента, следует зайти в single.php, который находится в директории с активной темой.
Добавляется следующий код:
Также, необходимо прописать стили, позволяющие оформить внешний вид кнопки их местоположение. Для это в конце файла style.css (расположен в директории темы) добавьте свои правила.
Pluso
Сервис, предоставляющий возможность сгенерировать код для установки кнопок социальных сетей в WordPress. Все услуги бесплатны: можно выбрать несколько десятков видов иконок, добавлять и удалять социальные сети из блока. После этого можно детально настроить вид блока, размер, наличие счетчика и некоторые параметры оформления. После ряда настроек, нужно скопировать сгенерированный код и разместить в нужном месте.
Входит в число лидирующих сервисов для генерации блоков социальных кнопок. Позволяет использовать 42 иконки различных соцресурсов, изменять их размер, расположение и выбрать движок, где они будут размещаться. После этого генерируется код, который необходимо скопировать в шаблон сайта. Имеется возможность вставить ссылки на свои аккаунты социальных сервисов.
Блок «Поделиться» от Yandex
Технология, разработанная Yandex’ом для создания блоков соцсетей – доступно более 20. Из параметров: возможность выбрать размер кнопок, детали отображения и наличие счетчика. После все необходимых настроек нужно скопировать код и добавить в шаблон темы.
Управление повтором фонового изображения
Как мы с вами установили из примера, фоновое изображение размещается по умолчанию в верхнем левом углу элемента и повторяется по вертикали и горизонтали. Давайте научимся изменять эти предопределенные значения и для начала рассмотрим, как управлять повтором изображения, а поможет нам в этом CSS свойство background-repeat.
Это свойство имеет следующие доступные значения:
| Значение | Описание |
|---|---|
| repeat | Фоновое изображение будет повторяться как по вертикали, так и по горизонтали. Это значение по умолчанию. |
| repeat-x | Фоновое изображение будет повторяться по горизонтали (по оси x). |
| repeat-y | Фоновое изображение будет повторяться по вертикали (по оси y). |
| no-repeat | Фоновое изображение не будет повторяться. |
Для следующего примера используем задний фон, который представляет из себя два разноцветных квадрата размером 10 на 10 пикселей.
<!DOCTYPE html>
<html>
<head>
<title>Пример управления повтором фонового изображения</title>
<style>
body {
background-image: url("main_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
}
div {
display: inline-block; /* устанавливаем, что элементы становятся блочно-строчными (чтобы выстроились в линейку) */
background-image: url("small_bg.png"); /* указываем путь к файлу изображения, которое будет использоваться как задний фон */
width: 200px; /* устанавливаем ширину элемента */
height: 200px; /* устанавливаем высоту элемента */
border: 1px solid; /* устанваливаем сплошную границу размером 1 пиксель */
margin-right: 10px; /* устанавливаем внешние отступы справа */
text-align: center; /* выравниваем текст по центру */
line-height: 200px; /* задаем высоту строки */
background-color: azure; /* указываем цвет заднего фона*/
}
.noRepeat {
background-repeat: no-repeat; /* фоновое изображение не будет повторяться. */
}
.repeatX {
background-repeat: repeat-x; /* фоновое изображение будет повторяться по горизонтали */
}
.repeatY {
background-repeat: repeat-y; /* фоновое изображение будет повторяться по вертикали */
}
</style>
</head>
<body>
<h1>Значение repeat для body (по умолчанию)</h1>
<div class = "noRepeat">no-repeat</div>
<div class = "repeatX">repeat-x</div>
<div class = "repeatY">repeat-y</div>
</body>
</html>
По аналогии с предыдущим примером для <body> мы установили задний фон, который дублируется как по горизонтали, так и по вертикали. Кроме того, мы создали для наших блоков три класса, которые определяют как будет повторяться фоновое изображение, используя различные значения для свойства background-repeat:
- Для первого блока мы указали, что изображение не будет повторяться (значение no-repeat), это значение чаще всего используется в работе.
- Второй блок получил значение repeat-x, которое определяет, что фоновое изображение будет дублироваться по горизонтали.
- Ну и в третьем блоке фон дублируется по вертикали (значение repeat-y).
Результат нашего примера:
Рис. 116 Пример управления повтором фонового изображения.
Что такое иконка сайта?
Для начала разберемся, что такое иконка сайта и где мы её можем наблюдать. Иконка сайта это небольшое изображение 16х16 пикселей в формате ico. которое можно увидеть в адресной строке, «закладках», «избранном» «истории», заголовках страниц в браузерах,
а также в результатах поиска поисковой системы Яндекс
Иконки сайтов так же можно увидеть в некоторых каталогах сайтов, сервисах аналитики и статистики сайтов, RSS лентах.. и прочих местах бескрайних просторов сети Интернет.
Основное предназначение пиктограммы это выделение Вашего сайта из массы других ресурсов
Красивая иконка делает сайт уникальным, оригинальным, привлекает внимание пользователей, а так же делает сайт более запоминающимся, так что отнеситесь к созданию иконки сайта подобающим образом, уж чего точно не стоит делать, так это пренебрегать созданием иконки вовсе, тем самым, позволяя браузерам лепить напротив Вашего сайта свою стандартную, скучную пиктограмму
Как использовать иконки Font Awesome¶
Иконки могут находится фактически где угодно, если используете стилевой префикс (fa) и название иконки. Font Awesome используется вместе со строчными элементами, и рекомендуется придерживаться к ним при проекте с согласованным HTML элементом.
Для добавления иконок на веб-страницы допустимо использование тегов <i> и <span>. Если вам не нравится, что сайт предоставляет вам код с тегом <i>, вы можете заменить его на <span>.
Для ссылки на иконку вам необходимо использовать имя иконки с префиксомpan fa- и предпочитаемый вами стиль с соответствующим префиксом (fas, fal, far или fab).
Используйте элемента <i> для ссылки на элемент:
Или используйте элемент span:
Префикс fa устарел в версии 5. Новые префиксы по умолчанию fas (сплошной стиль), fab (бренды), far (обычный стиль) и fal (тонкий стиль).
Создание фавикона с помощью онлайн-сервисов
Иконку, или фавикон (от английского favorites icon) легче всего создать, используя популярные бесплатные сервисы.
Но перед тем, как сделать иконку для сайта, следует подготовить выбранное заранее изображение. Это должна быть квадратная картинка. Нужно учесть, что сервис фавикон.ру стандартизирует все изображения, уменьшая их до размера 16х16 пикселей. Поэтому если картинка изначально будет не квадратной, программа может довольно сильно исказить ее. Размер загружаемого файла для сервиса не должен превышать 300 килобайт.
Сделать фавикон для сайта можно, используя любой графический редактор. Если уже есть готовая картинка (например, эмблема компании), ее стоит лишь подготовить и уменьшить. Если же нужно создать рисунок «с нуля» — сервис «фавикон» предлагает воспользоваться элементарной, но довольно удобной программой рисования иконок.
Итак, иконка загружена или нарисована. Для того, чтобы получить готовое изображение, достаточно нажать кнопку «Скачать favicon» в правом нижнем углу страницы. В результате загрузится файл favicon.ico.
Фавикон под микроскопом
Наличие этой иконки значительно упрощает поиск, так как, глядя на результаты выдачи, легко можно найти знакомый ресурс. Не менее полезным фавикон становится при добавлении сайта в закладки. Достаточно одного беглого взгляда, чтобы из десятков сайтов визуально отыскать необходимую закладку.
Со слов Яндекса, размер фавикона должен составлять 16х16, 32х32 или 120х120 пикселей. К слову, чаще всего применяется изображения размера 16х16 пикселей. Рекомендованный формат ICO. К допустимым форматам относятся: GIF, JPEG, PNG и BMP.
Favicon отображается в адресной строке браузеров, перед URL-адресом открытой страницы, что позволяет осуществить быстрый визуальный поиск нужного веб-проекта среди сотни других. Чтобы в этом убедится, посмотрите на верхнюю панель открытого окна своего браузера.
В Яндекс выдаче этот значок отображается для каждого сайта. Это при условии, что фавикон ранее был создан, добавлен в корневую папку сайта и уже проиндексирован роботом Яндекса.
В указанной поисковой системе есть специальный бот индексации фавиконов YandexFavicons, который собирает и обновляет иконки для всех ресурсов
Стоит обратить внимание, что индексация осуществляется периодически (несколько дней, месяц). Т
е. новоиспеченный фавикон может появиться в поисковой выдаче Yandex возле описания вашего проекта не сразу, а спустя некоторое время.
Когда поисковик найдет Favicon.ico на вашем сервере, он изменит его графический формат ICO в PNG, после чего ваш фавикон можно будет найти по следующему адресу:
https://favicon.yandex.net/favicon/stimylrosta.com.ua
При проверке не забудьте подставить поле последнего слеша URL-адрес своего блога.
Создание фавикона — важный этап в продвижении проекта. К преимуществам использования фавиконов можно отнести:
- узнаваемость бренда;
- доверие посетителей;
- повторные посещения;
- экономия времени пользователей.
Основная выгода с этого — узнаваемость бренда. С помощью «мини-логотипа» можно привлечь большее количество посетителей из поисковой выдачи (в частности со страниц Яндекса), поскольку возле адреса вашего веб-ресурса будет миловаться знакомая иконка. Она то и будет побуждать пользователей отдавать предпочтение вам, а не конкуренту (соседу по выдаче)
Однако чтобы эта иконка выполняла все возложенные на нее функции, она должна привлекать внимание, быть яркой и запоминающейся
Осталось разобраться, как создать и как создать и установить фавикон на сайт?
Заключение
Теперь вы знаете, зачем нужен фавикон и что это такое вообще. Надеюсь, что данная статья окажется полезной для вас и при помощи описанных инструментов вы сможете установить логотип на свой сайт. По сути, это дело нескольких десятков минут. Однако значение такой технической особенности очень велико для поисковой оптимизации и поведенческих факторов.
Многие вебмастеры, к сожалению, упускают этот момент. Вместе с ним из вида выпадают и другие, не менее важные нюансы. Если вы новичок и готовы учиться создавать крутые сайты и зарабатывать на них, то я приглашаю вас на курс Василия Блинова “Как создать блог”.
На этом курсе будут рассмотрены самые главные особенности грамотного создания информационных проектов, взаимодействия с командой и прочие полезные аспекты, которые обязательно понадобятся вам при развитии вашего бизнеса.
