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

Зачем нужен favicon для сайта

Происхождение слова фавикон идет от английского Favorites Icon. Это слово переводится как небольшая картинка для избранного. Словом избранное называются закладки Internet Exprorer.

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

Favicon для сайта — это небольшая картинка размером 16х16 пикс., которая имеет расширение .ico (данное расширение операционки используют, что бы хранить иконки). Favicon имеется почти у всех ресурсов, в независимости от хостинга или движка. Благодаря генераторам и галереям фавикон можно создать данную картинку в течение нескольких минут, используя для этого любое изображение. Можно создать ее с нуля, можно скачивать уже созданную и если на вашем ресурсе пока нет фавикона, советую его создать или скачать.

Основные характеристики favicon

Прежде чем создать favicon, например в формате ico для сайта или png, необходимо обратить внимание на основные характеристики, которым должен соответствовать готовый значок. Этот логотип – визитная карточка сайта, ведь именно он первым попадается на глаза и постоянно там остается

Лучше всего выполнять его в том же стиле, что и сам ресурс. Цветовая гамма, элементы дизайна и другие детали должны гармонично сочетаться и дополнять друг друга. Чем больше общего – тем лучше

Важно помнить, что основная функция иконки – ассоциация с сайтом

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

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

Чтобы понять это, достаточно обратить внимание на обозначения известных и популярных ресурсов, социальных сетей и других порталов

Еще один вариант – использование в пиктограмме тематики сайта

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

Favicon для Android

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

• 36×36 – для экранов с коэффициентом плотности 0.75
• 48×48 – для экранов с коэффициентом плотности 1
• 72×72 – для экранов с коэффициентом плотности 1.5
• 96×96 – для экранов с коэффициентом плотности 2
• 144×144 – для экранов с коэффициентом плотности 3
• 192×192 – для экранов с коэффициентом плотности 4

Андроид воспринимает иконки в формате .png, а так же опирается на файл manifest.json который может содержать в себе ряд различных косметических параметров. В случае отсутствия возможных вариантов иконки под андроид, система опирается на иконки apple-touch-icon.

Код для таск-менеджеров 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

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

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

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

Но как же скопировать файл на сайт? Для этого можно использовать FTP соединение в любом из файловых менеджеров (Total Commander или FileZilla). А также можно использовать файловый менеджер в панели управления Вашего хостинга. Пример использования файлового менеджера на хостинге, можно посмотреть здесь.

Я же использую для таких целей файловый менеджер Total Commander. Для начала нужно настроить FTP соединение:

Для настройки Вам потребуются данные, которые Вы получили в письме от Вашего хостинг-провайдера. А точнее, это имя сервера или порт для подключения и логин и пароль на FTP подключение.

После настройки соединения, подключаемся к сайту.

Теперь нужно открыть папку Вашего сайта, как правило, это /public_html/папка вашего сайта/ и скопировать в эту папку файл favicon.ico.

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

Загрузка иконок и файлов

В мае 2014 года запущена новая функция (о которой многие и давно просили) — загрузка изображений из файла.
Расскажу о специфике.

От браузера требуется поддержка двух достаточно современных технологий — HTML5 convas и file API.
То есть, вам понадобится Internet Explorer не ниже версии 10, или Firefox 28 и выше, или Google Crome 31 и выше.
Подойдёт последние версии Safari и других браузеров.

Формат картинки в файле любой, поддерживаемый вашим браузером. Все браузеры поддерживают
JPEG, PNG и GIF. Многие браузеры поддерживают и другие форматы.

Размер картинки может быть любым в пределах разумного. Картинка будет уменьшена до 16×16.

Цветность будет уменьшена до 16 цветов. Редактор пытается построить адаптивную палитру,
но алгоритм пока далёк от совершенства. Я бы рекомендовал сперва подготовить картинку в полноценном редакторе.

Прозрачность преобразуется к однобитной по границе 50%.

Буду рад любым отзывам и либо уберу эту функцию, если она никому не нужна, либо
доработаю, если обнаружатся какие-то ошибки. Спасибо.

Что такое favicon.ico

favicon — это небольшая картинка, являющаяся логотипом сайта.
Она появляется в шапках вкладок, в адресной строке
(кроме новейших версий Chrome и Firefox
†),
в закладках.

В одном файле favicon.ico может быть несколько изображений разного
размера. Чаще всего используется изображение 16×16. Бо́льшие размеры
используются, например, в Windows, при создании закладки прямо на
рабочем столе. В этом случае размер зависит от версии операционной
системы и настроек рабочего стола.

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

Как разместить favicon.ico на своём сайте

Проще всего просто положить иконку в корень сайта. Она должна
стать доступна по адресу . Именно
тут её будут искать браузеры.

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

Вы так же можете явно указать браузерам, что у вас есть favicon.

Для этого надо включить в секцию код такого вида:

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

Возможно вас так же заинтересует
конвертер PNG в ICO и
онлайн генератор обоев, фонов и заливок.

Отправить

Как создать favicon

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

Шаг 1. Поиск подходящей иконки

Для поиска я воспользуюсь уже упомянутым чуть выше сервисом IconFinder и найду иконку скажем для сайта занимающегося популяризацией электронной музыки.

Для этого в поле поиска, вводим поисковый запрос и нажимаем кнопку Search (Поиск). Учтите, запрос тоже необходимо делать на английском языке, но это я думаю не проблема, ведь есть переводчик от Гугла :-).

Мне понравилась гитара, отмеченная на скриншоте.

Теперь нужно выбрать нужный нам размер 16х16 пикселей, формат ICO и сохраняем иконку на свой компьютер.

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

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

Шаг 2. Создание favicon

Если Вы скачали иконку нужного Вам размера и формата (16х16, ICO), то Вам достаточно переименовать скачанный файл в файл вот такого вида: favicon.ico

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

Итак, переходим на главную страницу этого генератора favicon.ico Generator.

Этот сервис позволяет создать иконку с нуля, нарисовав её прямо в специально отведённом окошке. Пример моего творчества ниже:

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

Но нас интересует ещё она возможность данного генератора – это преобразование нашего, заранее подобранного изображения в иконку favicon. Для этого переходим на вкладку Import Image и загружаем нужное для преобразование изображение. В нашем случае, это гитара.

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

Теперь, когда у нас есть готовый favicon.ico, надо этот файл скопировать в корневую папку Вашего сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(для Internet Explorer).

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

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

1. Создайте картинку для фавикона с именем favicon.ico.
2. Готовый файл нужно сохранить в корневом каталоге сайта. 
3. Если вы захотите использовать разные фавиконы для разделов сайта, скопируйте путь к изображению  https://sitename.ru/favicon.ico. Если вы используете один favicon для всего сайта, путь к нему указывать не нужно.
4. Добавьте ссылку на размещенный файл в HTML-код главной:

Атрибут «rel» указывает на тип ресурса. Большинство браузеров распознают «icon», для Internet Explorer нужен «shortcut icon».

От формата файла зависит тип передаваемых данных. Для ICO это «image/x-icon» или «image/vnd.microsoft.icon», для PNG — «image/png» и аналогично для других форматов.

Для мобильных устройств часто прописывают отдельные фавиконы, указывая, к примеру, rel=»apple-touch-icon». 

Фавиконка не появится сразу после установки кода, нужно дождаться, пока поисковик ее проиндексирует.

Как установить разные favicon для отдельных страниц

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

Фавиконы на разных разделах одного сайта

Как установить разные фавиконки разделам сайта:

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

Faviconist

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

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

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

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

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

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

Для начала нам нужно конвертировать файл в 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. Однако для мелких сайтов, в принципе, нет нужды проделывать подобное.

Antifavicon

Стандартный размер favicon-ки (16×16) — это конечно же маловато для текста. Однако Antifavicon позволяет поместить две строчки текста в это маленькое пространство. Используемый шрифт конечно не ахти, но что поделаешь:).

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

Создание более сложных значков

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

Заданные рамки конечно же сковывают. Однако, посмотрев некоторые примеры, можно придумать что-то довольно-таки интересное.

Где скачать favicon.ico. Готовые коллекции фавиконов для сайта

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

Галереи иконок (favicon.ico) для сайта:

• www.iconj.com/gallery.php – большая коллекция картинок и онлайн-генератор;
• www.audit4web.ru/info/favicon/ – здесь более 15 000 штук;
• www.favicon.cc/?action=icon_list&order_by_rating=1 – генератор и галерея анимированных и статичных иконок;
• www.favicon.co.uk/gallery.php – favicon generator и каталог фавиконок для сайта;
• thefavicongallery.com – еще одна галерея картинок.

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

Небольшой обзор по этому сервису:

• Главная – вводим ключевое слово в поисковую строку и нажимаем “Поиск”. Сервис доступен на 39 языках, но русские слова не ищет. Поэтому вводите запросы на английском.
• Обзор – наборы иконок по стилям.
• Конвертировать – нажимаете Кнопку “Обзор” и указываете изображение на своем компьютере. Выбрав формат и битность цвета, жмете “Преобразовать”.
• Прислать – можно поделиться ссылкой на страницу с интересными иконками, найденными в интернете.
• Метки – поиск изображений по меткам.
• Удиви меня – показываются 60 случайных иконок.
• Vector – возможность выбора векторной графики и логотипов.

Далее выбираем вкладку “Другой размер” и скачиваем нужный фавикон на свой компьютер, нажав по значку ICO.

Надеюсь, разберетесь.

Еще один замечательный сервис с поиском по иконкам www.iconsearch.ru.

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

Чтобы скачать выбранный favicon, нажмите на значок формата PNG или ICO. Нажав на надпись “Подробнее”, можно увидеть эту иконку в других размерах и еще иконки из этого набора.

Размеры фавиконов для браузеров и устройств

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

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

Фавиконы сайтов на экране смартфона

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

Достаточный пакет фавиконок для популярных браузеров

Стандартно для фавикона делают файл favicon.ico — это контейнер для нескольких файлов. Будет достаточно favicon.ico с файлами в размерах 16×16, 32×32 и 48×48.

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

Дополнительно можно добавить файлы для мобильных устройств.

Android

Обычно используют файл .png размером 180×180, можно использовать прозрачность. Указать фавикон и его расположение для Android можно через спецификацию Web App Manifest. В ней описан простой JSON-файл, в котором веб-мастеры указывают иконки, размеры и форматы для сайта или приложения.

Манифест указывают с помощью:

Пример кода:

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

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML, к примеру:

Apple

Для iOS иногда используют размер 57×57, но рекомендуют лучше делать иконку PNG размером 180×180. В документации Safari такие называются
Web Clips, в них не должно быть прозрачности, углы автоматически округлятся при добавлении на главный экран. Это значок высокого расширения, он будет отображаться и в других браузерах. В rel нужно указать “apple-touch-icon.png”.

Пример кода:

Apple поддерживает и другой формат иконок. Для закрепленных вкладок в Safari и кнопок на Touch Bar в MacBook есть возможность указать монохромную векторную маску и цвет, который ее заполнит при наведении.

Настраивают с помощью link rel=»mask-icon».

Пример кода:

Edge и IE 12

Цвет файла и фона для иконки можно указать с помощью метаданных в HTML.

Пример кода:

У Microsoft есть
«Browser configuration schema reference» — XML-документ, в котором перечислены различные значки, соответствующие интерфейсу. Файлы конфигурации браузера позволяют задавать настройки с помощью внешних XML-файлов.

Пример кода:

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

Что такое Фавикон и зачем он нужен для сайта

По сути Favicon — это обычный значок (изображение небольшого размера 16 на 16 пикселей, иконка). Но для владельца сайта он может очень много значить. Однако, обо всем по порядку.

Само по себе название «фавикон» произошло от английского словосочетания FAVorites ICON, означающего — иконка для «Избранного» (так называются закладки в браузере Internet Explorer). Зачем она нужна? Очевидно, что так гораздо проще отыскивать взглядом нужную вам закладку, ибо легче искать знакомый значок, чем читать названия сайтов.

Раньше картинку Favicon вы могли видеть в адресной строке браузеров, перед URL-адресом открытой страницы (в моем IE9 так до сих пор и осталось), но после того, как все браузеры стали поддерживать вкладки, то данный значок мигрировал как раз на эти самые вкладки. Зато, когда их открыто очень много, именно фавиконы позволяют понять какая вкладка какому сайту соответствует:

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

А также, что немаловажно, поисковая система Яндекс отображает Favicon в своей выдаче (результатах поиска) для каждого ресурса, если у него этот значок будет иметься (был добавлен и правильно настроен владельцем сайта, а робот Яндекса успел уже его проиндексировать)

У Яндекса имеется специальный бот для индексации фавиконов под названием YandexFavicons (у них даже апдейты бывают, после которых и имеет смысл проверять наличие нового и обновленного Favicon.ico рядом с вашим сайтом в выдаче), в задачу которого входит сбор и обновление иконок для всех сайтов. Робот Яндекса, специализирующийся на их индексации, посещает сайты с периодичностью от нескольких дней до одного месяца (апы, соответственно, очень редкие получаются).

Поэтому не стоит ждать того, что недавно созданный в online generator или сделанный самостоятельно фавикон сразу же появится в поисковой выдаче Яндекса рядом с описанием вашего ресурса. Должно будет пройти какое-то время. Яндекс, после того как найдет Favicon.ico у вас на сервере, преобразует ее в формат PNG (из графического формата ICO) и с этого момента фавикон вашего сайта будет доступен по адресу:

http://favicon.yandex.net/favicon/ktonanovenkogo.ru

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

Если у вашего проекта Favicon еще не настроен, то самое время задуматься о его создании и установке, т.к. это позволит вам привлекать большее количество посетителей с страниц Яндекса (из поисковой выдачи), ибо рядом с адресом вашего проекта будет красоваться эта иконка, побуждая пользователей выбрать вас, а не соседа по выдаче).

В принципе, Favicon.ico нужного размера вы можете сделать и сами, так же у вас будет возможность создать его с помощью онлайн генераторов (из загруженных вами картинок) или же просто скачать целиком их online коллекцию или галерею.

В общем, выгода создания яркого и запоминающегося значка (мини-логотипа) для своего сайта очевидна (прежде всего это узнаваемость «бренда» и все хорошее, что из этого следует). Осталось только понять, как его создать и поставить на свой сайт, а также, что из себя должен представлять этот графический файл? На второй вопрос ответить проще — по определению Favicon должен быть сохранен в формате ICO, размещен в корне сайта (хотя, можно и другом месте), а его размер при этом должен составлять 16 на 16 .

В принципе, чтобы создать favicon, вовсе не обязательно использовать какие-либо специальные онлайн генераторы, хотя это довольно удобно и просто. Можно попытаться сделать его в Photoshop, но он по умолчанию, к сожалению, не умеет сохранять изображения в формате ICO. Поэтому для того, чтобы научить Фотошоп работать с ICO, нужно будет установить специальный плагин.

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

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

Заключение

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

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