Приветствую всех читателей блога seversantana.ru. Как создать фавикон для сайта, и для чего он нужен? И что будет с сайтом если не делать иконку для сайта?
Favicon (FAVorites ICON) — значок веб-страницы или веб-сайта, значок для избранного. Фавикон отображается браузерами в открытых вкладках перед названием страницы, а также в сохранённых закладках. Поисковая система Яндекс отображает иконку в поисковой выдаче.
Без фавикона интернет ресурс теряет часть своей индивидуальности. А наличие чужой иконки, как говорит Кузя из «Универа» — Апокрифично, глубоко, мрачно. При отсутствии фавикона страдает юзабилити. А чем юзабельней проект, тем выше посещаемость.
Природа человека устроена так, что картинка в памяти откладывается быстрей, чем текстовая информация. Можно не запомнить название какого-нибудь замечательного сайта, но узнать его по иконке.
Мне иногда удаётся найти интересную для меня информацию, нечаянно по запарке закрытую мной в истории браузера по иконке сайта. Казалось бы, специально ничего не запоминал, а картинка в голове отложилась. Создание фавикона это дополнительный положительный фактор для продвижения сайта.
Делать или нет иконку для сайта? — такого вопроса, априори, быть не должно. Создать простой фавикон не так уж сложно и время затратно. Создать хороший фавикон потребует больше усилий и времени. Какой бы ни был favicon на сайте простой, отличный, сногсшибательный или не очень удачный, при любом раскладе это лучше, чем его отсутствие.
В каких форматах может быть создан фавикон? Иконку можно сделать и сохранить в следующих типах расширений — png, ico, jpeg, gif, svg, apng. Ниже представлена таблица наиболее популярных браузеров и их «отношение» к используемым типам расширений при создании фавикона.
| Браузер | ICO | PNG | GIF | Анимиро-ванный GIF | JPEG | APNG | SVG |
|---|---|---|---|---|---|---|---|
| Google Chrome | Да | 4.0 | 4.0 | Нет | 4.0 | Нет | Нет |
| Firefox | 1.0 | 1.0 | 1.0 | Да | Да | 3.0 | Нет |
| Safari | Да | 4.0 | 4.0 | Нет | 4.0 | Нет | Нет |
| Internet Explorer | 5.0 | Нет | Нет | Нет | Нет | Нет | Нет |
| Opera | 7.0 | 7.0 | 7.0 | 7.0 | 7.0 | 9.5 | 9.5 |
Тип расширения ico поддерживается всеми веб-обозревателями, поэтому основным форматом в котором делается иконка для сайта является ico. Как правило, используемый размер 16х16 px.
к оглавлению ↑Как сделать фавикон в Фотошоп
В программе Фотошоп по умолчанию отсутствует возможность сохранения файла в ico. Для нас при создании фавикона это не проблема. Для решения этой задачи можно использовать два варианта.
Первый вариант, создаём иконку в Фотошоп, сохраняем в png, и после этого конвертируем его в ico в любом онлайн-сервисе. Например, в этом.
Второй вариант. После создания фавикона в Фотошоп скачиваем плагин экспорта типов расширений с сайта telegraphics.com
Версии плагина есть на ОС MAC и 32-х и 64-разрядные Windows с поддержкой всех версий Фотошоп. Выбираем нужную, качаем на компьютер, распаковываем архив, и закидываем в каталог File Formats файл ICOFormat в формате 8bi.
Стандартный путь к каталогу:
C:\Program Files\Adobe\Photoshop\Plug-Ins\File Formats
У меня путь был следующий :
C:\Program Files\Adobe\Adobe Photoshop CS6 (64 Bit)\Required\Plug-Ins\File Formats.
Перезагружаем Фотошоп, теперь при клике на «Сохранить как» будет доступен вариант сохранения файла в формате ico.
Расскажу как я делал фавикон для блога seversantana.ru. В программе Фотошоп перешёл на вкладку «Файл», нажал на «Создать». Выбрал следующие параметры. Размер 16х16 px., разрешение 72 пикселы/дюйм, цветовой режим RGB 8 бит, содержимое фона — прозрачный. И сразу же задал имя — favicon.
После создания файла кликнул на инструмент «Рука» для увеличения рабочего пространства, и при помощи зажатого Ctrl и клавиш + и — задал нужный размер для комфортной работы.
Для своего блога я решил сделать иконку в виде буквы S согласно названию домена seversantana.ru Букву оформил в белом цвете прозрачный фон с помощью инструмента «Заливка» заменил на тон marengo, используемый в теме моего шаблона.
Пошагово это выглядело следующим образом. Увеличил рабочее пространство, кликнул на инструмент «Основной цвет», прописал код цвета marengo. Нажал на «Заливку» перетащил ведро на рабочую поверхность, и при помощи левой кнопки залил прозрачную область.
Мне осталось добавить мою белую букву S. Я нажал на инструмент «Горизонтальный текст», обвёл рабочую площадь, настроил в Фотошоп параметры текста, и напечатал букву S. После этого подкорректировал размер шрифта и выровнял букву по центру. Поэкспериментировал со стилями слоёв. Получилось то что получилось. Когда я уменьшил иконку до реального размера результат меня устроил вполне.
Онлайн-генераторы фавикон
Иконку можно сделать в онлайн-генераторах фавиконов. Опишу только один из них. Функциональность у продвинутых онлайн-генераторов примерно одинакова.
favicon.ru
Неплохой онлайн-генератор для фавиконов. На сервис можно загрузить готовое изображение для редактирования. Из инструментов имеется цветовая палитра, рисование, пипетка, прозрачные пиксели, перемещение. Под панелью рисования находится предпросмотр в реальном разрешении на фоне адресной строки.
Рисуем и тут же видим, как будет отображаться наш фавикон в интернете. Здесь же не отходя от кассы, можно заказать иконку для сайта у профессионалов. Если выбирать между фотошопом и любым онлайн-генератором, Photoshop, разумеется, намного функциональнее.
к оглавлению ↑Как установить фавикон на сайт
Готовую иконку, как правило, размещают в корневую папку в которой находятся все каталоги сайта. В зависимости от используемой CMS наименование корневой папки может быть public_htm, HTDOCS (httpdocs). Это может быть и подкаталог, с именем вашего домена, вложенный в domains или public_htm.
В моём случае корневой каталог — public_htm\seversantana.ru. То есть я открыл папку seversantana.ru, и закинул туда сделанную иконку.
Сделать это действие можно через FTP-клиент или через панель управления хостингом. Я предпочитаю делать какие-либо изменения через FTP-клиент и использую для этого FileZilla. На крайний случай, если для вас определение корневого каталога сложный вопрос, смело задавайте его в техподдержку своего хостинга. Вам все подскажут и расскажут, развеют все ваши сомнения.
После размещения в корне иконка будет отображаться в открытых вкладках страниц в браузере. Если не отображается очистите кеш веб-обозревателя (очистить историю). И обновите страницу нажав на клавишу F5. Я проверил у себя отображение в Опере, Мозилле, Гугл Хром, ИЕ, Сафари, Яндекс.браузере и SeaMonkey. Все замечательно.
Если веб-обозреватели не видят иконки давайте сделаем следующее, пропишем путь к файлу для поискового робота. Html код должен быть расположен внутри контейнера <head> . Вставьте его перед закрывающимся тегом </head>. Незабудьте прописать в коде вместо «ваш сайт» достоверную информацию. Выглядит он следующим образом:
|
1 |
<link type="image/x-icon" href="http://ваш сайт/favicon.ico" rel="shortcut icon" /> |
В WordPress этот html код прописывается в файле header.php вашей темы.
В Joomla это файл index.php используемого вами шаблона.
Добились отображения иконки в браузерах замечательно, теперь ждём её индексации в Яндексе. После индексации она появится в поисковой выдаче Яши.
Наш робот которого мы с нетерпением ждём представится в логах сервера со следующим именем — Mozilla/5.0 (compatible; YandexFavicons/1.0; +http://yandex.com/bots) Именно он индексирует пиктограммы сайтов.
Со списком роботов Яши можно ознакомиться в хелпе веб-мастера Яндекс.
С основными роботами Гоши знакомимся в панели для веб-мастеров Гугл.
При хорошем раскладе наша пиктограмма проиндексируется в течение месяца за один-два АПа. АП — это обновление выдачи в индексе поисковой системы. Робот Яндекса отвечающие за пиктограммы, придёт на сайт увидит фавикон, сообщит поисковой системе, и она его выложит в выдачу.
И в завершение статьи, расскажу как сделать два разных значка в открытых вкладках поисковых веб-обозревателей для Вордпресс.
к оглавлению ↑Два фавикона сайта для Вордпресс
Причина такой роскоши банальна. Делается это для личного удобства при работе в интернете над собственным блогом. Создаём два разных значка для отображения в открытых вкладках. Точнее, к уже готовому, добавляем ещё один другого вида для админ панели WordPress.
Меняем его внешний вид до такой степени, чтобы различия бросались в глаза. Я просто поменял бэкграунд (фон). Сделал фавикон отображающейся на открытых страницах для моей админ панели красного цвета. Теперь когда у меня в одном окне открыто много вкладок, я вижу какие из моих относятся к админ панели, а которые ведут на страницы блога.
Приступим к технической части как это делается. Значок для админ панели размещаем в папке с названием нашей темы (шаблона). Далее, в этом же каталоге открываем functions.php на редактирование и в конце перед ?> вставляем следующие код:
|
1 2 3 4 |
function adminFavicon() { echo '<link rel="Shortcut Icon" type="image/x-icon" href="//seversantana.ru/wp-content/themes/webfactory/favicon.ico"/>'; } add_action( 'admin_head', 'adminFavicon' ); |
Сохраняем изменения, очищаем кеш обозревателя, любуемся результатом.
P.S. Перед тем как изменить преобразовать иконку из png в ico не помешает сжать картинку с помощью какого-либо онлайн-сервиса или программы для уменьшения ее веса, а соответственно снижения нагрузки на сервер. Я для png использую программу PNGCauntlet. Сначала png картинку сохраняю в Фотошоп через «Сохранить для Web», а потом закидываю в PNGCauntlet.
(голосов: 1, в среднем: 5,00 из 5)
Загрузка...- Похожие записи в Wordpress за 10 минут
- Как снизить нагрузку на сервер в блоге Wordpress
- SEO плагин для WordPress SEO by Yoast. Установка и настройка
- Настройка RSS ленты в Гугл Фидбернер (Google Feedburner)
- Виджет комментариев для сайта Cackle — установка и настройка
