Еще одна важная картинка – фавиконка

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

Фавиконка – почти логотип блога

Я пишу «почти» потому, что логотип все же больше по размеру и намного более информативен. Но фавиконка – его «младшая сестра». Если у вашего блога есть логотип, то фавиконка должна быть на него похожа. А если логотипа нет – то это маленькое изображение будет хоть в какой-то мере его заменять. В любом случае, оставлять название блога «голеньким» — нехорошо!

Какие характеристики важны для фавиконки?

• Размер картинки, примерно, 15 х 15 пикселей;
• По пропорциям она должна быть близка к квадрату;
• При этом, изображение должно быть узнаваемо и «читаемо»;

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

Поэтому я вижу решение проблемы в том, чтобы выбрать картинку, которая нравится блоггеру и, желательно, отражает тему его блога. Для Блоготея я предпочла золотую монетку – думаю, мотивы ясны. Конечно, в этом нет ничего оригинального, но я удовлетворилась.

Как сделать фавиконку самому?

Мы не будем пока (ключевое слово «пока») касаться вариантов создания картинки в Photoshop, хотя, я считаю, что каждый блоггер должен иметь минимальные навыки обращения с этой программой. Пока просто откроем поисковик и будем искать там подходящее изображение, желательно, в формате png или jpeg с белым фоном. Чем лучше картинка в png? – тем, что у нее как бы нет фона, то есть, фон прозрачен.

В любом поисковике вы обнаружите массу фавиконок, собранных в коллекции. Но можно выбрать и отдельное изображение. Когда картинка найдена – нужно уменьшить ее размеры до требуемых. Все-таки откроем изображение в Photoshop и нажмем на вкладку «Изображение». Там выбираем «Размер изображения»:

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

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

Сохраняем нашу фавиконку. Лучше назвать ее соответственно – favicon.

Добавление фавиконки в код шаблона WordPress

Загрузив нашу фавиконку в блог, получаем ее адрес. Потом открываем страницу header.php (ту, что часто называют «Заголовок»). Там ищем закрывающий тег </head> и выше него прописываем такой код:

<!— Favicon —>

<link rel="icon" href="http://site.ru/wp-content/uploads/.../favicon.png" type="image/x-icon">

<!— Favicon —>

Меняем адрес в строке href=»http://site.ru/wp-content/uploads/…/favicon.png» на адрес вашей фавиконки.

Сохраните и обновите страницу – слева от названия вашего блога в закладках браузера (не в адресной строке) должна появиться картинка. В результатах поиска она появится чуть позже.

Расскажите мне, с какими сложностями вы сталкиваетесь, работая с программой Photoshop — и мы постараемся разрешить их вместе!