Понедельник , 24 Июль 2017
Главная / Делаем блог / Еще одна важная картинка – фавиконка

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

Еще одна важная картинка – фавиконкаМы часто обсуждаем картинки для блога – они, мол, должны быть максимально большими и качественными, с правильными тегами. Но у каждого веб-ресурса должна быть и одна очень маленькая, но очень важная картинка, которая будет появляться всякий раз в результатах поиска и в закладках браузера. Созданию этой картинки – фавиконки (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 — и мы постараемся разрешить их вместе!

Один комментарий

  1. Вячеслав

    Реанимированные комментарии

    Алиса:
    30.05.2012 в 21:28
    Я вот только не пойму, почему Яша не все фавиконы видит. Он на диетах мой фавикон не видит.

    katyaru:
    30.05.2012 в 21:34
    Скажу прямо и честно: ХЗ)))

    Людмила:
    30.05.2012 в 21:58
    Я все никак не приступлю к знакомству с фотошопом. Даже не знаю, осилю ли когда нибудь.

    katyaru:
    30.05.2012 в 22:23
    Я помогу, обещаю)

    Галина:
    31.05.2012 в 06:06
    Такое простое действие, как уменьшение размеров, делают многие программы-автоматы, например, Яндекс-фотки.

    katyaru:
    31.05.2012 в 10:07
    Ну, мне бы хотелось, чтобы те, кто боится лезть в Фотошоп — сделали этот шажок. В простой-то программе и без подсказок человек найдется)

    ladosha:
    31.05.2012 в 08:50
    А моя иконка — буква «Л», слегка стилизованная под старославянскую (если это заметно в малом масштабе))))

    katyaru:
    31.05.2012 в 10:06
    Мне долгое время казалось, что это А, но потом я логически вычислила, что это Л (но я — не показатель, я вижу плохо)

    Илона:
    31.05.2012 в 09:50
    А я свою в Helikon делала, помню — намучилась, пока нужный размер подобрала(

    venezia:
    31.05.2012 в 13:08
    Я себе как-то сделала, но уже не помню — как(( Так что — большое спасибо!
    Яндекс ее видит, но очень мелкую я сделала.

    katyaru:
    31.05.2012 в 13:30
    Может быть, ты сделала через какой-то сервис. Для Блогспота все проще — не нужно ничего в код вставлять, требуется только подходящая картинка, которую грузишь во вкладке «дизайн» (где всякие виджеты, сверху слева окошко)

    Валерия:
    31.05.2012 в 21:12
    Пошла делать, наверное (вернее, искать себе картинку по душе)!.. )))

    katyaru:
    31.05.2012 в 21:25
    Если что — спрашивай, подскажу)

    Лиза:
    05.08.2012 в 13:09
    Спасибо за статью! сделала иконку для своего сайта

    katyaru:
    06.08.2012 в 11:23
    Рада помочь

    Катерина Борисова:
    29.08.2012 в 21:16
    о, попробую так. а то у меня стоит через плагин, а отображается через раз: то новая, то старая.. в яндексе (выдаче) старая, в браузере при работе — новая

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

пять × три =