Favicon: что это такое, как создать и установить на свой сайт, отображение на мобильном
Содержание:
- Создаем фавикон с помощью Adobe Photoshop
- Favicon для мобильных устройств Apple
- Как установить favicon на сайт
- Как установить фавикон на сайт?
- Как установить фавикон на WordPress?
- Почему favicon имеет значение
- Что такое favicon
- Создание favicon.ico
- Обзор онлайн-генераторов, где найти коллекцию фавиконов
- Использование готовых иконок для сайта
- Код для таск-менеджеров Grunt и Gulp
- Как создать фавикон: лучшие сервисы
- Установка фавикона
- Отображение Favicon на мобильном
- Создание иконки в Photoshop
- Где скачать готовый вариант
Создаем фавикон с помощью Adobe Photoshop
Фавикон на прозрачном фоне:
1) Откройте логотип в формате PNG на прозрачном фоне в редакторе нажав: “Файл” — “Открыть” и выберите изображение на вашем компьютере.
2) Удалите название компании из логотипа, чтобы использовать только иконку выбрав инструмент “Ластик” и изменив основной цвет на белый.
3) Теперь, измените размер логотипа на 16х16 пикселей нажав: “Изображение” — “Размер изображения”.
4) И измените размеры на 16х16 пикселей. Ваша фавиконка покажется вам совсем крошечной, но не переживайте, все так и должно быть.
5) Сохраните изображение нажав “Файл” — “Сохранить как” и выберите тип файла “PNG”.
Если ваш логотип выглядит отлично, то переходите к шагу 4.
Фавикон на фоне с корпоративным цветом:
1) Как и в первом варианте, откройте файл в формате PNG, но только уже не на прозрачном фоне, а на фоне с корпоративным цветом.
2) Удалите текст и оставьте только иконку: воспользуйтесь инструментом “Пипетка”, чтобы выбрать цвет в соответствии с фоном — цвет на палитре автоматически измениться на нужный. Теперь, кликните на инструмент “Кисть” и зарисуйте текст.
3) Измените размер нажав “Изображение” — “Изменить размер”, и в соответствующем поле введите показатели 16х16 пикселей. Если изображение выглядит пропорционально — сохраните в формате .PNG и переходите к шагу 4.
Favicon для мобильных устройств Apple
Как и в андроид, устройства Apple имеют различный PPI для разных устройств, в том числе так называемые Retina-экраны. Для разных версий разрешений экрана и версий ОС так же существует ряд различных вариантов иконок:
- 57×57 – для iPhone с не ретина дисплеем и iOS версии 6.0 и ниже
- 60×60 – для iPhone с не ретина дисплеем и iOS версии 7.0
- 72×72 – для iPad с не ретина дисплеем и iOS версии 6.0 и ниже
- 76×76 – для iPad с не ретина дисплеем и iOS версии 7.0
- 114×144 – для iPhone с ретина дисплеем и iOS версии 6.0 и ниже
- 120×120 – для iPhone с ретина дисплеем и iOS версии 7.0
- 144×144 – для iPad с ретина дисплеем и iOS версии 6.0 и ниже
- 152×152 – для iPad с ретина дисплеем и iOS версии 7.0
- 180×180 – для iPhone 6 Plus c iOS версии 8.0
Как установить favicon на сайт
Если на вашем сайте уже есть стандартный фавикон от CMS, то самый простой вариант, это заменить файл favicon.ico на вашем хостинге новым фалом (обычно он находится в корне сайта). Также в ряде CMS установка favicon осуществляется через админку и не нужно ковыряться коде сайта.
Если стандартной иконку и вас нет, и в админке она тоже не меняется, то необходимо прописать небольшие строчки в HTML код вашего сайта. Их нужно размещать между тегов <head> и </head>. У разных CMS структура шаблонов разная, поэтому, иногда приходится поискать в каком файле шаблона есть эти теги. У WordPress, например, этот файл называется «header.php», а у OpenCart – «header.tpl».
Если у вас иконка в формате ICO, то нужно вставить следующий код:
<link rel="icon" href="/favicon.ico" type="image/x-icon"> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
Данная запись справедлива, если фавикон находится в корне сайта. Если он имеет иной путь, то перед «/favicon.ico», нужно записать путь к файлу. Например, такой: «http://мой-сайт.ru/моя-папка/favicon.ico».
Код для иконки в формате GIF:
<link rel="icon" href="/favicon.gif" type="image/gif"> <link rel="shortcut icon" href="/favicon.gif" type=" image/gif">
Код для иконки в формате PNG:
<link rel="icon" href="/favicon.png" type="image/png"> <link rel="shortcut icon" href="/favicon.png" type=" image/png">
В них тоже нужно изменить путь расположения файла, если он отличается. Кстати, в браузере вашу иконку сайта может быть не видно сразу, или может отображаться старая. Если вы прописали иконку правильно, то скорее всего вам нужно просто почистить кэш браузера.
Как установить фавикон на сайт?
После того, как вы получили фавикон, его установка на сервер займет не больше пары минут и выполняется в два этапа. Для этого вам потребуется доступ к корневому каталогу вашего сайта и текстовый редактор, чтобы изменить HTML-код сайта.
Шаг 1.Вам необходимо загрузить файл favicon.ico на сервер. Чтобы это сделать, вам нужно скачать и установить ftp клиент, например, FileZilla.
Затем ввести логин и пароль и загрузить файл. Более подробную инструкцию как загрузить файл фавикона вы можете прочитать здесь.
Шаг 2.Теперь вам нужно отредактировать HTML-страницу вашего сайта, чтобы помочь браузерам находить изображение вашего фавикона. При открытом окне FTP, найдите и скачайте с сервера файл index.html или header.php.
Перед правками кода, рекомендуем сделать копию файлов, чтобы можно было восстановить файлы, если вы допустите ошибку.
Откройте файл index.html в текстовом редакторе — блокнот, Notepad++, Sublime Text.
Если ваш сайт содержит чистый HTML, вставьте специальный код в область HEAD файла index.html.
Если вы используете WordPress, вставьте приведенный ниже код в область HEAD файла header.php.
Сделав это, загрузите файл обратно туда, где вы его взяли. Готово! Перезагрузите страницу вашего сайта, чтобы увидеть фавикон.
Большинство современных браузеров достаточно умные и умеют находить файл фавикон даже без такого кода, но только если фавикона имеет изображение формата 16х16 пикселей, название favicon.ico и сохранен в корневом каталоге вашего сайта.
Также дополнительно рекомендуем почитать содержательно подобранную информацию об установке фавикона на сайт, его особенностях и преимуществах использования здесь.
Надеемся, что эта статья была полезной и поможет вам создать фавикон, который сделает ваш сайте более успешнее и привлекательней.
Руководитель отдела маркетинга и главный генератор идей компании Logaster. Автор книги «Как создать фирменный стиль и не разориться». Ценит экспертный подход, но в то же время использует простой язык для объяснения сложных идей.
Как установить фавикон на WordPress?
Загрузите ваш фавикон (favicon.ico) в основной (корневой) каталог сайта. Корневой каталог — это главная папка, в которой находятся все ваши WP-файлы, такие как index.php и папки wp-admin, wp-content + wp-includes. Обязательно разместите favicon.ico на одном уровне с этими папками и index.php.
1) На WordPress откройте “Административную панель”.
2) Войдите в раздел “Appearance”
3) Нажмите на “Theme Editor”.
4) Нажмите на файл, который называется “Header” или “Header.php”, чтобы редактировать.
5) Найдите строку кода, которая начинается с <link rel=»shortcut icon» и заканчивается на /favicon.ico «/>. Измените его, если он существует, или добавьте следующий код под HTML-тегом <head>. В примере мы используем название фавикона как “favicon.ico”. Вы же можете назвать ваш фавикон как угодно.
Код: <link rel=»shortcut icon» href=»<?php echo get_stylesheet_directory_uri();?>/favicon.ico»/>;
6) Сохраните изменения.
Выводы:При разработке вашего сайта вы должны быть уверенны, что не упустили важные детали, даже такие мелкие как фавикон. Добавить иконку действительно не сложно. Но эта крошечная вещь показывает, что вы продумали свой дизайн и позаботились о деталях. У вас остались вопросы, или вы хотите поделиться опытом создания фавикона для вашего сайта? Добро пожаловать в комментарии.
Редактор блога компании Logaster, контент-маркетолог. Эксперт по веб-маркетингу и брендированию. Умеет писать просто о сложном. По ее статьям можно построить успешный бренд и начать успешное продвижение в интернете.
Почему favicon имеет значение
Основная цель использования фавикона – это улучшение удобства пользования сайтом. Этот файл присутствует практически во всех современных популярных браузерах и вкладках браузера. Изначально фавикон был создан для быстрого визуального поиска необходимого сайта среди тысяч закладок в Интернете. Сейчас же он является удобным символом идентификации сайта при большом количестве открытых вкладок. А в некоторых поисковых системах (например Яндекс, а с 2019 года и Google), фавикон появляется и в результатах поисковой выдачи напротив каждого сайта.
Сайт без такого персонального идентификатора в виде иконки будет отображаться с общим символом браузера. Использование уникальной, запоминаемой иконки значительно повышает узнаваемость вашего бренда, а также делает жизнь пользователя проще. Так как он в любой момент может быстро найти ваш сайт по знакомой картинке.
Что такое favicon
Favicon (или фавиконка) — это специальный значок, который используется для отображения в некоторых элементах браузера. Каждый отдельный веб-ресурс имеет (или должен иметь) свою отдельную фавиконку, которую, к примеру, можно увидеть рядом с адресом сайта в названии вкладки браузера, в поисковой выдаче и в списке избранных сайтов. Именно из-за подобного использования в качестве символа для закладки и родилось название этого значка — FAVourite ICON, то есть иконка для избранного, так как изначально фавиконка использовалась только для этого.
В настоящее время фавиконка — это, во-первых, мини-символ сайта, который повышает узнаваемость ресурса; во-вторых, ее наличие положительно влияет на положение сайта в поисковой выдаче.
Создание favicon.ico
Самые распространенные способы – это с помощью онлайн сервисов или знаменитого растрового редактора – Adobe Photoshop.
Онлайн-сервисы
Интерфейс сервиса состоит из следующих разделов:
- Нарисовать самостоятельно – в этом разделе есть все что необходимо для самостоятельно рисования фавиконки (карандаш, ластик, пипетка, заливка, переместить).
- Импорт из файла – выбираете любой рисунок и сервис сам создает фавикон.
- Импорт с сайта – создаст favicon.ico на основе импорта фавиконки с сайта.
- Область для рисования.
- Готовый результат – сразу можете оценить, как будет выглядеть favicon.
- Скачать готовую фавиконку.
Вот такой простой, не сложный сервис поможет создать красивую и уникальную фавиконку.
Adobe Photoshop
Я выбираю именно фотошоп, потому что редактирую в нем все картинки для блога. Если у Вас нет опыта работы с Adobe Photoshop, не переживайте, я все подробно покажу.
Открывает программу, создаем документ с размером 32×32 пикселей.
Далее с помощью инструментов можно:
- сделать заливку;
- написать текст;
- создать фигуру.
Или загрузить картинку, например, свой логотип и его уменьшить до необходимых размеров.
- Для этого открываем меню Файл -> Открыть, далее выбираем свою картинку и нажимаем кнопку Открыть.
- После, инструментом выделение, отмечаем нужную часть логотипа, далее меню Редактирование -> Копировать.
- Закрываем логотип, открываем документ с нашей будущей фавиконкой, нажимаем меню Редактирование -> Вставить.
- Далее на клавиатуре нажимаем сочетание клавиш Ctrl+T (eng), подгоняем картинку под наши размеры. Готово.
Фавиконку сохраняем, выбрав меню Файл -> Сохранить как…, указываем имя favicon и выбираем расширение .png или .jpeg или .jpg.
После сохранения можно устанавливать, но рекомендуется файл с расширением .ico. Поэтому наш favicon.png конвертируем в favicon.ico.
Далее нажимаем кнопку Конвертировать, ждем и можем скачивать готовую фавиконку.
Вот теперь можно поставить фавикон на сайт.
Обзор онлайн-генераторов, где найти коллекцию фавиконов
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.
В них можно найти десятки тысяч мини-логотипов для своего проекта, как говорится на любой вкус и цвет.
Использование готовых иконок для сайта
Вариант максимально прост, если вам не нужна уникальная иконка, и вы готовы использовать готовые решения. Если вы не веб-дизайнер и не художник, то готовые иконки, как правило, выглядят куда лучше, чем самостоятельно нарисованные. Тем более с поиском и скачиванием красивых иконок сегодня нет проблем.
Сайтов, на которых можно их скачать, достаточно много. Я не буду все перечислять. Приведу, для примера, тоже три сайта.
- IconSearch.ru – русскоязычный сервис, с приличным набором иконок. Размеры иконок от 16х16 до 128х128 пикселей. Есть возможность сохранения иконки в форматы ICO и PNG.
- IconSeeker.com – аналогичный сервис, только англоязычный. Больших отличий нет, за исключением того, что попадаются иконки размера 256х256.
- IconFinder.com – это один из моих любимых поисковиков иконок. Там правда много платных иконок, но и среди бесплатных есть что выбрать. Помимо упомянутых уже ICO и PNG форматов, можно скачать в SVG, или даже в AI (векторная графика Adobe Illustration). Иконки размерностью до 512х512 пикселей.
Код для таск-менеджеров 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
Как создать фавикон: лучшие сервисы
Я подготовил для вас небольшой список с достаточно популярными и простыми в освоении ресурсами по созданию фавиконок. Ну а чтобы не возникло вопросов о том, как с ними работать – составил небольшие инструкции. Кстати, о том, как добавить созданный фавикон на сайт можете прочитать в моей статье — как добавить фавикон на сайт WordPress: готовые фавиконы для сайта.
X-Icon Editor
Достаточно простой в освоении сервис. Можно творить непосредственно в редакторе или создать фавикон из своей картинки. Выбор целиком и полностью принадлежит вам.
Итак, для начала перейдите на сайт – x-icon.
Затем, выберите один из двух вариантов работы:
- Создать фавикон самому, попиксельно, используя редактор;
- Подгрузить заранее созданную в фотошопе картинку и работать непосредственно с ней.
Небольшая инструкция для тех, кто выбрал второй вариант:
- Нажмите «Import»:
- Загрузите картинку нажав «Upload», выделите необходимую область и размеры. Нажмите «Ok»:
- В случае необходимости воспользуйтесь редактором и подкорректируйте загруженную картинку по своему усмотрению;
- Когда все будет готово — нажмите «Preview» и посмотрите, как ваш фавикон отображаться в браузере;
- Если все устраивает, вернитесь на вкладку с редактором и нажмите «Export». В появившимся окошке нажмите «Export your icon» и фавикон будет автоматически скачан на ПК:
Готово. Вам остается только добавить его на сайт.
BWS
Еще один достаточно простой в освоении ресурс. Правда, у него есть один существенный минус: если сравнивать с X-Icon – он так же позволяет создать фавикон из картинки в режиме онлайн, вот только не дает его редактировать. По сути – он просто конвертирует ваше заранее подготовленное изображение в иконку необходимого размера и расширения. Поэтому, придется как следует попотеть в фотошопе, чтобы потом не переделывать все по сто раз.
Итак, как же сделать фавикон для сайта в этом сервисе? Все просто. Вы заранее подготавливаете картинку в пейнте или фотошопе, подгружаете ее, выбираете подходящие размеры и нажимаете «Конвертировать». Когда все будет готово, иконка автоматически скачается на компьютер:
Pr-cy
Данный сервис (ссылка на сайт) своим функционалом очень похож на предыдущий. Вы так же заранее подготавливаете изображение, загружаете его и нажимаете «Создать Favicon». Сервис сам сгенерирует иконку и покажет, как она будет выглядеть в строке поиска. Вам остается только нажать «Скачать»:
Favicon.by
Весьма симпатичный и крайне интересный ресурс. Позволяет выбрать один из трех вариантов создания значка: сделать фавикон для сайта онлайн вручную, использовать для этого заранее подготовленную картинку или импортировать чужую иконку введя url сайта. Круто, не правда ли? А теперь давайте пройдемся по всем трем функциям и посмотрим, как именно они работают:
Сделать фавикон онлайн используя редактор;
Главная фишка сервиса — вам сразу же будет виден результат вашей работы:
Когда закончите творить, просто нажмите «Скачать фавиконку» справа от строчки с результатом. Загрузка начнется автоматически.
Сделать фавикон из своей картинки;
Ну, тут все по аналогии с предыдущими сервисами. Просто подгружаете изображение, редактируете и нажимаете скачать.
А теперь самое интересное – импортировать фавиконку с чужого сайта.
Введите url сайта с понравившейся иконкой и нажмите «Импортировать»:
Отредактируйте изображение по своему вкусу и нажмите скачать. Все, у вас на руках готовая иконка для сайта.
Установка фавикона
Я покажу два способа установки, первый подойдет для всей сайтов, например, для сайта на HTML или WordPress, Второй способ только для проектов на движке WordPress.
Первый способ
Для начала нужно поместить созданный favicon.ico в корень сайта. Подключаемся к хостингу по FTP-соединению с помощью клиента FileZilla, перемещаем файл в корневую папку.
После этого открываем главную страницу сайта с помощью любого редактора кода, в Вордпресс это можно сделать, открыв меню Внешний вид -> Редактор тем, файл header.php и размещаем следующий код в разделе <head>:
<link rel="icon" href="/favicon.ico" type="image/x-icon" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
Сохраните файл, обновите страницу, появится фавикон. Если не отображается фавикон, то необходимо почистить куки в браузере.
Второй способ
Как я говорила ранее этот способ подойдет только для установки на CMS WordPress.
Открываем меню Внешний вид, далее выбираем шаблон, нажимаем настроить, далее Свойства сайта. Загружаем иконку на и сразу можем увидеть результат.
Отображение Favicon на мобильном
Favicon для мобильных сайтов используется, как главный значок вашего сайта. Когда вы открываете сайт на мобильном телефоне, на главном экране быстрого доступа в браузера, отображается именно этот favicon. Ваш сайт можно добавить на главный экран телефона, и здесь тоже подтягивается мобильный favicon.
Как видно выше на скриншоте, у Вконтакте и Avito, фавиконка не адаптирована под мобильные устройства, поэтому используется первая буква домена.
В эру мобильных телефонов, каждый сайт обязан использовать такие Favicon для отображения на мобильных телефонах. Это создает удобство для ваших посетителей сайта.
Иконка для IOS
Чтобы favicon отображалась на устройствах IOS и в браузере Safari, надо прописать следующий код:
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png"> <link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png"> <link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png"> <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png"> <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
Android
Для устройств работающих на Android, прописываем:
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"> <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"> <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"> <link rel="icon" type="image/png" href="/favicon-192x192.png" sizes="192x192">
Но этот код отобразит ваш favicon, только в браузере. А для того, чтобы иконка отображалась на рабочем столе смартфона, необходимо задать файл-манифест.
<link rel="manifest" href="/manifest.json">
Его содержимое:
{
"name": "%title%",
"icons": [
{
"src": "\/android-chrome-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "\/android-chrome-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "\/android-chrome-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "\/android-chrome-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/android-chrome-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
Более подробно можно посмотреть в документации Google Chrome.
Но это еще не все. В новых версиях Android (начиная с Lollipop), ваш браузер может перекрашиваться в интерфейс цвета сайта.
Чтобы сделать такую фишку, прописываем строчку и задаем свой цвет:
<meta name="theme-color" content="#8A2BE2">
Windows Phone
Про favicon в Windows Phone тоже не забываем:
<meta name="msapplication-TileColor" content="#8A2BE2"> <meta name="msapplication-TileImage" content="/mstile-144x144.png">
Для более расширенной настройки иконки в Windows Phone, можно использовать следующие значения:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="/mstile-70x70.png"/>
<square150x150logo src="/mstile-150x150.png"/>
<square310x310logo src="/mstile-310x310.png"/>
<wide310x150logo src="/mstile-310x150.png"/>
<TileColor>#8A2BE2</TileColor>
</tile>
</msapplication>
</browserconfig>
Сам файл настройки:
<meta name="msapplication-config" content="/browserconfig.xml" />
Более подробно о разметке в документации Microsoft.
Создание иконки в Photoshop
Основная проблема в том, что Photoshop не поддерживает файлы формата «.ico». Поэтому необходимо загрузить и установить его плагин из Telegraphics.
В меню выбора, папке FILE, вы должны создать новый файл с холстом размером 64х64 пикселя (проще работать с большими размерами), вставить свой логотип в документ и внести все необходимые изменения.
После этого выберите папку IMAGE, перейдите к IMAGE SIZE и измените его на 16 × 16 пикселей. Не забудьте удостовериться, что вы не размываете его, нажав кнопку RESAMPLE IMAGE и BICUBIC SHARPER. Если вы удовлетворены результатами, откройте папку FILE и нажмите SAVE AS.
Где скачать готовый вариант
Далеко не лучший выбор, но кто-то им пользуется. Вы можете скачать готовый фавикон из интернета и особо не заморачиваться над самостоятельным созданием своего. Все они представлены в удобных форматах и нужных размерах.
Просто вводим в поисковик нужный запрос, что-то типа “Скачать готовый favicon”, после этого вам будет представлено огромное количество самых разных вариаций.
Скачиваем картинку себе на ПК, а после устанавливаем на сайт. Все просто. Они доступны абсолютно бесплатно, никто вас ругать не будет. Хотя если речь идет о компании, пусть даже мелкой, то при обнаружении чужого логотипа могут возникнуть неприятные казусы.
Готовые варианты можно поискать и на различных сайтах. Как правило, там представлены целые подборки всевозможных тематических логотипов, которые могут прийтись по вкусу некоторым вебмастерам.
Но я еще раз повторюсь, что лучше будет создать фавикон самостоятельно.
Adblock