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

Содержание:

Как подключить favicon
ЕЩЁ
Рекомендации
Установка иконки
Как добавить фавикон на сайт
Как создать фавикон всего за 2 минуты
Дизайн фавикона — когда проще не значит хуже
Как подключить Favicon к сайту?
Установка favicon на сайт WordPress
Как проверить фавикон и исправить основные ошибки
Limitations
Код для таск-менеджеров Grunt и Gulp
- В своих проектах мы используем Gulp
Use of Profiles to Define Terms Such as «icon»
Универсальный набор фавиконов
Что такое «фавикон» и зачем он нужен
Иконка рядом с текстом
Заключение

Как подключить favicon

Фавиконка подключается при помощи метатега c указанием соответствующих атрибутов.

После создания favicon сохраните его в корневом каталоге вашего сайта. Затем включите следующий код в секции документа HTML.

где:

Аттрибут означает, что это иконка для сайта; может содержать и «shortcut icon» (при этом Microsoft Internet Explorer будет реагировать на строку «shortcut icon», а браузеры, соответствующие стандартам — на слово «icon»)
содержит абсолютный или относительный URL к файлу, где он размещен.
Форматом файла может быть или , размером 16×16 или 32×32 и с 8-битной или 24-битной глубиной цвета.

В некоторых темах подключение происходит программно, с помощью php-кода:

ЕЩЁ

Что такое фавикон и как его создать

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

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

Как сделать favicon для своего сайта

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

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

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

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

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

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

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

Процесс установки иконки favicon на сайт, как правило, начинается с её создания. Из-за того что требования к разрешению и формату иконки favicon на различных устройствах разные лучше её сначала подготовить в векторном формате svg (масштабируемой векторной графике). Это действие позволит, используя одно изображение (svg), получить в отличном качестве значок favicon как с разрешением 16×16 пикселей, так и с 512×512.

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

Подготовка изображения для favicon

Рассмотрим основные действия по подготовке изображения в формате svg для favicon.

Изображение, которое будет использоваться в качестве иконки favicon сайта, можно нарисовать, или получить через поиск картинок сервиса Google или Yandex. Поиск изображения (значка) желательно осуществлять в формате svg. Но если найти подходящей иконки в формате svg не удаётся, то можно выбрать и другой формат (например, png или jpg). А потом в программе Inkscape с помощью специального инструмента перевести её в векторную графику (векторизовать растр).

Например, рассмотрим, как с помощью программы Inkscape можно подготовить изображение (иконку двери) в формате svg для фавикон.

Используя сервис «Google Картинки» находим подходящие изображение двери и сохраняем его на компьютер.
Открываем программу Inkscape и создаём в ней новый файл.
Устанавливаем странице любой размер в пикселях с одинаковыми значениями по ширине и высоте (например, 260×260).
Импортируем найденное изображение двери. Если картинка имеет растровый формат (png, jpg), то дополнительно выполняем её преобразование в вектор (правая кнопка мыши на изображении -> Векторизовать растр).
Размещаем изображение по центру области содержимого страницы (высоту изображения устанавливаем равной 260 пикселей с сохранением пропорций изображения). В горизонтальном направлении (если ширина изображения меньше 260 пикселей) выравниваем её по центру.
Сохраняем файл (например, под именем ).

Примеры, подготовленных изображений (красная стрелка, лампочка, бабочка, часы, сердце и книга) для фавикон (для скачивания — в контекстном меню картинки выбрать пункт «Сохранить картинку как…»):

Генерация иконки favicon для всех платформ

Генерацию иконки фавикон для всех платформ (iOS, Android, PC, MAC и др.) осуществим онлайн на сайте http://realfavicongenerator.net/.

Для этого необходимо нажать на кнопку «Select your Favicon picture» и выбрать в диалоговом окне подготовленное изображение (door.svg).

После этого необходимо настроить цвета фона и ввести название приложения для операционной системы Android (Chrome).

После этого выбираем опцию «I will place …», которая говорит о том, что полученные файлы фавикон необходимо положить в корень сайта. Это действие обеспечит её поддержку в большинстве браузеров.

Далее нажимаем на кнопку «Generate your Favicons and HTML code».

После этого действия сервис realfavicongenerator.net осуществит генерацию иконки favicon и HTML-кода. Результат данной операции будет выведен на экран.

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

После выполнения подготовительных операций приступим к подключению favicon на сайт. Все основные действия по добавлению иконки на веб-сайт приведены на странице «Install your favicon».

Основные шаги:

Скачивание сгенерированного пакета (favicons.zip).
Распаковка его в корень сайта

Вставка HTML-кода представленного на странице в секцию head ваших страниц:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">

Например, на CMF MODX подключение favicon (HTML-кода) к страницам обычно осуществляется в чанке, с помощью которого выполняется формирование раздела head документа.

Как создать фавикон всего за 2 минуты

Иконка для вашего сайта может быть в формате png или ico, размером 16 х 16 пикселей.

Вы можете воспользоваться конвертером и создать фавикон из любой картинки. Например, тут https://www.icoconverter.com/. Выберите файл.

Вот, например, я уже подготовил рисунок. Лучше всего выбирать формат png, тогда края будут прозрачными.

Выбираем 16 пикселей. Некоторые предпочитают изображения в 8 бит (показатель Bit depth). Тогда картинка будет грузиться быстрее. Мне кажется, что это уже не особо актуально. Используйте красивые и качественные вещи. Это будет гораздо полезнее.

Итак, казалось бы, все. Однако, у меня вылезает ошибка. Дело в том, что размер изображения превышает допустимые нормы. Картинка должна быть не более 3 мб.

Можно сжать и обрезать ее в Photoshop или Paint, но я покажу вам другой вариант. Если вы скачали изображение в гугле, то найдите его вновь, а затем запустите «Поиск по картинке».

Теперь выберите «Маленькие».

Скачайте то же самое фото, но меньшего размера.

Конвертируем снова.

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

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

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

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

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

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

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

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

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

Как подключить Favicon к сайту?

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

АТРИБУТ	ЗНАЧЕНИЕ
rel	icon указывает на тип используемого ресурса.
href	Здесь указывается путь до файла. Можно ввести ссылку до сервера или внешнего каталога.
type	Тут указывается тип изображения. Например, image/png для картинок в формате .png, image/svg для .svg. или image/x-icon для .ico

Можно вписать несколько разных значков. Браузер все равно сам выберет подходящую иконку. Такой подход предлагается в Favicon.io.

Например, я скачал себе .ico с сайта. Затем делаю следующее:

Кидаю картинку в корневой каталог ресурса (туда же, где лежит index.html).
Потом открываю index.html и прописываю в head строчку <link rel=”icon” href=”/favicon.ico” type=”image/x-icon”>.

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

Теперь вы знаете, как сделать иконку сайта на вкладке HTML. Рисуем картинку в .ico или .svg, кидаем ее в любое удобное место, а затем прописываем адрес с форматом в head.

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

Работая с WordPress, я не перестаю удивляться, до чего же это замечательный движок! Всё просто до безобразия!
Помимо вышеописанного способа, иконку сайта здесь можно установить через административную панель. Для этого необходимо перейти к настройкам активной темы (Внешний вид → Настроить) и открыть пункт Название сайта, слоган, логотип:

У других тем возможны другие варианты названий.

Загрузить подготовленное заранее изображение иконки, руководствуясь подсказками системы. Главное требование к изображению — оно должно быть квадратным с размерами не менее 512 пикселов.

Я попробовал загружать картинки меньшего размера, представляете, все равно всё получается!

На этом тема исчерпана.
Всего Вам доброго! Пока. Ваш Л.М.

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

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

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

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

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

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

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

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

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

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

Limitations

There are several limitations to the approaches described above,
including the preferred method (which is why the TAG continues to work
on the question):

The approaches only work in HTML or XHTML
The preferred approach associates a favicon with an HTML document,
not a collection of documents (i.e., a site)
The proposed profile for defining the «icon» value is not a
recognized standard, which means there may be interoperability issues
in practice.
There is no standard (at least defined by HTML 4.01)
for machine-readable profiles that would
allow a browser to know «this means an image is a favicon.» Thus, a
browser has to be programmed in advance to recognize this particular
value of . For more information on the use of profiles
in HTML and XHTML, see GRDDL
[].

Код для таск-менеджеров Grunt и Gulp

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

В своих проектах мы используем Gulp

1. Установите плагин

npm install gulp-real-favicon --save-dev

2. Вставьте код в свой

var realFavicon = require ('gulp-real-favicon');
var fs = require('fs');

// File where the favicon markups are stored
var FAVICON_DATA_FILE = 'faviconData.json';

// Generate the icons. This task takes a few seconds to complete. 
// You should run it at least once to create the icons. Then, 
// you should run it whenever RealFaviconGenerator updates its 
// package (see the check-for-favicon-update task below).
gulp.task('generate-favicon', function(done) {
	realFavicon.generateFavicon({
		masterPicture: 'TODO: Path to your master picture',
		dest: 'TODO: Path to the directory where to store the icons',
		iconsPath: '/',
		design: {
			ios: {
				pictureAspect: 'backgroundAndMargin',
				backgroundColor: '#ffffff',
				margin: '21%'
			},
			desktopBrowser: {},
			windows: {
				pictureAspect: 'whiteSilhouette',
				backgroundColor: '#da532c',
				onConflict: 'override'
			},
			androidChrome: {
				pictureAspect: 'shadow',
				themeColor: '#ffffff',
				manifest: {
					name: 'PUGOFKA',
					display: 'browser',
					orientation: 'notSet',
					onConflict: 'override'
				}
			},
			safariPinnedTab: {
				pictureAspect: 'silhouette',
				themeColor: '#5bbad5'
			}
		},
		settings: {
			compression: 5,
			scalingAlgorithm: 'Mitchell',
			errorOnImageTooSmall: false
		},
		markupFile: FAVICON_DATA_FILE
	}, function() {
		done();
	});
});

// Inject the favicon markups in your HTML pages. You should run 
// this task whenever you modify a page. You can keep this task 
// as is or refactor your existing HTML pipeline.
gulp.task('inject-favicon-markups', function() {
	gulp.src()
		.pipe(realFavicon.injectFaviconMarkups(JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).favicon.html_code))
		.pipe(gulp.dest('TODO: Path to the directory where to store the HTML files'));
});

// Check for updates on RealFaviconGenerator (think: Apple has just
// released a new Touch icon along with the latest version of iOS).
// Run this task from time to time. Ideally, make it part of your 
// continuous integration system.
gulp.task('check-for-favicon-update', function(done) {
	var currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version;
	realFavicon.checkForUpdates(currentVersion, function(err) {
		if (err) {
			throw err;
		}
	});
});

3. Замените на путь до вашего исходника из которой будут генерироваться иконки. Например,

4. Замените на путь до директории где будут лежать ваши сгенерированые иконки. Например,

5. Замените на путь до файлов в которые будет вставлен код внедрения favicon. Например,

6. Замените на путь до директории, где хранятся ваши HTML файлы.

7. Сгенерируйте иконки командой

gulp generate-favicon

8. Интегрируйте иконки в ваш шаблон

gulp inject-favicon-markups

Use of Profiles to Define Terms Such as «icon»

Loosely speaking, a profile is a definition of set of
terms. Ideally, a profile includes both machine-readable information
and human-readable information. In HTML 4.01 and XHTML 1.0, a few
attributes such as the attribute do not have a predefined set of
values. Instead, the author can provide values according to need, and
then use a profile to explain what the values mean. In our case, we
have recommend that authors use the value «icon» and a profile that
explains that «when we say icon, we mean ‘this is a favicon.'»

In Method 1 above, we use the attribute with the

element and choose a profile with the attribute
on the HEAD element.

We defined a profile which you can freely use for your own sites.

Универсальный набор фавиконов

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

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

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

I. Файл favicon.ico для устаревших браузеров

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

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

II. Одна SVG-иконка с поддержкой тёмной и светлой темы для современных браузеров

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

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

SVG-файлы содержат XML-данные, в состав которых может входить тег , содержащий CSS-код. Тут, как и в любом CSS-коде, могут использоваться медиазапросы, наподобие . Это позволяет организовать подстройку внешнего вида значка под системную тему — тёмную или светлую.

III. PNG-файл размером 180×180 для устройств Apple

Если добавить веб-страницу на домашний экран iPhone или iPad — в качестве значка для её открытия будет использовано изображение, указанное в разделе страницы , в теге, который может выглядеть как .

Устройства iPad, начиная с iOS 8+, требуют использования изображений размером 180×180 пикселей. Другие устройства могут уменьшить изображение. Если подготовить исходное изображение достаточно высокого качества, то его уменьшение не повредит конечным пользователям (мы ещё об этом поговорим).

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

Что такое «фавикон» и зачем он нужен

Немного истории. Само слово «favicon» исходит из сочетания двух английских слов: «favorite» и «icon». В дословном переводе – «избранная картинка». Сейчас более известен, как «значок интернет-сайта». Изначально подразумевал свое отображение только на различных страницах-вкладках или в закладках интернет-браузера, имел стандартный размер 16х16 пикселей и расширение «.ico». Впервые «фавикон» заявил о себе в марте 1999 года, когда набирающая стремительно обороты компания «Microsoft» выпустила на мировой рынок новый и современный по тем меркам браузер «Internet Explorer 5.0». Именно с этих пор данное мини-изображение стало применяться априори и приобрело значение того элемента, без которого можно считать SEO-оптимизацию не завершенной.

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

Для большей наглядности и понятия представим скриншот.

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

Иконка рядом с текстом

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

Сперва ничего особенного — обычная ссылка:

Вся магия в CSS:

Сначала задали путь до изображения.
Потом установили начальное положение фона (background-position) в left center — ведь наша иконка левее текста (горизонтальная позиция left) и на одном с ним уровне (вертикальная позиция center).
Размер фонового изображения (background-size) мы задали, чтобы предотвратить отдалённые проблемы.
Дело в том, что иконка может оказаться больше блока, в котором её захотят показать. Тогда она некрасиво обрежется по бокам. Чтобы этого не произошло — указываем размеры, в которые иконка должна вписаться.

И наконец, устанавливаем режим повторения фона (background-repeat) в no-repeat. Без этого фоновая картинка будет дублироваться, пока не заполнит собой блок (как это выглядит — зависит от размеров картинки и html-элемента, где она задана фоном).

Что же мы получили:

Не совсем то, чего ожидали. Давайте разбираться.

Наш «конвертик» стал фоновым изображением для блока, который занимает ссылка. Текст ссылки — это содержимое того же блока. Оно и наложилось на наше фоновое изображение.

Значит, нужно отодвинуть это самое содержимое от левой границы блока (помните, мы прижали «конвертик» именно к левому краю). Причём отодвинуть более чем на 20px (ширина фоновой картинки, заданная background-size) — тогда увидеть наш фон уже ничто не помешает.

Делается это с помощью свойства padding (внутренний отступ).

Добавим в код такой отступ слева:

Вот теперь всё вышло как надо:

Заключение

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

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

Об авторе:

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