О favicon и не только

Создание фавикона

Онлайн-сервисы

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

Например, Favicon.by. Он позволяет вам нарисовать логотип при помощи простых инструментов. Сервис создает иконку в формате ICO.

Как видите, здесь все интуитивно понятно. Выбираем карандаш, настраиваем цвет и рисуем. Если вашему логотипу нужна какая-то основа, то вы можете воспользоваться “Импортом из файла” и “Импортом с сайта”.

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

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

Все остальные генераторы работают по схожему сценарию. Точно так же выбираем цвет, рисуем при помощи простых инструментов, а после – скачиваем к себе на жесткий диск.

Adobe Photoshop

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

Итак, у нас есть два варианта:

1. Сделать фавикон из картинки (логотипа компании или других).
2. Просто выбрать шрифт и сделать его в виде буквы.

Второй вариант используется наиболее часто. Наверное, больше половины сайтов просто создают квадрат размером 16 на 16 или 32 на 32, выбирают шрифт (как правило, Roboto или Open Sans), цвет, соответствующий гамме проекта. И все – favicon готов.

Открываем Фотошоп, после чего сразу идем в “Меню” – “Создать”.

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

Размер должен быть 16 x 16 или 32 x 32 (в пикселях). Все остальное – по вашему усмотрению, но я бы советовал выставить так, как показано на скриншоте.

Нажимаем кнопку “Создать”, после чего у нас перед глазами появляется область с заданным размером. Сейчас мы будем творить.

Разберу самый популярный вариант. Как я уже и говорил, это фавикон в виде буквы. Обычно первой из названия проекта. Кликаем на “Т” в панели инструментов, после чего в любой участок внутри квадрата.

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

Цвет я регулировал при помощи специального инструмента в правом верхнем углу. Здесь вы можете выбрать абсолютно любой вариант при помощи мыши. В верхней панели также есть инструменты для выбора шрифта и размера. На картинке 32 x 32 оптимальным размером буквы будет 8 – 10 Пт.

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

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

Тут можно придать своей букве интересный вид. Например, настроить тени, сделать обводку или же градиентный цвет.

Кстати говоря, не пугайтесь, если при приближении ваша буква будет выглядеть как квадратное нечто. Если вы уменьшите масштаб до 100 % она примет свой естественный, четкий вид. Во вкладке картинка тоже будет выглядеть хорошо.

Далее нам нужно сохранить наше творение. Идем в “Файл” – “Сохранить как”. Выбираем нужный формат (PNG, GIF или JPEG) и название – favicon, нажимаем “Сохранить”.

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

Зачем нужен фавикон

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

Помогает в навигации

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

Фавиконы можно увидеть:

• • на вкладках и закладках в браузере,
    Фавиконы на вкладках и закладках браузера Mozilla
  • в истории браузера,
    Фавиконы в истории браузера
  • в результатах поиска «Яндекс»,
    Фавиконы в результатах «Яндекс.Поиска»
  • в мобильном поиске Chrome и «Яндекс»,
    Фавиконы в поиске Android Chrome
  • в часто посещаемых сайтах на главной странице некоторых браузеров.

Крупные фавиконы на стартовой странице Mozilla Firefox

Вызывает доверие

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

Сайты с фавиконками и без них во вкладках мобильного браузера

Увеличивает кликабельность

Нет информации о том, является ли наличие фавиконки фактором ранжирования. Но

если сайт проще найти в результатах поиска, а доверие к нему выше — это повышает кликабельность.

Добавить в файл header.php

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

1. С помощью файлового менеджера подключитесь к серверу хостинга и скопируйте в корневую директорию вашего сайта подготовленный файл с именем favicon.
2. В админке WordPress зайдите в меню «Внешний вид» (1) и выберите пункт «Редактор» (2).
3. В списке шаблонов откройте файл заголовка header.php (3).
4. После открывающего тегавставьте строку (4), в которой проверьте формат загруженного файла с иконкой (png или другой), при необходимости замените на свой вариант.
5. Нажмите кнопку «Обновить файл» (5), чтобы применить иконку к сайту.

Фавикон: что следует запомнить

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

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

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

Готовую фавиконку можно даже использовать в рассылках. Регистрируйтесь в SendPulse и создавайте красивые письма в удобном блочном редакторе!

Launcher Icon Generator

Проект Launcher Icon Generator бесплатный и, как мы думаем, больше подходит для продвинутых пользователей. Данный онлайн редактор иконок позволяет загружать изображения / клипарты и добавлять текст. Вы можете скачать по одной иконке за раз в 5 размерах (48 x 48; 72 x 72; 96 x 96; 144 x 144; 192 x 192).

В качестве базового клипарта используется набор графики в стиле Material Design из GitHub. Сервис содержит такие настройки как: отступы, форма, цвет или прозрачность фона, масштабирование + дополнительные эффекты. Результат:

Android Material Icon Generator — еще один инструмент создания флэт-иконок. Фишкой сервиса определенно является эффект в виде длинной тени. Если вам нужны подобные решения — этот редактор иконок будет идеальным вариантом.

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

После скачивания в файле-архиве найдете 6 PNG разного размера и векторный файл SVG. В Illustrator иконка SVG будет размытой, но, к счастью, она хорошо смотрится в браузере. В итоге получается что-то вроде:

Сайт Simunity – это генератор на базе HTML5, где можно создать иконку и затем скопировать код, чтобы отобразить ее в ваших веб-проектах. В качестве исходных материалов используются иконки из Font Awesome, для которых выбираются разные параметры: цвет, рамка, размер и стиль теней.

Данный сервис пригодится, если вам необходимо быстро создать простые оригинальные иконки для сайта. Результат применения Simunity:

Итого. Рассмотренные выше онлайн редакторы иконок – отличные инструменты для оптимизации работы дизайнеров. Нет смысла скачивать какие-то программы, когда все можно легко и быстро делать в сети. Из этой подборки, пожалуй, можно выделить IconsFlow. В нем собрано максимально большое число функций: галерея иконок, загрузка SVG, код для встраивания, предварительный просмотр, создание собственных шаблонов, экспорт PNG, ICO и SVG, адаптация размера, модные стили и встроенный векторный редактор

К тому же это единственный бесплатный редактор иконок на русском, если для вас это важно

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

Сделать иконку (значок) папки из своей фотографии можно в стандартной программе — Paint

, которая у каждого должна быть в операционной системе windows 7

Поверьте мне, со своими значками вам намного будет удобней и быстрей отыскать нужную папку, не вчитываясь в текст (название папки)

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

Найти программу «Paint

можно через «Пуск » и «Все программы » Запустите её и перетащите рисунок в окно программы. А ещё проще, это вызвать контекстное меню, щёлкнув по изображению, которое хотите поставить в роли значка, правой клавишей мышки. Выбираем пункт «Изменить » Откроется программа «Paint »

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

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

1. При помощи панели администрирования. Очень удобная функция, которая присутствует на большинстве известных систем. В подавляющем большинстве даже не требуется производить конвертацию в формат «.ico» – систем делает за вас все сама. Один из ярких примеров: «WordPress». Заходим в панель, выбираем «Внешний вид», далее «Настроить».

   Нажав на пункт «Свойства сайта», находим специальное поле редактирования слева и производим подгрузку необходимого изображения.

2. Если вышеперечисленный функционал не предусмотрен. Довольно часто такую ситуацию можно наблюдать на страницах типа «лендинг». Через ftp-доступ или, находясь на самом хостинге внутри области тега «head» прописываем следующий строку:

   В разделе «href» прописывается путь, который ведет к загруженной нами фавиконке, которую мы не забываем загрузить на сервер. Стандартное место, где ее размещают – папка «images». Название файла стандартное – «favicon.ico».

Скачивание готовых фавиконок для сайта

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

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

• IconFinder.com
• FlatIcon.com
• FreePik.com

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

Favicon Generator

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

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

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

Заключение

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

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

Также рекомендуем прочитать:

1. Топ-5 способов как оптимизировать сайт под мобильные устройства
2. 9 самых популярных типов инъекционных атак на веб-приложения
3. 7 способов, как увеличить скорость загрузки вашего сайта
4. Как бесплатно получить SSL-сертификат для сайта?

Обзор онлайн-генераторов, где найти коллекцию фавиконов

Favicon generator — сервисы, где можно сотворить «мини-логотип» для сайта или преобразовать подходящую картинку в нужный формат.

Удобный сервис, в котором можно сделать эксклюзивную иконку — нарисовать ее с нуля попиксельно. Для этого переходим на сервис и в меню слева нажимаем кнопку «Create New Favicon».

В центральной части окна находится область, в которой каждый квадратик — это пиксель будущего фавикона. Следует закрасить эти квадратики в разные цвета. Чтобы это проделать, нужно обратиться к блоку «Color Picker», который расположен в правой части сервиса. Здесь необходимо выбрать из предоставленной палитры необходимый цвет и щелкнуть по определенной области, где находится пиксельная сетка. Чтобы удалить неправильную закраску, достаточно поставить галочку возле чекбокса «transparent» и щелкнуть по квадрату, после чего он станет прозрачным.

Чтобы переместить рисунок по холсту сервиса, ставится галочка возле чекбокса «move». Для того чтобы посмотреть что получилось предусмотрен блок «Preview», который находится под пиксельной сеткой. Для скачивания готового фавикона на компьютер нужно нажать кнопку «Download Favicon».

Если вы не Пабло Пикассо и нарисовать с нуля для вас равносильно прыжку из парашюта, загрузите на сервер для будущего фавикона картинку любого формата и размера, она будет, как болванка. Чтобы загрузить изображение на генератор, нажимается кнопка «Import Image» в левом меню.

На открывшейся странице нужно кликнуть кнопку «Выбрать файл», найти на компьютере подходящую картинку. При загрузке прямоугольной картинки можно отформатировать ее в квадрат (16х16). Для этих целей предусмотрена вкладка «Shrink to square icon». Учтите, в таком случае изображение будет искажено по одной из осей.

Чтобы соотношение сторон остались прежними, поставьте точку в чекбоксе «Keep dimensions».

После всех манипуляций нажимаем кнопку «Upload». Редактирование загруженной фавиконки будет доступно аналогичным способом, что и создание с нуля. Для скачивания готового шедевра на ПК следует нажать кнопку «Download».

Этот онлайн генератор еще и предоставляет коллекцию фавиконов, которые создавались другими пользователями этого сервиса ранее. Они выложены в общем доступе. Чтобы посмотреть галерею нужно в левом меню нажать кнопку «Latest Favicons» — экспонаты, отсортированные по дате или кнопку «Top Rated Favicons» — по рейтингу.

Чтобы скачать понравившийся экземпляр кликните левой кнопкой мыши по его названию и на открывшейся странице выберите «Download Favicon».

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

Для создания фавикона необходимо ввести название компании или сайта и нажать кнопку «Далее».

Онлайн генератор предоставляет уже готовые к использованию шаблоны фавикона. Для скачивания иконки нажмите кнопку «Посмотреть и скачать» и на открывшейся странице «Скачать».

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

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

Последовательность действий следующая: выбираем файл и нажимаем кнопку «Create Favicon».

Сервис, предоставляющий возможность создавать фавикон с надписью. Цветовая гамма настраивается в области «Colors», а текст надписи вводится в полях «Top text» и «Bottom tex».

Для скачивания готового значка следует кликнуть по миниатюрной надписи «save as favicon file».

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

Для создания фавикона выбираем файл и нажимаем «Upload Now».

Также в сети можно найти и другие генераторы, которые позволяют создать фавиконы с нуля или же доработать уже имеющееся изображение. В частности FavIcon from Pics, DeGraeve, Generator, Онлайн редактор иконок favicon.ico, Online Favicon, Free Favicon Generator и Фавикон-генератор. Стоит отметить, что все они бесплатные.

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

• Галерея иконок для сайта favicon.ico;
• Iconj;
• Favicon.cc;
• The Favicon Gallery.

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

Как поставить Favicon самостоятельно

Стандартно поисковая система Яндекс и другие сервисы будут искать вашу фавиконку в корне сайта по адресу site.ru/favicon.ico. Поэтому наша задача закачать туда наш значок или указать иной путь его размещения.

Через тему сайта WordPress

Начиная с версии WordPress 4.3, можно добавить фавикон из админки WordPress.

Придерживайтесь вот такой последовательности:

1. Откройте админку
2. Внешний вид > Настроить > Свойства сайта
3. Значок сайта > Изменить изображение
4. Загрузите фавикон
5. Нажмите кнопку Опубликовать.

Как добавить фавикон на сайт WordPress вручную

Советуем сначала протестировать все на локальном сайте разработки.

1. Заходим в файлы темы FTP-клиент или файловый менеджер.
2. Находим папку /wp-content/themes/your-theme.
3. Загружаем иконку в подпапку, например, Assets.
4. Запоминаем путь к файлу.

В файте function.php и прописываем путь до фавикона.

Строка после href=«‘.get_template_directory_uri() должна указывать путь к вашему значку. Убедитесь, что вы указали правильное имя файла. Если вы используете формат файла .ico, то это будет один:

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

Рассмотрим значения:

rel

Если мы указываем значение «icon», то изображение будет хорошо отображаться во всех современных браузерах. Если указать вместо этого «shortcut icon», то значок будет виден только в Internet Explorer.

href

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

type

Здесь нужно прописать формат файла.

Как задать фавиконы для разных устройств?

Пропишите ссылки на иконки между тегами head. Например:

Apple

Иконки в устройствах Apple закругляются по углам. Поэтому лучше использовать apple-touch-icon-precomposed вместо apple-touch-icon.

Андроид

Можно загрузить иконку в нескольких размерах: 16×16, 32×32 и 48×48. Вот пример для декстопа:

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

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

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

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

Однако, лично я рекомендую использовать связку: Photoshop + программа Art Icons Pro – это популярный редактор иконок (российская разработка), который позволяет создавать и редактировать иконки. Программа поддерживает экспорт и импорт множества графических форматов.

Работать в «Art Icons» просто. Как делаю обычно лично я, когда хочу создать favicon:

• Захожу на сайт, для которого нужно сделать иконку.
• Делаю скриншот места на сайте, где размещен логотип.
• Открываю Photoshop, вставляю изображение из буфера обмена.
• Обрезаю изображение скриншота так, чтобы логотип был в его центре + нужно иметь в виду, что после обрезки само изображение должно быть квадратной формы.
• Далее сохраняю его в PNG. Закрываю Photoshop.
• Затем открываю сохраненную картинку в «Art Icons».
• Уменьшаю изображение до размера 16 x 16 пикселей: «Инструменты -> Конвертировать формат…» и выбираю размер 16 на 16 и цвета «True Color + Apha (32 бит)».
• Затем выбираю «Файл -> Сохранить как…» и выбираю формат «Icon (*.ico)».
• Все.

Ну и самый простой вариант – онлайн-генераторы Favicon. Примеры подобных онлайн-сервисов:

• https://www.favicon.by/
• https://www.favicon.cc/

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

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

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

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

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

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

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

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

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

Почему favicon имеет значение

Основная цель использования фавикона – это улучшение удобства пользования сайтом. Этот файл присутствует практически во всех современных популярных браузерах и вкладках браузера. Изначально фавикон был создан для быстрого визуального поиска необходимого сайта среди тысяч закладок в Интернете. Сейчас же он является удобным символом идентификации сайта при большом количестве открытых вкладок. А в некоторых поисковых системах (например Яндекс, а с 2019 года и Google), фавикон появляется и в результатах поисковой выдачи напротив каждого сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для чего нужен Favicon

Подведём итог, для чего может пригодиться favicon:

стилизации и уникализации результатов поиска (будет отображаться рядом с названиями ваших страниц в поисковой выдаче, и если Google убрал favicon из основной выдачи, то их вывод остался в других поисковых сервисах);

создания единого стиля сайта (особенно, если фавиконка соотносится с вашим логотипом) при отображении страниц в браузере;

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

размещения счётчиков или иных интерактивных элементов (только в браузерах).

Заключение

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

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